.page-frame {
    width: min(1440px, calc(100% - 36px));
    margin: 22px auto 0;
    border-radius: 34px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 48%, rgba(230,246,244,.86) 100%);
    box-shadow: 0 34px 110px rgba(16, 24, 40, .10);
    border: 1px solid rgba(255,255,255,.92);
}

    .page-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 17% 25%, rgba(143, 0, 4, .16), transparent 22rem), radial-gradient(circle at 84% 20%, rgba(15,118,110,.18), transparent 26rem), linear-gradient(100deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.92) 52%, rgba(244,248,250,.84) 100%);
        z-index: 0;
    }

    .page-frame::after {
        content: "";
        position: absolute;
        right: -160px;
        top: -180px;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        background: conic-gradient(from 140deg, rgba(143,0,4,.10), rgba(15,118,110,.24), rgba(255,255,255,.10), rgba(143,0,4,.10));
        filter: blur(2px);
        opacity: .8;
        z-index: 0;
    }

.topbar {
    width: min(1240px, calc(100% - 48px));
    margin: 24px auto 0;
    position: relative;
    z-index: 2;
    min-height: 78px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 14px 18px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.86);
    box-shadow: 0 18px 48px rgba(16, 24, 40, .08);
}

.brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 18px;
}

    .brand img {
        height: 46px;
        display: block;
    }

.topbar-center {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(242, 244, 247, .78);
}

    .topbar-center a {
        text-decoration: none;
        color: #344054;
        font-size: .92rem;
        font-weight: 800;
        padding: 10px 16px;
        border-radius: 999px;
        transition: .2s ease;
    }

        .topbar-center a:hover {
            background: #fff;
            color: var(--silanes-red);
            box-shadow: 0 8px 22px rgba(16, 24, 40, .08);
        }

.topbar-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: #475467;
    font-weight: 800;
    font-size: .9rem;
    box-shadow: 0 10px 28px rgba(16,24,40,.07);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 5px rgba(16,185,129,.14);
}

.hero-shell {
    min-height: 620px;
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(56px, 7vw, 94px) 0 92px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    align-items: center;
    gap: clamp(42px, 7vw, 92px);
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--silanes-red);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

    .eyebrow::before {
        content: "";
        width: 34px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

.hero-copy h1 {
    margin: 0;
    max-width: 760px;
    color: #101828;
    font-size: clamp(3.4rem, 7.6vw, 7.5rem);
    line-height: .88;
    letter-spacing: -.085em;
    text-wrap: balance;
}

.hero-copy p {
    max-width: 670px;
    margin: 28px 0 0;
    color: #475467;
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    line-height: 1.75;
}

.hero-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}

.search-box {
    width: min(500px, 100%);
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 20px;
    color: #667085;
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 18px 40px rgba(16,24,40,.07);
    transition: .22s ease;
}

    .search-box:focus-within {
        border-color: rgba(143,0,4,.26);
        box-shadow: 0 0 0 5px rgba(143,0,4,.08), 0 18px 40px rgba(16,24,40,.08);
    }

    .search-box input {
        width: 100%;
        border: 0;
        outline: 0;
        color: var(--ink);
        background: transparent;
    }

        .search-box input::placeholder {
            color: #98a2b3;
        }

.btn-primary-hero {
    min-height: 62px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 25px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--silanes-red), #6c0003);
    color: #fff;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 18px 38px rgba(143,0,4,.24);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

    .btn-primary-hero:hover {
        transform: translateY(-3px);
        filter: saturate(1.08);
        box-shadow: 0 26px 50px rgba(143,0,4,.30);
    }

.hero-showcase {
    position: relative;
    min-height: 440px;
    display: grid;
    align-content: center;
    gap: 18px;
}

    .hero-showcase::before {
        content: "";
        position: absolute;
        inset: 40px 18px 20px 70px;
        border-radius: 42px;
        background: linear-gradient(135deg, rgba(143,0,4,.08), rgba(15,118,110,.16)), url('/img/fondo-blanco-azul.png') center/cover no-repeat;
        opacity: .78;
        transform: rotate(-2deg);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.60);
    }

.showcase-card {
    position: relative;
    z-index: 2;
    border-radius: 30px;
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.86);
    box-shadow: 0 24px 70px rgba(16,24,40,.12);
}

.main-card {
    width: min(360px, 88%);
    margin-left: auto;
    min-height: 166px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

.showcase-label {
    display: block;
    color: #667085;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
}

.main-card strong {
    display: block;
    margin-top: 8px;
    color: #101828;
    font-size: 5.2rem;
    line-height: .86;
    letter-spacing: -.08em;
}

.main-card i {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), #0b4f4a);
    box-shadow: 0 18px 40px rgba(15,118,110,.23);
}

.access-card {
    width: min(440px, 100%);
    min-height: 132px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
}

    .access-card strong {
        display: block;
        color: #101828;
        font-size: 1.1rem;
    }

    .access-card span {
        display: block;
        margin-top: 5px;
        color: #667085;
        line-height: 1.45;
    }

.access-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--silanes-red), #5f0003);
}

.mini-apps {
    width: min(410px, 94%);
    margin-left: auto;
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.mini-app {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 16px 34px rgba(16,24,40,.07);
    color: #344054;
    font-weight: 850;
}

    .mini-app i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: #fff;
        background: var(--accent, #8f0004);
    }

.content-shell {
    width: min(1240px, calc(100% - 36px));
    margin: 34px auto 0;
    position: relative;
    z-index: 4;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 34px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.92);
    box-shadow: 0 24px 80px rgba(16,24,40,.08);
}

    .section-heading h2 {
        margin: 0;
        color: #101828;
        font-size: clamp(2.3rem, 4.5vw, 4.2rem);
        line-height: .95;
        letter-spacing: -.06em;
    }

    .section-heading p {
        max-width: 440px;
        margin: 0;
        color: var(--muted);
        line-height: 1.7;
    }

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    padding-bottom: 76px;
}

.app-card {
    position: relative;
    overflow: hidden;
    min-height: 324px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: 34px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 20px 54px rgba(16,24,40,.08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .app-card::before {
        content: "";
        position: absolute;
        inset: auto -30% -58% -30%;
        height: 210px;
        background: radial-gradient(circle, var(--accent, #8f0004), transparent 70%);
        opacity: .11;
        transition: .25s ease;
    }

    .app-card:hover {
        transform: translateY(-8px);
        border-color: color-mix(in srgb, var(--accent, #8f0004), transparent 76%);
        box-shadow: 0 34px 78px rgba(16,24,40,.14);
    }

        .app-card:hover::before {
            opacity: .18;
            transform: translateY(-16px);
        }

.app-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.app-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    font-size: 1.75rem;
    background: linear-gradient(135deg, var(--accent, #8f0004), color-mix(in srgb, var(--accent, #8f0004), #000 24%));
    box-shadow: 0 18px 45px color-mix(in srgb, var(--accent, #8f0004), transparent 68%);
}

.app-order {
    color: rgba(16,24,40,.14);
    font-weight: 950;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: -.08em;
}

.app-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #101828;
    font-size: 1.42rem;
    letter-spacing: -.025em;
}

.app-card p {
    position: relative;
    z-index: 1;
    margin: 12px 0 30px;
    color: var(--muted);
    line-height: 1.72;
}

.app-link {
    position: relative;
    z-index: 1;
    margin-top: auto;
    width: fit-content;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent, #8f0004), color-mix(in srgb, var(--accent, #8f0004), #000 24%));
    box-shadow: 0 16px 42px color-mix(in srgb, var(--accent, #8f0004), transparent 72%);
    transition: transform .22s ease, box-shadow .22s ease;
}

    .app-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 52px color-mix(in srgb, var(--accent, #8f0004), transparent 64%);
    }

    .app-link span {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
    }

.azul {
    --accent: #2563eb;
}

.rojo {
    --accent: #9f0006;
}

.amarillo {
    --accent: #d99a00;
}

.verde {
    --accent: #059669;
}

.morado {
    --accent: #7c3aed;
}

.turquesa {
    --accent: #0891b2;
}

.empty-state {
    margin: 26px 0 70px;
    padding: 52px 28px;
    text-align: center;
    border-radius: 34px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.94);
    box-shadow: 0 24px 80px rgba(16,24,40,.08);
}

    .empty-state i {
        font-size: 2.4rem;
        color: var(--silanes-red);
    }

    .empty-state h3 {
        margin: 18px 0 8px;
    }

    .empty-state p {
        margin: 0;
        color: var(--muted);
    }

@media (max-width: 1040px) {
    .topbar {
        grid-template-columns: 1fr auto;
    }

    .topbar-center {
        display: none;
    }

    .hero-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-showcase {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .main-card,
    .access-card,
    .mini-apps {
        width: 100%;
        margin-left: 0;
    }

    .hero-showcase::before {
        inset: 10px;
    }
}

@media (max-width: 680px) {
    .page-frame,
    .content-shell {
        width: min(100% - 20px, 1440px);
    }

    .topbar {
        width: calc(100% - 28px);
        min-height: 66px;
    }

    .brand img {
        height: 38px;
    }

    .topbar-actions {
        display: none;
    }

    .hero-shell {
        width: calc(100% - 28px);
        padding-top: 44px;
    }

    .hero-copy h1 {
        letter-spacing: -.06em;
    }

    .hero-tools,
    .search-box,
    .btn-primary-hero {
        width: 100%;
    }

    .btn-primary-hero {
        justify-content: center;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

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


/* ===== Ajustes solicitados: topbar limpia,
KPIs internos/externos y cards clicables ===== */

.topbar {
    grid-template-columns: 1fr;
    width: min(1240px, calc(100% - 48px));
    min-height: 74px;
    justify-items: start;
}

.topbar-center,
.topbar-actions {
    display: none !important;
}

.brand {
    background: rgba(255,255,255,.72);
    box-shadow: 0 10px 25px rgba(16,24,40,.06);
}

.hero-copy .eyebrow {
    display: none;
}

.hero-showcase {
    gap: 18px;
}

.kpi-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: min(430px, 100%);
    margin-left: auto;
}

.kpi-card {
    padding: 26px;
    min-height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

    .kpi-card::after {
        content: "";
        position: absolute;
        right: -36px;
        top: -36px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(143,0,4,.12);
    }

    .kpi-card.teal::after {
        background: rgba(15,118,110,.16);
    }

    .kpi-card strong {
        display: block;
        font-size: clamp(3rem, 5vw, 4.6rem);
        line-height: .85;
        letter-spacing: -.08em;
        color: #101828;
    }

    .kpi-card small {
        color: #667085;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

.access-card .access-icon {
    background: linear-gradient(135deg, #860001, #0f766e);
}

.access-card {
    width: min(470px, 100%);
    margin-left: auto;
}

.app-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

    .app-card:hover h3 {
        color: var(--silanes-red);
    }

.app-link {
    display: none !important;
}

.section-heading {
    align-items: center;
}

    .section-heading > p {
        display: none;
    }

@media (max-width: 980px) {
    .kpi-grid {
        margin-left: 0;
        width: 100%;
    }

    .access-card {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Refinamiento visual v2 ===== */

.page-frame {
    width: min(1220px, calc(100% - 44px));
    margin-top: 22px;
    border-radius: 38px;
}

.hero-logo {
    position: relative;
    z-index: 4;
    width: fit-content;
    margin: 28px 0 0 44px;
}

    .hero-logo img {
        height: 44px;
        width: auto;
        display: block;
        object-fit: contain;
        background: transparent;
        filter: drop-shadow(0 10px 18px rgba(16,24,40,.10));
    }

.topbar {
    display: none !important;
}

.hero-shell {
    width: min(1060px, calc(100% - 64px));
    min-height: 560px;
    padding-top: 48px;
    padding-bottom: 76px;
    grid-template-columns: minmax(0, 1.07fr) minmax(330px, .83fr);
}

.hero-copy h1 {
    max-width: 640px;
    font-size: clamp(3.2rem, 6.4vw, 6.25rem);
}

.hero-copy p {
    max-width: 600px;
}

.hero-showcase::before {
    inset: 44px 8px 34px 56px;
    opacity: .50;
}

.kpi-grid {
    width: min(390px, 100%);
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 18px;
}

.kpi-card {
    min-height: 170px;
    border-radius: 32px;
    padding: 28px;
}

    .kpi-card:first-child {
        transform: translateY(-18px);
        background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(255,245,246,.86));
        border-color: rgba(143,0,4,.18);
        box-shadow: 0 28px 70px rgba(143,0,4,.13);
    }

    .kpi-card.teal {
        transform: translateY(28px);
        background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(235,250,248,.88));
        border-color: rgba(15,118,110,.18);
    }

    .kpi-card:first-child strong {
        color: var(--silanes-red);
    }

    .kpi-card .showcase-label {
        font-size: .70rem;
        letter-spacing: .13em;
    }

    .kpi-card small {
        font-size: .68rem;
        line-height: 1.25;
    }

.access-card {
    display: none !important;
}

.mini-apps {
    width: min(380px, 100%);
    margin-left: auto;
    margin-top: 34px;
}

.content-shell {
    width: min(1220px, calc(100% - 44px));
}

.section-heading {
    width: 100%;
    min-height: 138px;
    padding: 44px 54px;
    margin-bottom: 24px;
    border-radius: 34px;
}

    .section-heading h2 {
        font-size: clamp(2.3rem, 4vw, 4.1rem);
    }

.app-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 22px;
}

.app-card {
    min-height: 275px;
    border-radius: 28px;
    padding: 28px;
}

@media(max-width:980px) {
    .hero-logo {
        margin-left: 28px;
    }

    .hero-shell {
        width: min(100% - 48px, 760px);
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        margin-left: 0;
    }

    .kpi-card,
    .kpi-card:first-child,
    .kpi-card.teal {
        transform: none;
    }

    .mini-apps {
        margin-left: 0;
    }
}

@media(max-width:640px) {
    .page-frame,
    .content-shell {
        width: min(100% - 24px, 1220px);
    }

    .hero-shell {
        width: min(100% - 36px, 760px);
    }

    .hero-logo img {
        height: 36px;
    }

    .section-heading {
        padding: 32px 26px;
    }
}


/* ===== Ultra refinement ===== */

.page-frame {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,248,250,.92));
}

    .page-frame::before {
        background: radial-gradient(circle at 15% 20%, rgba(143,0,4,.08), transparent 22rem), radial-gradient(circle at 86% 18%, rgba(15,118,110,.10), transparent 24rem), url('/img/fondo-blanco-azul.png') right top / 640px no-repeat, linear-gradient(100deg, rgba(255,255,255,.96), rgba(250,250,251,.94));
        opacity: .92;
    }

    .page-frame::after {
        opacity: .24;
        filter: blur(12px);
    }

.hero-shell {
    min-height: 620px;
}

.hero-copy h1 {
    max-width: 720px;
    line-height: .92;
    letter-spacing: -.09em;
}

.hero-copy p {
    font-size: 1.12rem;
    max-width: 540px;
}

.kpi-grid {
    width: min(420px,100%);
    gap: 22px;
}

.kpi-card {
    min-height: 190px;
    border-radius: 34px;
    overflow: hidden;
    position: relative;
}

    .kpi-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/img/fondo-blanco-azul.png') center/cover no-repeat;
        opacity: .10;
        mix-blend-mode: multiply;
    }

    .kpi-card:first-child {
        transform: translateY(-28px) rotate(-2deg);
    }

    .kpi-card.teal {
        transform: translateY(34px) rotate(2deg);
    }

    .kpi-card strong {
        position: relative;
        z-index: 2;
        font-size: clamp(4rem, 6vw, 5.5rem);
    }

    .kpi-card small {
        position: relative;
        z-index: 2;
        font-size: .78rem;
        letter-spacing: .14em;
    }

.hero-showcase::before {
    opacity: .34;
    background: linear-gradient(135deg, rgba(143,0,4,.08), rgba(15,118,110,.10)), url('/img/fondo-blanco-azul.png') center/cover no-repeat;
}

.mini-apps {
    display: none !important;
}

.section-heading {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,250,251,.94));
    min-height: 150px;
    display: flex;
    align-items: center;
}

    .section-heading h2 {
        font-size: clamp(2.8rem, 4vw, 4.4rem);
        letter-spacing: -.06em;
    }

.app-grid {
    gap: 26px;
}

.app-card {
    min-height: 300px;
    border: 1px solid rgba(255,255,255,.88);
    box-shadow: 0 18px 44px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.70);
}

    .app-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 34px 70px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.70);
    }

.app-icon {
    box-shadow: 0 16px 28px rgba(37,99,235,.16);
}

.app-card.rojo .app-icon {
    box-shadow: 0 16px 28px rgba(143,0,4,.18);
}

@media(max-width:980px) {

    .kpi-card:first-child,
    .kpi-card.teal {
        transform: none;
    }
}




/* HERO: elimina la sensación de imagen cortada */
.page-frame {
    overflow: hidden;
    isolation: isolate;
}

    .page-frame::before {
        background: radial-gradient(circle at 12% 18%, rgba(143,0,4,.10), transparent 21rem), radial-gradient(circle at 85% 16%, rgba(15,118,110,.12), transparent 26rem), linear-gradient(110deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 48%, rgba(241,249,248,.94) 100%);
        opacity: 1;
    }

    .page-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        right: auto;
        top: auto;
        width: auto;
        height: auto;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 46%, rgba(255,255,255,.94) 86%), url('/img/fondo-blanco-azul.png') right top / 62% auto no-repeat;
        opacity: .42;
        filter: none;
        z-index: 0;
        pointer-events: none;
    }

.hero-shell {
    position: relative;
    z-index: 2;
}

.hero-showcase::before {
    background: radial-gradient(circle at 68% 18%, rgba(143,0,4,.16), transparent 14rem), radial-gradient(circle at 78% 60%, rgba(15,118,110,.16), transparent 16rem);
    opacity: .70;
    box-shadow: none;
}

/* KPIs más limpios y sin sensación de recorte */
.kpi-card {
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

    .kpi-card::before {
        background: url('/img/fondo-blanco-azul.png') top right / 240px auto no-repeat;
        opacity: .11;
        mix-blend-mode: multiply;
    }

    .kpi-card:first-child::after {
        background: rgba(143,0,4,.10);
    }

    .kpi-card.teal::after {
        background: rgba(15,118,110,.14);
    }


.app-grid {
    align-items: stretch;
}

.app-card {
    height: 100%;
    display: flex !important;
    flex-direction: column;
}

    .app-card h3 {
        min-height: 46px;
    }

    .app-card p {
        flex: 1;
    }

/* Responsive móvil */
@media(max-width: 980px) {
    .page-frame::after {
        background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.96) 70%), url('/img/fondo-blanco-azul.png') top right / 520px auto no-repeat;
        opacity: .28;
    }

    .hero-logo {
        margin: 26px 0 0 28px;
    }

        .hero-logo img {
            height: 42px;
            padding: 6px 10px;
            border-radius: 14px;
            background: rgba(255,255,255,.86);
            box-shadow: 0 12px 30px rgba(16,24,40,.08);
        }

    .hero-copy h1 {
        max-width: 100%;
    }

    .kpi-card:first-child,
    .kpi-card.teal {
        transform: none !important;
    }

    .kpi-grid {
        margin-top: 20px;
    }

    .app-card h3 {
        min-height: auto;
    }
}

@media(max-width: 640px) {
    body {
        background: #f3f6fa;
    }

    .page-frame {
        width: min(100% - 20px, 1220px);
        margin-top: 10px;
        border-radius: 28px;
    }

        .page-frame::after {
            background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.96) 76%), url('/img/fondo-blanco-azul.png') top right / 430px auto no-repeat;
            opacity: .25;
        }

    .hero-logo {
        margin: 22px 0 0 22px;
    }

        .hero-logo img {
            height: 38px;
            background: rgba(255,255,255,.92);
        }

    .hero-shell {
        width: calc(100% - 40px);
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 54px;
        gap: 34px;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 14vw, 4.6rem);
        letter-spacing: -.08em;
    }

    .hero-copy p {
        font-size: 1rem;
        line-height: 1.65;
    }

    .hero-tools {
        gap: 12px;
    }

    .search-box,
    .btn-primary-hero {
        width: 100%;
        min-height: 58px;
    }

    .btn-primary-hero {
        justify-content: center;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .kpi-card {
        min-height: 142px;
        padding: 22px;
        border-radius: 26px;
    }

        .kpi-card strong {
            font-size: 3.4rem;
        }

        .kpi-card small {
            font-size: .62rem;
        }

    .content-shell {
        width: min(100% - 20px, 1220px);
    }

    .section-heading {
        min-height: 116px;
        border-radius: 28px;
    }

        .section-heading h2 {
            font-size: 2.55rem;
        }

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

    .app-card {
        min-height: 255px;
    }
}




.page-frame {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(246,249,250,.94));
}

    .page-frame::before {
        background: linear-gradient(110deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 52%, rgba(239,248,247,.92) 100%);
    }

    .page-frame::after {
        display: none !important;
    }

/* franja superior Silanes */
.hero-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 116px;
    width: auto;
    margin: 0;
    padding: 26px 42px;
    display: flex;
    align-items: flex-start;
    border-radius: 38px 38px 0 0;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(134,0,1,.96) 0%, rgba(175,12,18,.88) 48%, rgba(15,118,110,.72) 100%), url('/img/fondo-blanco-azul.png') right top / 560px auto no-repeat;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.28);
}

    .hero-logo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 78% 12%, rgba(255,255,255,.22), transparent 16rem), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
        pointer-events: none;
    }

    .hero-logo img {
        position: relative;
        z-index: 2;
        height: 52px;
        width: auto;
        object-fit: contain;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        filter: drop-shadow(0 12px 20px rgba(0,0,0,.22));
    }

/* empujar hero por la franja */
.hero-shell {
    padding-top: 168px !important;
    min-height: 600px;
}

.hero-copy h1 {
    font-size: clamp(3.15rem, 6vw, 5.9rem);
}

.hero-showcase {
    transform: translateY(18px);
}

.kpi-card:first-child {
    transform: translateY(-14px) rotate(-1.4deg);
}

.kpi-card.teal {
    transform: translateY(26px) rotate(1.4deg);
}

/* quitar sensación plana del lado derecho */
.hero-showcase::before {
    background: radial-gradient(circle at 70% 18%, rgba(134,0,1,.18), transparent 12rem), radial-gradient(circle at 82% 64%, rgba(15,118,110,.20), transparent 15rem), url('/img/fondo-blanco-azul.png') top right / 390px auto no-repeat;
    opacity: .36;
}

/* sección más compacta */
.section-heading {
    min-height: 116px !important;
    padding: 32px 44px !important;
    border-radius: 30px;
}

    .section-heading h2 {
        font-size: clamp(2.25rem, 3.4vw, 3.45rem) !important;
    }

/* cards menos largas */
.app-grid {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 20px;
}

.app-card {
    min-height: 230px !important;
    padding: 24px !important;
    border-radius: 26px;
}

.app-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    font-size: 20px !important;
}

.app-order {
    font-size: 30px !important;
}

.app-card h3 {
    margin-top: 22px !important;
    margin-bottom: 10px !important;
    min-height: 38px !important;
    font-size: 1.08rem !important;
}

.app-card p {
    font-size: .84rem !important;
    line-height: 1.55 !important;
}

@media(max-width:980px) {
    .hero-logo {
        height: 100px;
        padding: 24px 30px;
        border-radius: 30px 30px 0 0;
        background: linear-gradient(90deg, rgba(134,0,1,.97), rgba(165,16,22,.86), rgba(15,118,110,.66)), url('/img/fondo-blanco-azul.png') right top / 460px auto no-repeat;
    }

        .hero-logo img {
            height: 46px !important;
        }

    .hero-shell {
        padding-top: 138px !important;
    }

    .kpi-card:first-child,
    .kpi-card.teal {
        transform: none !important;
    }

    .hero-showcase {
        transform: none;
    }
}

@media(max-width:640px) {
    .page-frame {
        border-radius: 24px;
    }

    .hero-logo {
        height: 92px;
        padding: 22px 24px;
        border-radius: 24px 24px 0 0;
        background: linear-gradient(90deg, rgba(134,0,1,.98), rgba(150,14,20,.88), rgba(15,118,110,.58)), url('/img/fondo-blanco-azul.png') right top / 360px auto no-repeat;
    }

        .hero-logo img {
            height: 42px !important;
            filter: drop-shadow(0 10px 18px rgba(0,0,0,.26));
        }

    .hero-shell {
        padding-top: 126px !important;
        padding-bottom: 42px !important;
    }

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

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

    .app-card {
        min-height: 220px !important;
    }

    .section-heading {
        min-height: 98px !important;
        padding: 26px 24px !important;
    }

        .section-heading h2 {
            font-size: 2.2rem !important;
        }
}


/* =========================================================
   Rediseño App Store / iTunes con ADN Silanes
   ========================================================= */

body {
    background: radial-gradient(circle at 18% 8%, rgba(134,0,1,.06), transparent 24rem), radial-gradient(circle at 86% 16%, rgba(15,118,110,.08), transparent 28rem), #eef3f8;
}

/* HERO GRANDE Y MÁS PREMIUM */
.page-frame {
    width: min(1280px, calc(100% - 48px));
    margin: 22px auto 0;
    border-radius: 42px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 48%, rgba(230,246,244,.82) 100%);
    box-shadow: 0 34px 100px rgba(16,24,40,.12);
    border: 1px solid rgba(255,255,255,.92);
    isolation: isolate;
}

    .page-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 42%, rgba(255,255,255,.45) 66%, rgba(255,255,255,.20) 100%), url('/img/fondo-rojo.png') right top / 58% auto no-repeat, url('/img/fondo-rojo-panal.png') right center / 62% auto no-repeat;
        opacity: .92;
        z-index: 0;
    }

    .page-frame::after {
        content: "";
        position: absolute;
        right: -160px;
        top: -180px;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(15,118,110,.32), transparent 60%);
        z-index: 0;
        pointer-events: none;
    }

.hero-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    z-index: 5;
    height: auto;
    width: auto;
    margin: 0;
    padding: 34px 46px;
    display: flex;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
}

    .hero-logo::before {
        content: "";
        position: absolute;
        left: 28px;
        top: 24px;
        width: 180px;
        height: 72px;
        border-radius: 26px;
        background: linear-gradient(135deg, rgba(134,0,1,.96), rgba(191,24,31,.86));
        box-shadow: 0 18px 46px rgba(134,0,1,.22), inset 0 1px 0 rgba(255,255,255,.24);
        z-index: 0;
    }

    .hero-logo img {
        position: relative;
        z-index: 1;
        height: 46px !important;
        width: auto;
        background: transparent !important;
        filter: drop-shadow(0 10px 18px rgba(0,0,0,.26)) !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

.hero-shell {
    width: min(1120px, calc(100% - 76px));
    min-height: 650px;
    margin: 0 auto;
    padding: 150px 0 92px !important;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(360px,.82fr);
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-kicker {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(134,0,1,.08);
    color: #860001;
    font-weight: 950;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 720px;
    margin: 0;
    color: #101828;
    font-size: clamp(3.8rem, 7vw, 7.2rem);
    line-height: .86;
    letter-spacing: -.09em;
}

.hero-copy p {
    max-width: 590px;
    margin: 28px 0 0;
    color: #475467;
    font-size: 1.12rem;
    line-height: 1.72;
}

.hero-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.search-box {
    width: min(500px,100%);
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(16,24,40,.07);
    box-shadow: 0 18px 40px rgba(16,24,40,.08);
}

    .search-box input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
    }

.btn-primary-hero {
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    border: none;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg,#860001,#b01720);
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 18px 38px rgba(134,0,1,.25);
    transition: .22s ease;
}

    .btn-primary-hero:hover {
        transform: translateY(-3px);
        box-shadow: 0 28px 54px rgba(134,0,1,.30);
    }

.hero-showcase {
    min-height: 420px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hero-showcase::before {
        content: "";
        position: absolute;
        inset: 20px -16px 14px 24px;
        border-radius: 44px;
        background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.10)), url('/img/fondo-blanco-azul.png') center / cover no-repeat;
        opacity: .55;
        transform: rotate(-3deg);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
    }

.kpi-orbit {
    position: relative;
    width: 420px;
    height: 310px;
    z-index: 2;
}

.kpi-card {
    position: absolute;
    border-radius: 34px;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(255,255,255,.84);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 28px 70px rgba(16,24,40,.14);
    overflow: hidden;
}

    .kpi-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/img/fondo-blanco-azul.png') top right / 280px auto no-repeat;
        opacity: .14;
    }

.kpi-main {
    left: 0;
    top: 8px;
    width: 220px;
    height: 188px;
    padding: 30px;
    transform: rotate(-3deg);
}

.kpi-card.teal {
    right: 10px;
    bottom: 4px;
    width: 210px;
    height: 176px;
    padding: 28px;
    transform: rotate(3deg);
}

.kpi-card strong {
    position: relative;
    z-index: 2;
    display: block;
    color: #101828;
    font-size: 5.4rem;
    line-height: .82;
    letter-spacing: -.08em;
}

.kpi-main strong {
    color: #860001;
}

.kpi-card small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 18px;
    color: #344054;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.25;
}

/* CONTENIDO Y CARRUSEL */
.content-shell {
    width: min(1280px, calc(100% - 48px));
    margin: 24px auto 0;
}

.section-heading {
    width: 100%;
    min-height: 150px;
    margin-bottom: 22px;
    padding: 38px 44px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.90));
    border: 1px solid rgba(255,255,255,.88);
    box-shadow: 0 24px 70px rgba(16,24,40,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.section-label {
    display: block;
    margin-bottom: 8px;
    color: #860001;
    font-size: .73rem;
    font-weight: 950;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(2.6rem,4.4vw,4.6rem);
    line-height: .92;
    letter-spacing: -.07em;
}

.carousel-actions {
    display: flex;
    gap: 10px;
}

    .carousel-actions button {
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 16px;
        background: #fff;
        color: #101828;
        box-shadow: 0 14px 34px rgba(16,24,40,.08);
        cursor: pointer;
        transition: .2s ease;
    }

        .carousel-actions button:hover {
            transform: translateY(-2px);
            background: #860001;
            color: #fff;
        }

.app-grid {
    display: none !important;
}

.app-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px 4px 36px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
}

    .app-carousel::-webkit-scrollbar {
        height: 12px;
    }

    .app-carousel::-webkit-scrollbar-track {
        background: rgba(255,255,255,.55);
        border-radius: 999px;
    }

    .app-carousel::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg,#860001,#0f766e);
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,.72);
    }

.app-card {
    flex: 0 0 clamp(280px, 28vw, 360px);
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 30px !important;
    border-radius: 34px;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
    border: 1px solid rgba(255,255,255,.90);
    box-shadow: 0 22px 54px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.72);
    scroll-snap-align: start;
    transition: transform .24s ease, box-shadow .24s ease;
}

    .app-card:hover {
        transform: translateY(-12px) scale(1.015);
        box-shadow: 0 38px 80px rgba(16,24,40,.15), inset 0 1px 0 rgba(255,255,255,.72);
    }

.app-card-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 12%, rgba(37,99,235,.16), transparent 13rem), url('/img/fondo-blanco.png') right top / 360px auto no-repeat;
    opacity: .42;
    pointer-events: none;
}

.app-card.rojo .app-card-bg {
    background: radial-gradient(circle at 14% 10%, rgba(134,0,1,.18), transparent 13rem), url('/img/fondo-rojo-small.png') right top / 360px auto no-repeat;
    opacity: .32;
}

.app-card.amarillo .app-card-bg {
    background: radial-gradient(circle at 14% 10%, rgba(212,160,23,.18), transparent 13rem), url('/img/fondo-blanco.png') right top / 360px auto no-repeat;
    opacity: .34;
}

.app-card-header,
.app-card-body {
    position: relative;
    z-index: 2;
}

.app-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.app-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 24px !important;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 26px !important;
    box-shadow: 0 18px 36px rgba(37,99,235,.22);
}

.app-card.rojo .app-icon {
    box-shadow: 0 18px 36px rgba(134,0,1,.22);
}

.app-order {
    color: rgba(16,24,40,.10);
    font-size: 44px !important;
    font-weight: 950;
    line-height: 1;
}

.app-card-body {
    padding-top: 32px;
}

.app-card h3 {
    min-height: 58px !important;
    margin: 0 0 14px !important;
    color: #101828;
    font-size: 1.45rem !important;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.app-card p {
    flex: 1;
    margin: 0;
    color: #667085;
    font-size: .94rem !important;
    line-height: 1.62 !important;
}

/* BUSCADOR */
.d-none {
    display: none !important;
}

/* RESPONSIVE */
@media(max-width:980px) {
    .page-frame,
    .content-shell,

    .hero-logo {
        padding: 28px 32px;
    }

        .hero-logo::before {
            left: 18px;
            top: 18px;
            width: 165px;
            height: 66px;
        }

    .hero-shell {
        width: calc(100% - 56px);
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 132px !important;
        padding-bottom: 62px !important;
    }

    .hero-copy h1 {
        font-size: clamp(3.2rem, 10vw, 5.2rem);
    }

    .hero-showcase {
        min-height: 260px;
    }

    .kpi-orbit {
        width: 100%;
        height: 220px;
    }

    .kpi-main {
        left: 0;
        top: 0;
    }

    .kpi-card.teal {
        right: 0;
        bottom: 0;
    }
}

@media(max-width:640px) {
    .page-frame,
    .content-shell {
        width: min(100% - 18px, 1280px);
    }

    .page-frame {
        border-radius: 28px;
    }

        .page-frame::before {
            background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.98) 56%), url('/img/fondo-rojo.png') right top / 660px auto no-repeat;
            opacity: 1;
        }

    .hero-logo {
        padding: 24px 24px;
    }

        .hero-logo::before {
            left: 14px;
            top: 14px;
            width: 148px;
            height: 60px;
            border-radius: 22px;
        }

        .hero-logo img {
            height: 40px !important;
        }

    .hero-shell {
        width: calc(100% - 36px);
        padding-top: 112px !important;
        padding-bottom: 46px !important;
    }

    .hero-kicker {
        font-size: .66rem;
    }

    .hero-copy h1 {
        font-size: clamp(2.85rem, 14vw, 4.4rem);
        letter-spacing: -.08em;
    }

    .hero-copy p {
        font-size: .98rem;
        line-height: 1.62;
    }

    .search-box,
    .btn-primary-hero {
        width: 100%;
        min-height: 58px;
    }

    .btn-primary-hero {
        justify-content: center;
    }

    .hero-showcase {
        min-height: 260px;
    }

    .kpi-orbit {
        height: 210px;
    }

    .kpi-main,
    .kpi-card.teal {
        width: 48%;
        height: 155px;
        padding: 22px;
        transform: none;
    }

    .kpi-card strong {
        font-size: 4rem;
    }

    .kpi-card small {
        font-size: .62rem;
    }

    .section-heading {
        min-height: 128px;
        border-radius: 28px;
        padding: 28px 24px;
        align-items: flex-start;
        flex-direction: column;
    }

        .section-heading h2 {
            font-size: 2.45rem;
        }

    .carousel-actions {
        display: none;
    }

    .app-carousel {
        gap: 16px;
        padding-bottom: 26px;
    }

    .app-card {
        flex-basis: 82vw;
        min-height: 345px !important;
        padding: 26px !important;
        border-radius: 30px;
    }

    .app-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .app-card h3 {
        min-height: auto !important;
    }
}




/* Logo superior: sin caja rara,
centrado visualmente */
.hero-logo {
    position: absolute !important;
    top: 28px !important;
    left: 42px !important;
    right: auto !important;
    z-index: 10 !important;
    width: 162px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(134,0,1,.98), rgba(184,18,27,.92)) !important;
    box-shadow: 0 18px 44px rgba(134,0,1,.22), inset 0 1px 0 rgba(255,255,255,.24) !important;
    overflow: hidden !important;
}

    .hero-logo::before {
        display: none !important;
    }

    .hero-logo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.26), transparent 34%), url('/img/fondo-rojo-panal.png') right center / 260px auto no-repeat !important;
        opacity: .42 !important;
        z-index: 0 !important;
    }

    .hero-logo img {
        position: relative !important;
        z-index: 2 !important;
        height: 42px !important;
        max-width: 124px !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)) !important;
    }

/* Hero un poco más balanceado con el nuevo logo */
.hero-shell {
    padding-top: 140px !important;
}

/* Carrusel tipo iTunes / Cover Flow */
.app-carousel.coverflow {
    min-height: 430px;
    perspective: 1200px;
    align-items: center;
    gap: 0;
    padding: 24px 48px 44px;
    scroll-padding-left: 48px;
    overflow-x: auto;
    overflow-y: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

    .app-carousel.coverflow::-webkit-scrollbar {
        height: 10px;
    }

    .app-carousel.coverflow::-webkit-scrollbar-track {
        background: rgba(16,24,40,.06);
        border-radius: 999px;
        margin-inline: 44px;
    }

    .app-carousel.coverflow::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg,#860001,#0f766e);
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.72);
    }

.cover-card {
    flex: 0 0 310px !important;
    min-height: 350px !important;
    margin-right: -46px;
    transform: translateZ(-90px) rotateY(-18deg) scale(.88);
    transform-origin: center center;
    opacity: .72;
    filter: saturate(.86) brightness(.96);
    transition: transform .32s ease, opacity .32s ease, filter .32s ease, box-shadow .32s ease;
    z-index: 1;
}

    .cover-card:nth-child(2n) {
        transform: translateZ(-70px) rotateY(-10deg) scale(.91);
    }

    .cover-card:nth-child(3n) {
        transform: translateZ(-100px) rotateY(14deg) scale(.87);
    }

    .cover-card.is-active,
    .cover-card:hover,
    .cover-card:focus-visible {
        transform: translateZ(90px) rotateY(0deg) scale(1.06) !important;
        opacity: 1;
        filter: saturate(1.08) brightness(1);
        z-index: 20;
        box-shadow: 0 42px 90px rgba(16,24,40,.20), 0 0 0 1px rgba(255,255,255,.84) inset !important;
    }

        .cover-card:hover + .cover-card {
            transform: translateZ(-40px) rotateY(12deg) scale(.94);
            opacity: .86;
        }

    .cover-card .app-card-bg {
        background: linear-gradient(180deg, rgba(134,0,1,.18) 0%, rgba(134,0,1,0) 34%), url('/img/fondo-blanco-azul.png') right top / 420px auto no-repeat !important;
        opacity: .52 !important;
    }

    .cover-card.rojo .app-card-bg {
        background: linear-gradient(180deg, rgba(134,0,1,.28) 0%, rgba(134,0,1,0) 36%), url('/img/fondo-rojo-panal.png') right top / 420px auto no-repeat !important;
        opacity: .42 !important;
    }

    .cover-card::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: -20px;
        height: 34px;
        border-radius: 50%;
        background: rgba(16,24,40,.20);
        filter: blur(18px);
        z-index: -1;
    }

    .cover-card .app-icon {
        width: 78px !important;
        height: 78px !important;
        border-radius: 26px !important;
    }

    .cover-card h3 {
        font-size: 1.55rem !important;
    }

/* Mejor comportamiento responsive */
@media(max-width:980px) {
    .hero-logo {
        top: 22px !important;
        left: 28px !important;
        width: 150px !important;
        height: 60px !important;
    }

        .hero-logo img {
            height: 38px !important;
        }

    .app-carousel.coverflow {
        padding-inline: 28px;
        scroll-padding-left: 28px;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .cover-card,
    .cover-card:nth-child(2n),
    .cover-card:nth-child(3n) {
        flex-basis: 300px !important;
        margin-right: 18px !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

        .cover-card.is-active,
        .cover-card:hover,
        .cover-card:focus-visible {
            transform: translateY(-8px) scale(1.015) !important;
        }
}

@media(max-width:640px) {
    .hero-logo {
        top: 18px !important;
        left: 18px !important;
        width: 138px !important;
        height: 56px !important;
        border-radius: 20px !important;
    }

        .hero-logo img {
            height: 35px !important;
            max-width: 106px !important;
        }

    .app-carousel.coverflow {
        min-height: 390px;
        padding: 14px 14px 30px;
        scroll-padding-left: 14px;
    }

    .cover-card,
    .cover-card:nth-child(2n),
    .cover-card:nth-child(3n) {
        flex-basis: 82vw !important;
        min-height: 340px !important;
        margin-right: 16px !important;
    }
}




.app-carousel.coverflow {
    position: relative;
    min-height: 430px;
    perspective: 1500px;
    perspective-origin: center center;
    display: flex;
    align-items: center;
    gap: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 34px max(80px, calc((100% - 360px) / 2)) 56px !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.cover-card {
    flex: 0 0 360px !important;
    min-height: 360px !important;
    margin: 0 -88px !important;
    transform-origin: center center;
    scroll-snap-align: center;
    opacity: 0;
    pointer-events: none;
    filter: blur(1px) saturate(.76) brightness(.92);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .45s ease, box-shadow .45s ease;
}

    .cover-card.is-active {
        opacity: 1;
        pointer-events: auto;
        z-index: 30;
        transform: translateX(0) translateZ(140px) rotateY(0deg) scale(1.08) !important;
        filter: none;
        box-shadow: 0 46px 96px rgba(16,24,40,.24), inset 0 1px 0 rgba(255,255,255,.8) !important;
    }

    .cover-card.is-left {
        opacity: .82;
        pointer-events: auto;
        z-index: 18;
        transform: translateX(-46px) translateZ(-40px) rotateY(38deg) scale(.88) !important;
    }

    .cover-card.is-right {
        opacity: .82;
        pointer-events: auto;
        z-index: 18;
        transform: translateX(46px) translateZ(-40px) rotateY(-38deg) scale(.88) !important;
    }

    .cover-card.is-far-left {
        opacity: .34;
        pointer-events: auto;
        z-index: 5;
        transform: translateX(-90px) translateZ(-180px) rotateY(58deg) scale(.74) !important;
    }

    .cover-card.is-far-right {
        opacity: .34;
        pointer-events: auto;
        z-index: 5;
        transform: translateX(90px) translateZ(-180px) rotateY(-58deg) scale(.74) !important;
    }

    .cover-card.d-none {
        display: none !important;
    }

    .cover-card::before {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -34px;
        height: 42px;
        border-radius: 50%;
        background: rgba(16,24,40,.24);
        filter: blur(20px);
        transform: scaleX(.86);
        z-index: -1;
    }

    .cover-card.is-active::before {
        background: rgba(16,24,40,.30);
    }

/* flechas más notorias */
.carousel-actions button {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    color: #101828 !important;
    border: 1px solid rgba(16,24,40,.06) !important;
    box-shadow: 0 16px 38px rgba(16,24,40,.12) !important;
}

    .carousel-actions button:hover {
        background: #860001 !important;
        color: #fff !important;
    }

/* Mobile: cover flow se convierte en swipe limpio */
@media(max-width:980px) {
    .app-carousel.coverflow {
        min-height: 390px;
        padding: 20px 28px 42px !important;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .cover-card,
    .cover-card.is-active,
    .cover-card.is-left,
    .cover-card.is-right,
    .cover-card.is-far-left,
    .cover-card.is-far-right {
        flex: 0 0 310px !important;
        margin: 0 18px 0 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        transform: none !important;
    }

        .cover-card.is-active {
            transform: translateY(-8px) scale(1.015) !important;
        }
}

@media(max-width:640px) {
    .app-carousel.coverflow {
        min-height: 370px;
        padding: 14px 14px 34px !important;
    }

    .cover-card,
    .cover-card.is-active,
    .cover-card.is-left,
    .cover-card.is-right,
    .cover-card.is-far-left,
    .cover-card.is-far-right {
        flex-basis: 82vw !important;
        min-height: 340px !important;
    }
}




/* Cards sin icono FontAwesome */
.app-icon {
    display: none !important;
}

.cover-card .app-card-header {
    min-height: 48px;
}

.cover-card .app-order {
    margin-left: auto;
    font-size: 52px !important;
    color: rgba(16,24,40,.11) !important;
}

/* Botones de vista */
.carousel-actions {
    display: none !important;
}

.view-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .view-actions > button {
        height: 46px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: #344054;
        font-weight: 950;
        box-shadow: 0 14px 34px rgba(16,24,40,.08);
        cursor: pointer;
        transition: .2s ease;
    }

        .view-actions > button.active {
            background: #101828;
            color: #fff;
        }

        .view-actions > button:hover {
            transform: translateY(-2px);
        }

.cover-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

    .cover-arrows button {
        width: 46px !important;
        height: 46px !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.96) !important;
        color: #101828 !important;
        box-shadow: 0 14px 34px rgba(16,24,40,.10) !important;
        cursor: pointer;
    }

        .cover-arrows button:hover {
            background: #860001 !important;
            color: #fff !important;
        }

/* Vista Ver todo */
.app-carousel.view-all {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    gap: 22px !important;
    overflow: visible !important;
    padding: 10px 0 28px !important;
    perspective: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

    .app-carousel.view-all .cover-card,
    .app-carousel.view-all .cover-card.is-active,
    .app-carousel.view-all .cover-card.is-left,
    .app-carousel.view-all .cover-card.is-right,
    .app-carousel.view-all .cover-card.is-far-left,
    .app-carousel.view-all .cover-card.is-far-right {
        flex: auto !important;
        min-height: 265px !important;
        margin: 0 !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
    }

        .app-carousel.view-all .cover-card:hover {
            transform: translateY(-8px) !important;
        }

    .app-carousel.view-all .app-card-body {
        padding-top: 18px !important;
    }

    .app-carousel.view-all .app-card h3 {
        font-size: 1.16rem !important;
        min-height: 42px !important;
    }

    .app-carousel.view-all .app-card p {
        font-size: .84rem !important;
    }

/* Ajustes mobile */
@media(max-width:980px) {
    .view-actions {
        width: 100%;
    }

    .cover-arrows {
        margin-left: auto;
    }

    .app-carousel.view-all {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
}

@media(max-width:640px) {
    .section-heading {
        gap: 18px;
    }

    .view-actions {
        gap: 8px;
    }

        .view-actions > button {
            height: 42px;
            padding: 0 14px;
            font-size: .84rem;
        }

    .cover-arrows {
        display: none;
    }

    .app-carousel.view-all {
        grid-template-columns: 1fr !important;
    }
}




/* hide old order numbers */
.app-order {
    display: none !important;
}

/* Card header without number/icon */
.cover-card .app-card-header {
    min-height: 44px !important;
}

/* Type-based styles:
   TipoApp 1 = internal -> "non" style
   TipoApp 2 = external -> "par" style

    Imagenes de Cards
*/
.cover-card.tipo-1 .app-card-bg,
.app-carousel.view-all .cover-card.tipo-1 .app-card-bg {
    background: linear-gradient(180deg, rgba(37,99,235,.18) 0%, rgba(37,99,235,0) 32%), url('/img/fondo-blanco.png') right top / 420px auto no-repeat !important;
    opacity: .52 !important;
}

.cover-card.tipo-2 .app-card-bg,
.app-carousel.view-all .cover-card.tipo-2 .app-card-bg {
    background: linear-gradient(180deg, rgba(134,0,1,.28) 0%, rgba(134,0,1,0) 34%), url('/img/fondo-rojo-panal.png') right top / 420px auto no-repeat !important;
    opacity: .45 !important;
}

.cover-card.tipo-1::after {
    background: rgba(37,99,235,.18) !important;
}

.cover-card.tipo-2::after {
    background: rgba(134,0,1,.20) !important;
}

/* View buttons as visual controls */
.view-actions {
    gap: 10px !important;
}

.view-mode-button {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    position: relative;
}

    .view-mode-button i {
        font-size: 1.18rem;
    }

    .view-mode-button span {
        position: absolute;
        left: 50%;
        top: calc(100% + 8px);
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: .68rem;
        font-weight: 900;
        color: #667085;
        opacity: 0;
        pointer-events: none;
        transition: .18s ease;
    }

    .view-mode-button:hover span,
    .view-mode-button.active span {
        opacity: 1;
    }

    .view-mode-button.active {
        background: linear-gradient(135deg,#101828,#263244) !important;
        color: #fff !important;
    }

#btnVistaTodo.active {
    background: linear-gradient(135deg,#0f766e,#164e63) !important;
}

#btnVistaCover.active {
    background: linear-gradient(135deg,#860001,#b01720) !important;
}

/* Desktop coverflow refinement without numbers/icons */
.cover-card .app-card-body {
    padding-top: 18px !important;
}

.cover-card h3 {
    margin-top: 0 !important;
}

/* Landscape mobile / tablet: avoid broken 3D and make coverflow usable */
@media (max-width: 950px) and (orientation: landscape) {
    .page-frame,
    .content-shell,

    .hero-shell {
        min-height: auto !important;
        grid-template-columns: 1fr 320px !important;
        gap: 34px !important;
        padding-top: 122px !important;
        padding-bottom: 48px !important;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 7vw, 4.4rem) !important;
    }

    .hero-showcase {
        min-height: 250px !important;
    }

    .kpi-orbit {
        width: 320px !important;
        height: 220px !important;
    }

    .kpi-main,
    .kpi-card.teal {
        width: 155px !important;
        height: 135px !important;
        padding: 20px !important;
    }

    .kpi-card strong {
        font-size: 3.5rem !important;
    }

    .section-heading {
        min-height: 112px !important;
        padding: 26px 30px !important;
    }

    .app-carousel.coverflow {
        min-height: 330px !important;
        padding: 22px max(56px, calc((100% - 300px) / 2)) 44px !important;
        overflow-x: auto !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .cover-card {
        flex: 0 0 300px !important;
        min-height: 300px !important;
        margin: 0 -58px !important;
    }

        .cover-card.is-active {
            transform: translateZ(80px) rotateY(0) scale(1.02) !important;
        }

        .cover-card.is-left {
            transform: translateX(-32px) translateZ(-30px) rotateY(30deg) scale(.88) !important;
        }

        .cover-card.is-right {
            transform: translateX(32px) translateZ(-30px) rotateY(-30deg) scale(.88) !important;
        }

        .cover-card.is-far-left {
            transform: translateX(-70px) translateZ(-120px) rotateY(44deg) scale(.76) !important;
            opacity: .28 !important;
        }

        .cover-card.is-far-right {
            transform: translateX(70px) translateZ(-120px) rotateY(-44deg) scale(.76) !important;
            opacity: .28 !important;
        }

    .footer-content {
        min-height: 112px !important;
        padding: 24px 30px !important;
    }
}

/* Portrait mobile improvements */
@media(max-width:640px) {
    .view-mode-button {
        width: 48px !important;
        height: 48px !important;
    }

        .view-mode-button span {
            display: none;
        }

    .footer-content {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        min-height: 230px !important;
        padding: 30px 26px !important;
    }

    .footer-brand-block {
        width: 150px;
        height: 66px;
    }

    .footer-system {
        align-items: flex-start;
        min-width: 0;
        width: fit-content;
    }
}




/* Tipografía más moderna en tarjetas */
.app-card h3,
.cover-card h3 {
    font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
    color: #0f172a !important;
}

.app-card p,
.cover-card p {
    font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #64748b !important;
    font-weight: 650 !important;
}

/* Internas: más aire debajo de la barra superior */
.cover-card.tipo-1 .app-card-body,
.app-carousel.view-all .cover-card.tipo-1 .app-card-body {
    padding-top: 34px !important;
}

/* Externas: título a la derecha y composición más diferenciada */
.cover-card.tipo-2 .app-card-body,
.app-carousel.view-all .cover-card.tipo-2 .app-card-body {
    text-align: right !important;
    padding-top: 34px !important;
}

/* En vista todo,
un poco más de equilibrio visual */
.app-carousel.view-all .cover-card {
    min-height: 285px !important;
}

    .app-carousel.view-all .cover-card.tipo-1 h3,
    .app-carousel.view-all .cover-card.tipo-2 h3 {
        font-size: 1.22rem !important;
        line-height: 1.06 !important;
    }

    .app-carousel.view-all .cover-card.tipo-1 p,
    .app-carousel.view-all .cover-card.tipo-2 p {
        font-size: .88rem !important;
        line-height: 1.62 !important;
    }

@media(max-width:640px) {
    .cover-card.tipo-2 .app-card-body,
    .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
        text-align: left !important;
    }
}


/* =========================================================
   Ajustes finales solicitados
   ========================================================= */

/* Logo un poco más grande */
.hero-logo {
    width: 178px !important;
    height: 72px !important;
}

    .hero-logo img {
        height: 48px !important;
        max-width: 138px !important;
    }

    .hero-logo::before {
        width: 196px !important;
        height: 78px !important;
    }

/* quitar espacio del kicker removido */
.hero-copy h1 {
    margin-top: 0 !important;
}

/* Botones Ver todo / Carrusel rojos e iguales */
.view-actions > button,
.view-mode-button {
    background: linear-gradient(135deg,#860001,#b81722) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(134,0,1,.20) !important;
}

    .view-actions > button.active,
    .view-mode-button.active,
    #btnVistaTodo.active,
    #btnVistaCover.active {
        background: linear-gradient(135deg,#5f0001,#9d111b) !important;
        color: #fff !important;
        box-shadow: 0 18px 42px rgba(134,0,1,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

    .view-actions > button:hover,
    .view-mode-button:hover {
        transform: translateY(-2px);
        filter: saturate(1.08);
    }

/* cuando la busqueda encuentre uno: mantener tamano normal y centrar */
.app-carousel.coverflow.single-result {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

    .app-carousel.coverflow.single-result .cover-card:not(.d-none),
    .app-carousel.coverflow.single-result .cover-card.is-active {
        flex: 0 0 360px !important;
        margin: 0 !important;
        transform: translateZ(0) rotateY(0deg) scale(1) !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

/* Mobile logo */
@media(max-width:640px) {
    .hero-logo {
        width: 154px !important;
        height: 64px !important;
    }

        .hero-logo img {
            height: 42px !important;
            max-width: 120px !important;
        }

    .app-carousel.coverflow.single-result .cover-card:not(.d-none) {
        flex-basis: 82vw !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
    }

    .footer-system {
        justify-self: start !important;
        align-items: flex-start !important;
    }
}




/* Resultado unico en Ver todo: card normal centrada */
.app-carousel.view-all.single-result {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: visible !important;
    padding: 12px 0 36px !important;
}

    .app-carousel.view-all.single-result .cover-card:not(.d-none) {
        flex: 0 0 clamp(280px, 28vw, 360px) !important;
        max-width: 360px !important;
        min-height: 390px !important;
        margin: 0 auto !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }

/* Resultado unico en Carrusel: tamano normal,
centrado */
.app-carousel.coverflow.single-result {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 430px !important;
    padding: 24px 0 46px !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

    .app-carousel.coverflow.single-result .cover-card:not(.d-none),
    .app-carousel.coverflow.single-result .cover-card.is-active {
        flex: 0 0 clamp(280px, 28vw, 360px) !important;
        max-width: 360px !important;
        min-height: 390px !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

/* cuando JS oculte flechas */
.cover-arrows.d-none {
    display: none !important;
}

/* Botones rojos iguales y etiqueta Carrusel visible */
.view-mode-button span {
    color: #6b0001 !important;
    font-weight: 950 !important;
}

.view-mode-button.active span {
    color: #6b0001 !important;
}

/* Responsive */
@media(max-width:980px) {
    .footer-content {
        grid-template-columns: auto 1fr !important;
    }

    .footer-system {
        grid-column: 2 !important;
        justify-self: start !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

        .footer-system span,
        .footer-system strong {
            text-align: left !important;
        }
}

@media(max-width:640px) {
    .app-carousel.view-all.single-result .cover-card:not(.d-none),
    .app-carousel.coverflow.single-result .cover-card:not(.d-none) {
        flex-basis: 82vw !important;
        max-width: 82vw !important;
        min-height: 340px !important;
    }
}




/* Quitar Catálogo Digital aunque quede por CSS/markup anterior */
.section-label {
    display: none !important;
}

/* Botones: ambos rojos; el modo ACTIVO va blanco con letras rojas */
.view-actions > button,
.view-mode-button {
    background: linear-gradient(135deg,#860001,#b81722) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(134,0,1,.20) !important;
}

    .view-actions > button.active,
    .view-mode-button.active,
    #btnVistaTodo.active,
    #btnVistaCover.active {
        background: #fff !important;
        color: #860001 !important;
        border: 1px solid rgba(134,0,1,.18) !important;
        box-shadow: 0 18px 42px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
    }

        .view-mode-button.active i,
        #btnVistaTodo.active i,
        #btnVistaCover.active i {
            color: #860001 !important;
        }

        .view-mode-button span,
        .view-mode-button.active span {
            color: #860001 !important;
        }

/* Coverflow: mantener activo centrado,
sin deriva hacia derecha */
.app-carousel.coverflow {
    scroll-behavior: smooth !important;
    scroll-padding-left: 50% !important;
    scroll-padding-right: 50% !important;
    padding-left: max(80px, calc((100% - 360px) / 2)) !important;
    padding-right: max(80px, calc((100% - 360px) / 2)) !important;
}

.cover-card.is-active {
    transform: translateZ(120px) rotateY(0deg) scale(1.06) !important;
}

@media(max-width:640px) {
    .app-carousel.coverflow {
        padding-left: 14px !important;
        padding-right: 14px !important;
        scroll-padding-left: 14px !important;
        scroll-padding-right: 14px !important;
    }
}


/* =========================================================
   Fix definitivo: Cover Flow siempre centrado visualmente
   ========================================================= */

.app-carousel.coverflow {
    position: relative !important;
    height: 470px !important;
    min-height: 470px !important;
    overflow: hidden !important;
    display: block !important;
    perspective: 1500px !important;
    perspective-origin: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%) !important;
}

    .app-carousel.coverflow .cover-card {
        position: absolute !important;
        top: 42px !important;
        left: 50% !important;
        width: 360px !important;
        max-width: 360px !important;
        min-height: 390px !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform-origin: center center !important;
        transition: transform .48s cubic-bezier(.2,.8,.2,1), opacity .48s ease, filter .48s ease, box-shadow .48s ease !important;
    }

        /* Activa exactamente en el centro */
        .app-carousel.coverflow .cover-card.is-active {
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 40 !important;
            filter: none !important;
            transform: translateX(-50%) translateZ(130px) rotateY(0deg) scale(1.06) !important;
        }

        /* Laterales mirando al centro */
        .app-carousel.coverflow .cover-card.is-left {
            opacity: .80 !important;
            pointer-events: auto !important;
            z-index: 24 !important;
            filter: saturate(.82) brightness(.94) blur(.2px) !important;
            transform: translateX(calc(-50% - 230px)) translateZ(-40px) rotateY(38deg) scale(.86) !important;
        }

        .app-carousel.coverflow .cover-card.is-right {
            opacity: .80 !important;
            pointer-events: auto !important;
            z-index: 24 !important;
            filter: saturate(.82) brightness(.94) blur(.2px) !important;
            transform: translateX(calc(-50% + 230px)) translateZ(-40px) rotateY(-38deg) scale(.86) !important;
        }

        .app-carousel.coverflow .cover-card.is-far-left {
            opacity: .28 !important;
            pointer-events: auto !important;
            z-index: 8 !important;
            filter: saturate(.65) brightness(.90) blur(1px) !important;
            transform: translateX(calc(-50% - 410px)) translateZ(-180px) rotateY(58deg) scale(.72) !important;
        }

        .app-carousel.coverflow .cover-card.is-far-right {
            opacity: .28 !important;
            pointer-events: auto !important;
            z-index: 8 !important;
            filter: saturate(.65) brightness(.90) blur(1px) !important;
            transform: translateX(calc(-50% + 410px)) translateZ(-180px) rotateY(-58deg) scale(.72) !important;
        }

    /* Resultado unico */
    .app-carousel.coverflow.single-result {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 450px !important;
        min-height: 450px !important;
        overflow: visible !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

        .app-carousel.coverflow.single-result .cover-card:not(.d-none),
        .app-carousel.coverflow.single-result .cover-card.is-active {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            width: 360px !important;
            max-width: 360px !important;
            min-height: 390px !important;
            margin: 0 auto !important;
            transform: none !important;
            opacity: 1 !important;
            filter: none !important;
            pointer-events: auto !important;
        }

/* Ver todo vuelve a layout normal */
.app-carousel.view-all {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    gap: 22px !important;
    padding: 10px 0 28px !important;
    perspective: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

    .app-carousel.view-all .cover-card,
    .app-carousel.view-all .cover-card.is-active,
    .app-carousel.view-all .cover-card.is-left,
    .app-carousel.view-all .cover-card.is-right,
    .app-carousel.view-all .cover-card.is-far-left,
    .app-carousel.view-all .cover-card.is-far-right {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        min-height: 285px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        transform: none !important;
    }

/* mobile/tablet: swipe normal,
no absoluto */
@media(max-width:980px) {
    .app-carousel.coverflow {
        height: auto !important;
        min-height: 390px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        gap: 18px !important;
        padding: 20px 28px 42px !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow .cover-card.is-left,
        .app-carousel.coverflow .cover-card.is-right,
        .app-carousel.coverflow .cover-card.is-far-left,
        .app-carousel.coverflow .cover-card.is-far-right {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            flex: 0 0 310px !important;
            width: 310px !important;
            max-width: 310px !important;
            min-height: 340px !important;
            margin: 0 !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            filter: none !important;
            transform: none !important;
        }

            .app-carousel.coverflow .cover-card.is-active {
                transform: translateY(-8px) scale(1.015) !important;
            }
}

@media(max-width:640px) {
    .app-carousel.coverflow {
        padding: 14px 14px 34px !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow.single-result .cover-card:not(.d-none) {
            flex-basis: 82vw !important;
            width: 82vw !important;
            max-width: 82vw !important;
        }
}


/* =========================================================
   Ajuste final: cards menos altas y Cover Flow sin recorte
   ========================================================= */


.app-carousel.coverflow {
    height: 430px !important;
    min-height: 430px !important;
    overflow: hidden !important;
}

    /* Cards menos largas */
    .app-carousel.coverflow .cover-card {
        width: 330px !important;
        max-width: 330px !important;
        min-height: 330px !important;
        top: 46px !important;
        padding: 26px !important;
        border-radius: 32px !important;
    }

        .app-carousel.coverflow .cover-card.is-active {
            transform: translateX(-50%) translateZ(110px) rotateY(0deg) scale(1.04) !important;
        }

        .app-carousel.coverflow .cover-card.is-left {
            transform: translateX(calc(-50% - 210px)) translateZ(-45px) rotateY(38deg) scale(.84) !important;
        }

        .app-carousel.coverflow .cover-card.is-right {
            transform: translateX(calc(-50% + 210px)) translateZ(-45px) rotateY(-38deg) scale(.84) !important;
        }

        .app-carousel.coverflow .cover-card.is-far-left {
            transform: translateX(calc(-50% - 380px)) translateZ(-170px) rotateY(58deg) scale(.70) !important;
        }

        .app-carousel.coverflow .cover-card.is-far-right {
            transform: translateX(calc(-50% + 380px)) translateZ(-170px) rotateY(-58deg) scale(.70) !important;
        }

        /* Compactar contenido dentro de la card */
        .app-carousel.coverflow .cover-card .app-card-body {
            padding-top: 18px !important;
        }

        .app-carousel.coverflow .cover-card h3 {
            font-size: 1.35rem !important;
            line-height: 1.08 !important;
            min-height: 42px !important;
            margin-bottom: 12px !important;
        }

        .app-carousel.coverflow .cover-card p {
            font-size: .86rem !important;
            line-height: 1.48 !important;
        }

    /* Resultado único también compacto y centrado */
    .app-carousel.coverflow.single-result {
        height: 405px !important;
        min-height: 405px !important;
    }

        .app-carousel.coverflow.single-result .cover-card:not(.d-none),
        .app-carousel.coverflow.single-result .cover-card.is-active {
            width: 330px !important;
            max-width: 330px !important;
            min-height: 330px !important;
        }

/* Mobile/tablet mantiene buen tamaño táctil */
@media(max-width:980px) {
    .app-carousel.coverflow {
        min-height: 360px !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow .cover-card.is-left,
        .app-carousel.coverflow .cover-card.is-right,
        .app-carousel.coverflow .cover-card.is-far-left,
        .app-carousel.coverflow .cover-card.is-far-right {
            width: 300px !important;
            max-width: 300px !important;
            flex-basis: 300px !important;
            min-height: 315px !important;
        }
}

@media(max-width:640px) {
    .app-carousel.coverflow {
        min-height: 350px !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow.single-result .cover-card:not(.d-none) {
            width: 82vw !important;
            max-width: 82vw !important;
            flex-basis: 82vw !important;
            min-height: 315px !important;
        }
}


/* =========================================================
   HARD FIX CoverFlow: cards completas + móvil funcional
   ========================================================= */

/* Desktop: más espacio vertical y card activa sin recorte */
.app-carousel.coverflow {
    height: 520px !important;
    min-height: 520px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    perspective: 1500px !important;
    perspective-origin: center center !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .app-carousel.coverflow .cover-card {
        position: absolute !important;
        top: 48px !important;
        left: 50% !important;
        width: 340px !important;
        max-width: 340px !important;
        min-height: 365px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 28px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform-origin: center center !important;
    }

        .app-carousel.coverflow .cover-card.is-active {
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 40 !important;
            filter: none !important;
            transform: translateX(-50%) translateZ(70px) rotateY(0deg) scale(1) !important;
        }

        .app-carousel.coverflow .cover-card.is-left {
            opacity: .78 !important;
            pointer-events: auto !important;
            z-index: 24 !important;
            filter: saturate(.82) brightness(.94) blur(.2px) !important;
            transform: translateX(calc(-50% - 230px)) translateZ(-55px) rotateY(38deg) scale(.82) !important;
        }

        .app-carousel.coverflow .cover-card.is-right {
            opacity: .78 !important;
            pointer-events: auto !important;
            z-index: 24 !important;
            filter: saturate(.82) brightness(.94) blur(.2px) !important;
            transform: translateX(calc(-50% + 230px)) translateZ(-55px) rotateY(-38deg) scale(.82) !important;
        }

        .app-carousel.coverflow .cover-card.is-far-left {
            opacity: .26 !important;
            pointer-events: auto !important;
            z-index: 8 !important;
            filter: saturate(.65) brightness(.90) blur(1px) !important;
            transform: translateX(calc(-50% - 410px)) translateZ(-180px) rotateY(58deg) scale(.68) !important;
        }

        .app-carousel.coverflow .cover-card.is-far-right {
            opacity: .26 !important;
            pointer-events: auto !important;
            z-index: 8 !important;
            filter: saturate(.65) brightness(.90) blur(1px) !important;
            transform: translateX(calc(-50% + 410px)) translateZ(-180px) rotateY(-58deg) scale(.68) !important;
        }

        .app-carousel.coverflow .cover-card h3 {
            font-size: 1.32rem !important;
            line-height: 1.1 !important;
            min-height: 42px !important;
        }

        .app-carousel.coverflow .cover-card p {
            font-size: .86rem !important;
            line-height: 1.52 !important;
        }

    /* Resultado único sin deformarse */
    .app-carousel.coverflow.single-result {
        height: 450px !important;
        min-height: 450px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

        .app-carousel.coverflow.single-result .cover-card:not(.d-none),
        .app-carousel.coverflow.single-result .cover-card.is-active {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            width: 340px !important;
            max-width: 340px !important;
            min-height: 365px !important;
            margin: 0 auto !important;
            transform: none !important;
            opacity: 1 !important;
            filter: none !important;
            pointer-events: auto !important;
        }

/* Ver todo normal */
.app-carousel.view-all {
    height: auto !important;
    min-height: auto !important;
    display: grid !important;
    overflow: visible !important;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    gap: 22px !important;
    padding: 10px 0 28px !important;
}

    .app-carousel.view-all .cover-card,
    .app-carousel.view-all .cover-card.is-active,
    .app-carousel.view-all .cover-card.is-left,
    .app-carousel.view-all .cover-card.is-right,
    .app-carousel.view-all .cover-card.is-far-left,
    .app-carousel.view-all .cover-card.is-far-right {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        min-height: 285px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        transform: none !important;
    }

/* Móvil y tablet: NO CoverFlow 3D. Swipe horizontal estable */
@media (max-width: 980px) {
    .app-carousel.coverflow {
        height: auto !important;
        min-height: 390px !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 18px 24px 42px !important;
        margin: 0 !important;
        perspective: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 24px !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow .cover-card.is-left,
        .app-carousel.coverflow .cover-card.is-right,
        .app-carousel.coverflow .cover-card.is-far-left,
        .app-carousel.coverflow .cover-card.is-far-right {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            flex: 0 0 310px !important;
            width: 310px !important;
            max-width: 310px !important;
            min-height: 330px !important;
            margin: 0 !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            filter: none !important;
            transform: none !important;
            scroll-snap-align: center !important;
        }

            .app-carousel.coverflow .cover-card.is-active {
                transform: translateY(-6px) !important;
            }

        .app-carousel.coverflow.single-result {
            min-height: 380px !important;
            justify-content: center !important;
            overflow: visible !important;
            padding: 18px 0 42px !important;
        }

            .app-carousel.coverflow.single-result .cover-card:not(.d-none) {
                flex: 0 0 310px !important;
                width: 310px !important;
                max-width: 310px !important;
                min-height: 330px !important;
            }
}

/* Móvil vertical estrecho */
@media (max-width: 640px) {
    .app-carousel.coverflow {
        min-height: 370px !important;
        padding: 16px 14px 38px !important;
        scroll-padding-left: 14px !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow .cover-card.is-left,
        .app-carousel.coverflow .cover-card.is-right,
        .app-carousel.coverflow .cover-card.is-far-left,
        .app-carousel.coverflow .cover-card.is-far-right {
            flex: 0 0 82vw !important;
            width: 82vw !important;
            max-width: 82vw !important;
            min-height: 325px !important;
        }

        .app-carousel.coverflow.single-result .cover-card:not(.d-none) {
            flex-basis: 82vw !important;
            width: 82vw !important;
            max-width: 82vw !important;
        }
}

/* Móvil horizontal: swipe,
cards completas y sin cortes */
@media (max-width: 950px) and (orientation: landscape) {
    .app-carousel.coverflow {
        min-height: 350px !important;
        padding: 16px 22px 38px !important;
    }

        .app-carousel.coverflow .cover-card,
        .app-carousel.coverflow .cover-card.is-active,
        .app-carousel.coverflow .cover-card.is-left,
        .app-carousel.coverflow .cover-card.is-right,
        .app-carousel.coverflow .cover-card.is-far-left,
        .app-carousel.coverflow .cover-card.is-far-right {
            flex: 0 0 280px !important;
            width: 280px !important;
            max-width: 280px !important;
            min-height: 300px !important;
            transform: none !important;
        }
}


/* =========================================================
   FIX DEFINITIVO COVER FLOW:
   Solo 2 cards visibles a la izquierda y 2 a la derecha.
   Todas las demás quedan ocultas.
   El texto se mantiene visible en las 5 cards visibles.
   ========================================================= */

/* Estado oculto real para cards fuera del rango -2..+2 */
.app-carousel.coverflow .cover-card.is-hidden-cover {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateZ(-260px) scale(.55) !important;
    z-index: 0 !important;
}

/* La activa */
.app-carousel.coverflow .cover-card.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 50 !important;
}

/* Primera a cada lado */
.app-carousel.coverflow .cover-card.is-left,
.app-carousel.coverflow .cover-card.is-right {
    opacity: .78 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 30 !important;
}

/* Segunda a cada lado */
.app-carousel.coverflow .cover-card.is-far-left,
.app-carousel.coverflow .cover-card.is-far-right {
    opacity: .42 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 15 !important;
}

    /* Mantener texto visible en TODAS las cards visibles */
    .app-carousel.coverflow .cover-card.is-left .app-card-body,
    .app-carousel.coverflow .cover-card.is-right .app-card-body,
    .app-carousel.coverflow .cover-card.is-far-left .app-card-body,
    .app-carousel.coverflow .cover-card.is-far-right .app-card-body,
    .app-carousel.coverflow .cover-card.is-left h3,
    .app-carousel.coverflow .cover-card.is-right h3,
    .app-carousel.coverflow .cover-card.is-far-left h3,
    .app-carousel.coverflow .cover-card.is-far-right h3,
    .app-carousel.coverflow .cover-card.is-left p,
    .app-carousel.coverflow .cover-card.is-right p,
    .app-carousel.coverflow .cover-card.is-far-left p,
    .app-carousel.coverflow .cover-card.is-far-right p {
        opacity: 1 !important;
        visibility: visible !important;
    }

/* Quitar reglas anteriores que ocultaban texto de laterales */
.app-carousel.coverflow .cover-card:not(.is-active) .app-card-body,
.app-carousel.coverflow .cover-card:not(.is-active) h3,
.app-carousel.coverflow .cover-card:not(.is-active) p {
    visibility: visible !important;
}

/* Quitar gris/pixelado sin eliminar el texto */
.app-carousel.coverflow .cover-card.is-left,
.app-carousel.coverflow .cover-card.is-right,
.app-carousel.coverflow .cover-card.is-far-left,
.app-carousel.coverflow .cover-card.is-far-right {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

    /* Fondos laterales más limpios pero conservando diseño */
    .app-carousel.coverflow .cover-card.is-left .app-card-bg,
    .app-carousel.coverflow .cover-card.is-right .app-card-bg {
        opacity: .24 !important;
        filter: none !important;
    }

    .app-carousel.coverflow .cover-card.is-far-left .app-card-bg,
    .app-carousel.coverflow .cover-card.is-far-right .app-card-bg {
        opacity: .16 !important;
        filter: none !important;
    }

/* Evitar máscaras que generan manchas grises */
.app-carousel.coverflow {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* En móvil/tablet se mantiene swipe normal */
@media(max-width:980px) {
    .app-carousel.coverflow .cover-card.is-hidden-cover {
        display: none !important;
    }

    .app-carousel.coverflow .cover-card,
    .app-carousel.coverflow .cover-card.is-active,
    .app-carousel.coverflow .cover-card.is-left,
    .app-carousel.coverflow .cover-card.is-right,
    .app-carousel.coverflow .cover-card.is-far-left,
    .app-carousel.coverflow .cover-card.is-far-right {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Más separación entre header visual y título */
.app-card-title,
.app-card h3 {
    margin-top: 26px !important;
}


/* =========================================================
   FIX COVERFLOW: sin parpadeo,
bordes redondeados y 3-1-3
   ========================================================= */
.app-carousel.coverflow {
    min-height: 460px !important;
    padding: 34px max(110px, calc((100% - 360px) / 2)) 60px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-behavior: auto !important;
    transform-style: preserve-3d;
}

.cover-card {
    flex: 0 0 320px !important;
    min-height: 360px !important;
    margin: 0 -96px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    pointer-events: none;
    transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .36s ease, filter .36s ease, box-shadow .36s ease !important;
}

    .cover-card,
    .cover-card .app-card-bg {
        border-radius: 34px !important;
    }

        .cover-card .app-card-bg {
            inset: 0;
            overflow: hidden;
        }

        /* Evita el parpadeo: hover ya no cambia la tarjeta como activa.
   El click sigue usando JS para convertirla en activa. */
        .cover-card:hover,
        .cover-card:focus-visible {
            transform: inherit;
        }

        .cover-card.is-active {
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 40 !important;
            transform: translateX(0) translateZ(140px) rotateY(0deg) scale(1.08) !important;
            filter: none !important;
            box-shadow: 0 46px 96px rgba(16,24,40,.24), inset 0 1px 0 rgba(255,255,255,.8) !important;
        }

        .cover-card.is-left {
            opacity: .86 !important;
            pointer-events: auto !important;
            z-index: 30 !important;
            transform: translateX(-42px) translateZ(-30px) rotateY(34deg) scale(.90) !important;
        }

        .cover-card.is-right {
            opacity: .86 !important;
            pointer-events: auto !important;
            z-index: 30 !important;
            transform: translateX(42px) translateZ(-30px) rotateY(-34deg) scale(.90) !important;
        }

        .cover-card.is-far-left {
            opacity: .58 !important;
            pointer-events: auto !important;
            z-index: 20 !important;
            transform: translateX(-92px) translateZ(-150px) rotateY(52deg) scale(.78) !important;
        }

        .cover-card.is-far-right {
            opacity: .58 !important;
            pointer-events: auto !important;
            z-index: 20 !important;
            transform: translateX(92px) translateZ(-150px) rotateY(-52deg) scale(.78) !important;
        }

        .cover-card.is-edge-left {
            opacity: .30 !important;
            pointer-events: auto !important;
            z-index: 10 !important;
            transform: translateX(-138px) translateZ(-250px) rotateY(64deg) scale(.66) !important;
        }

        .cover-card.is-edge-right {
            opacity: .30 !important;
            pointer-events: auto !important;
            z-index: 10 !important;
            transform: translateX(138px) translateZ(-250px) rotateY(-64deg) scale(.66) !important;
        }

        .cover-card.is-hidden-cover {
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: 0 !important;
        }

        .cover-card::before,
        .cover-card::after {
            pointer-events: none;
        }

@media(max-width:980px) {
    .cover-card.is-edge-left,
    .cover-card.is-edge-right {
        flex: 0 0 310px !important;
        margin: 0 18px 0 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        transform: none !important;
    }
}

@media(max-width:640px) {
    .cover-card.is-edge-left,
    .cover-card.is-edge-right {
        flex-basis: 82vw !important;
        min-height: 340px !important;
    }
}

/* =========================================================
   Fix 3-1-3 coverflow: tercera tarjeta visible por lado
   ========================================================= */
.app-carousel.coverflow {
    overflow: visible !important;
    max-width: 1280px !important;
}

    .app-carousel.coverflow .cover-card.is-edge-left {
        opacity: .18 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 6 !important;
        filter: none !important;
        transform: translateX(calc(-50% - 560px)) translateZ(-290px) rotateY(66deg) scale(.58) !important;
    }

    .app-carousel.coverflow .cover-card.is-edge-right {
        opacity: .18 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 6 !important;
        filter: none !important;
        transform: translateX(calc(-50% + 560px)) translateZ(-290px) rotateY(-66deg) scale(.58) !important;
    }

        .app-carousel.coverflow .cover-card.is-edge-left .app-card-body,
        .app-carousel.coverflow .cover-card.is-edge-right .app-card-body,
        .app-carousel.coverflow .cover-card.is-edge-left h3,
        .app-carousel.coverflow .cover-card.is-edge-right h3,
        .app-carousel.coverflow .cover-card.is-edge-left p,
        .app-carousel.coverflow .cover-card.is-edge-right p {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .app-carousel.coverflow .cover-card.is-edge-left .app-card-bg,
        .app-carousel.coverflow .cover-card.is-edge-right .app-card-bg {
            opacity: .10 !important;
            filter: none !important;
        }

@media(max-width:1180px) {
    .app-carousel.coverflow .cover-card.is-edge-left,
    .app-carousel.coverflow .cover-card.is-edge-right {
        display: none !important;
    }
}

@media(max-width:980px) {
    .app-carousel.coverflow .cover-card.is-edge-left,
    .app-carousel.coverflow .cover-card.is-edge-right {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }
}


.section-heading {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto 34px auto;
    height: 105px;
    padding: 0 34px;
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 10px 40px rgba(15,23,42,.08);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .section-heading h2 {
        margin: 0;
        font-size: 58px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -2px;
        color: #123c69;
        font-family: "Barlow", ui-sans-serif, system-ui, sans-serif;
    }

.view-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-mode-button,
.cover-arrows button {
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 18px;
    background: #ffffff;
    color: #8b0015;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(15,23,42,.10);
    transition: all .25s ease;
}

    .view-mode-button:hover,
    .cover-arrows button:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(15,23,42,.16);
    }

    .view-mode-button.active {
        background: linear-gradient(135deg,#8b0015,#c1121f);
        color: white;
        box-shadow: 0 14px 28px rgba(139,0,21,.28);
    }

    .view-mode-button i {
        font-size: 18px;
    }

    .view-mode-button span {
        display: none;
    }

    .view-mode-button.active {
        background: linear-gradient(135deg, #8b001b, #b31424);
        color: #fff;
        box-shadow: 0 14px 28px rgba(139, 0, 27, 0.25);
    }

    .view-mode-button:hover,
    .cover-arrows button:hover {
        transform: translateY(-2px);
    }

.cover-arrows {
    display: flex;
    gap: 8px;
    margin-left: 6px;
}


/* ===== OVERRIDE FINAL BARRA APLICACIONES ===== */

main#aplicaciones .section-heading {
    width: 100% !important;
    max-width: 1260px !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 auto 34px auto !important;
    padding: 0 32px !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
    border: 1px solid rgba(13, 60, 105, .08) !important;
    box-shadow: 0 18px 42px rgba(13, 60, 105, .12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

    main#aplicaciones .section-heading h2 {
        font-size: 42px !important;
        font-weight: 900 !important;
        letter-spacing: -1.5px !important;
        color: #103b67 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

main#aplicaciones .view-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

main#aplicaciones .view-mode-button,
main#aplicaciones .cover-arrows button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(139, 0, 21, .10) !important;
    background: #ffffff !important;
    color: #8b0015 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .22s ease !important;
}

    main#aplicaciones .view-mode-button.active {
        background: linear-gradient(135deg, #8b0015, #c1121f) !important;
        color: #ffffff !important;
        box-shadow: 0 14px 30px rgba(139, 0, 21, .30) !important;
    }

    main#aplicaciones .view-mode-button span {
        display: none !important;
    }

/* ICONOS BOTON ACTIVO */

.view-mode-button.active i,
.view-mode-button.active svg {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ICONOS NORMALES */

.view-mode-button i,
.cover-arrows button i {
    color: inherit !important;
    opacity: 1 !important;
}

.view-mode-button.active {
    background: linear-gradient(135deg,#8b0015,#c1121f) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 14px 30px rgba(139,0,21,.30) !important;
}

/* Forzar icono blanco en botón activo */
main#aplicaciones .view-mode-button.active,
main#aplicaciones .view-mode-button.active *,
main#aplicaciones .view-mode-button.active i::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

    /* Más contraste para que no se pierda */
    main#aplicaciones .view-mode-button.active i {
        text-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
        filter: brightness(0) invert(1) !important;
    }

/* Estado normal */
main#aplicaciones .cover-arrows button {
    background: #ffffff !important;
    color: #8b0015 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

    /* Mientras se hace click */
    main#aplicaciones .cover-arrows button:active {
        background: linear-gradient(135deg,#8b0015,#c1121f) !important;
        color: #ffffff !important;
        transform: scale(.92);
    }

        /* Forzar icono blanco */
        main#aplicaciones .cover-arrows button:active i {
            color: #ffffff !important;
        }

/* Compactar laterales 3-1-3 y bajar brillo del centro */

.app-carousel.coverflow .cover-card.is-active {
    filter: saturate(1.08) brightness(1.08) contrast(1.03) !important;
    box-shadow: 0 30px 65px rgba(16,24,40,.22), 0 0 28px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.app-carousel.coverflow .cover-card.is-left {
    transform: translateX(calc(-50% - 195px)) translateZ(-55px) rotateY(38deg) scale(.82) !important;
}

.app-carousel.coverflow .cover-card.is-right {
    transform: translateX(calc(-50% + 195px)) translateZ(-55px) rotateY(-38deg) scale(.82) !important;
}

.app-carousel.coverflow .cover-card.is-far-left {
    transform: translateX(calc(-50% - 345px)) translateZ(-180px) rotateY(58deg) scale(.68) !important;
}

.app-carousel.coverflow .cover-card.is-far-right {
    transform: translateX(calc(-50% + 345px)) translateZ(-180px) rotateY(-58deg) scale(.68) !important;
}

.app-carousel.coverflow .cover-card.is-edge-left {
    transform: translateX(calc(-50% - 470px)) translateZ(-260px) rotateY(64deg) scale(.58) !important;
}

.app-carousel.coverflow .cover-card.is-edge-right {
    transform: translateX(calc(-50% + 470px)) translateZ(-260px) rotateY(-64deg) scale(.58) !important;
}
/* =========================================================
   FIX MOVIL: MOSTRAR TODAS LAS CARDS EN CARRUSEL - 2026-05-07
   - Corrige que en móvil no aparezcan todas las cards al deslizar.
   - En móvil se ignoran clases is-hidden-cover/is-edge/etc.
   - Barra "Aplicaciones Silanes" limpia.
   - Botones de vista ocultos en móvil.
   ========================================================= */

/* Fondos sin franja rosa */
main#aplicaciones .cover-card.tipo-1 .app-card-bg,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-bg,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-bg {
    background: url('/img/fondo-blanco.png') center top / cover no-repeat !important;
    opacity: .62 !important;
}

main#aplicaciones .cover-card.tipo-2 .app-card-bg,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-bg,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-bg {
    background: url('/img/fondo-rojo-panal.png') center top / cover no-repeat !important;
    opacity: .74 !important;
}

/* Desktop: coverflow estable */
main#aplicaciones .app-carousel.coverflow {
    position: relative !important;
    height: 460px !important;
    min-height: 460px !important;
    overflow: hidden !important;
    display: block !important;
    perspective: 1400px !important;
    perspective-origin: center center !important;
    transform-style: preserve-3d !important;
    padding: 0 !important;
    margin: 0 !important;
    contain: layout paint !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
}

    main#aplicaciones .app-carousel.coverflow .cover-card {
        position: absolute !important;
        top: 44px !important;
        left: 50% !important;
        width: 340px !important;
        max-width: 340px !important;
        min-width: 340px !important;
        height: 355px !important;
        min-height: 355px !important;
        margin: 0 !important;
        padding: 26px !important;
        border-radius: 32px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        filter: none !important;
        will-change: transform, opacity !important;
        contain: paint !important;
        transition: transform .38s cubic-bezier(.22,.72,.22,1), opacity .30s ease !important;
    }

        main#aplicaciones .app-carousel.coverflow .cover-card .app-card-bg {
            position: absolute !important;
            inset: 0 !important;
            display: block !important;
            visibility: visible !important;
            pointer-events: none !important;
            z-index: 0 !important;
            transform: translateZ(0) !important;
            filter: none !important;
            image-rendering: auto !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header,
        main#aplicaciones .app-carousel.coverflow .cover-card .app-card-body {
            position: relative !important;
            z-index: 2 !important;
            transform: translateZ(1px) !important;
            backface-visibility: hidden !important;
            -webkit-backface-visibility: hidden !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-active {
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 60 !important;
            filter: none !important;
            transform: translate3d(-50%, 0, 64px) rotateY(0deg) !important;
            box-shadow: 0 34px 74px rgba(16,24,40,.19), inset 0 1px 0 rgba(255,255,255,.86) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
            opacity: .78 !important;
            pointer-events: auto !important;
            z-index: 36 !important;
            filter: none !important;
            transform: translate3d(calc(-50% - 205px), 0, -46px) rotateY(30deg) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
            opacity: .78 !important;
            pointer-events: auto !important;
            z-index: 36 !important;
            filter: none !important;
            transform: translate3d(calc(-50% + 205px), 0, -46px) rotateY(-30deg) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left {
            opacity: .36 !important;
            pointer-events: auto !important;
            z-index: 16 !important;
            filter: none !important;
            transform: translate3d(calc(-50% - 365px), 0, -130px) rotateY(42deg) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right {
            opacity: .36 !important;
            pointer-events: auto !important;
            z-index: 16 !important;
            filter: none !important;
            transform: translate3d(calc(-50% + 365px), 0, -130px) rotateY(-42deg) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left {
            opacity: .14 !important;
            pointer-events: none !important;
            z-index: 4 !important;
            filter: none !important;
            transform: translate3d(calc(-50% - 505px), 0, -210px) rotateY(50deg) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right {
            opacity: .14 !important;
            pointer-events: none !important;
            z-index: 4 !important;
            filter: none !important;
            transform: translate3d(calc(-50% + 505px), 0, -210px) rotateY(-50deg) !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card::before,
        main#aplicaciones .app-carousel.coverflow .cover-card::after {
            display: none !important;
        }

        /* Layout interno uniforme */
        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
            padding-top: 34px !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
            font-size: 1.35rem !important;
            line-height: 1.08 !important;
            min-height: 44px !important;
            margin: 0 0 12px !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
            font-size: .86rem !important;
            line-height: 1.48 !important;
            min-height: 64px !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body {
            text-align: left !important;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
            text-align: right !important;
        }

/* =========================
   MÓVIL / TABLET
   ========================= */
@media(max-width:980px) {

    main#aplicaciones.content-shell {
        width: min(100% - 22px, 1280px) !important;
        margin-top: 24px !important;
        overflow: visible !important;
    }

    /* Barra limpia: solo título */
    main#aplicaciones .section-heading {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 0 18px !important;
        padding: 22px 24px !important;
        border-radius: 26px !important;
        display: block !important;
        overflow: visible !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 18px 42px rgba(16,24,40,.08) !important;
    }

        main#aplicaciones .section-heading > div:first-child {
            width: 100% !important;
            display: block !important;
        }

        main#aplicaciones .section-heading h2 {
            display: block !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #103b67 !important;
            font-size: clamp(2rem, 7vw, 3.15rem) !important;
            line-height: 1.02 !important;
            letter-spacing: -.06em !important;
            text-align: left !important;
            white-space: normal !important;
            overflow: visible !important;
            text-wrap: balance !important;
            word-break: normal !important;
        }

    /* Ocultar botones de vista en móvil */
    main#aplicaciones .view-actions,
    main#aplicaciones #btnVistaTodo,
    main#aplicaciones #btnVistaCover,
    main#aplicaciones .cover-arrows {
        display: none !important;
    }

    /* Carrusel móvil: TODAS las cards visibles, scroll manual */
    main#aplicaciones .app-carousel.coverflow {
        position: relative !important;
        height: auto !important;
        min-height: 350px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 14px 14px 32px !important;
        perspective: none !important;
        transform-style: flat !important;
        contain: none !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

        /* IMPORTANTÍSIMO:
       En móvil se ignoran TODAS las clases del coverflow,
       incluyendo is-hidden-cover, para que sí aparezcan todas las cards. */
        main#aplicaciones .app-carousel.coverflow .cover-card,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            display: flex !important;
            flex: 0 0 min(82vw, 330px) !important;
            width: min(82vw, 330px) !important;
            max-width: 330px !important;
            min-width: 0 !important;
            height: 330px !important;
            min-height: 330px !important;
            margin: 0 !important;
            padding: 26px !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: none !important;
            filter: none !important;
            contain: paint !important;
            scroll-snap-align: center !important;
        }

            main#aplicaciones .app-carousel.coverflow .cover-card.d-none {
                display: none !important;
            }

            main#aplicaciones .app-carousel.coverflow .cover-card .app-card-bg {
                display: block !important;
                visibility: visible !important;
                opacity: .62 !important;
            }

            main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-bg {
                opacity: .74 !important;
            }
}

@media(max-width:640px) {

    main#aplicaciones.content-shell {
        width: min(100% - 18px, 1280px) !important;
        margin-top: 20px !important;
    }

    main#aplicaciones .section-heading {
        padding: 20px 20px !important;
        border-radius: 24px !important;
        margin-bottom: 16px !important;
    }

        main#aplicaciones .section-heading h2 {
            font-size: clamp(1.95rem, 9vw, 2.75rem) !important;
            line-height: 1.02 !important;
            letter-spacing: -.055em !important;
        }

    main#aplicaciones .app-carousel.coverflow {
        min-height: 348px !important;
        padding: 12px 10px 30px !important;
        gap: 14px !important;
    }

        main#aplicaciones .app-carousel.coverflow .cover-card,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
        main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
            flex-basis: 82vw !important;
            width: 82vw !important;
            max-width: 82vw !important;
            height: 320px !important;
            min-height: 320px !important;
        }

            main#aplicaciones .cover-card.tipo-2 .app-card-body,
            main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body,
            main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
                text-align: right !important;
            }
}

/* Mantener el cuerpo de tipo 2 alineado a la derecha */
main#aplicaciones .cover-card.tipo-2 .app-card-body,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
    text-align: right !important;
}

/* Movil: mismas reglas */
@media(max-width:980px) {
    main#aplicaciones .app-card-footer i,
    main#aplicaciones .cover-card .app-card-footer i,
    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer i,
    main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer i {
        display: none !important;
    }

    main#aplicaciones .cover-card.tipo-1 .app-card-footer,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-footer,
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer {
        justify-content: flex-end !important;
        flex-direction: row !important;
        text-align: right !important;
    }

        main#aplicaciones .cover-card.tipo-1 .app-card-footer span,
        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-footer span,
        main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer span {
            text-align: right !important;
        }

    main#aplicaciones .cover-card.tipo-2 .app-card-footer,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer,
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
        justify-content: flex-start !important;
        flex-direction: row !important;
        text-align: left !important;
    }

        main#aplicaciones .cover-card.tipo-2 .app-card-footer span,
        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer span,
        main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer span {
            text-align: left !important;
        }

    main#aplicaciones .cover-card.tipo-2 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body,
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
        text-align: right !important;
    }
}

/* =========================================================
   Footer limpio + identidad institucional
   Ajuste v2.3: texto del footer sobre placa solida para no invadir el logotipo de fondo.
   ========================================================= */
:root {
    --silanes-red: #ed1c24;
    --silanes-red-dark: #b5121b;
    --silanes-red-deep: #8f0004;
}

body,
button,
input,
a {
    font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.hero-logo {
    background: var(--silanes-red) !important;
    background-image: none !important;
    box-shadow: 0 18px 44px rgba(237, 28, 36, .22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.btn-primary-hero,
main#aplicaciones .view-mode-button,
main#aplicaciones .cover-arrows button,
.view-actions > button,
.view-mode-button {
    background: var(--silanes-red) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: rgba(237, 28, 36, .18) !important;
    box-shadow: 0 14px 32px rgba(237, 28, 36, .20) !important;
}

    .btn-primary-hero:hover,
    .btn-primary-hero:focus-visible,
    .view-actions > button:hover,
    .view-actions > button:focus-visible,
    .view-mode-button:hover,
    .view-mode-button:focus-visible,
    main#aplicaciones .cover-arrows button:hover,
    main#aplicaciones .cover-arrows button:focus-visible {
        background: var(--silanes-red-dark) !important;
        background-image: none !important;
        color: #fff !important;
    }

    #btnVistaTodo.active,
    #btnVistaCover.active,
    main#aplicaciones .view-mode-button.active {
        background: var(--silanes-red) !important;
        background-image: none !important;
        color: #fff !important;
    }

    main#aplicaciones .view-mode-button i,
    main#aplicaciones .cover-arrows button i {
        color: #fff !important;
    }




/* FIX móvil vertical + botones + KPIs */
@media (max-width: 640px) and (orientation: portrait) {
    .page-frame::before {
        background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.96) 62%), url('/img/fondo-rojo.png') right top / 520px auto no-repeat !important;
        opacity: 1 !important;
    }

    .hero-logo {
        box-shadow: 0 18px 44px rgba(237,28,36,.35) !important;
    }

    .kpi-orbit {
        height: 220px !important;
    }

    .kpi-main {
        left: 0 !important;
        top: 0 !important;
        transform: translateY(-10px) rotate(-2deg) !important;
    }

    .kpi-card.teal {
        right: 0 !important;
        bottom: 0 !important;
        transform: translateY(18px) rotate(2deg) !important;
    }
}

/* Botones de vista: activo rojo/blanco, inactivo blanco/rojo */
main#aplicaciones .view-mode-button {
    background: #ffffff !important;
    color: var(--silanes-red) !important;
    border: 1px solid rgba(237,28,36,.22) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
}

    main#aplicaciones .view-mode-button i {
        color: var(--silanes-red) !important;
        filter: none !important;
    }

    main#aplicaciones .view-mode-button.active {
        background: var(--silanes-red) !important;
        color: #ffffff !important;
        border-color: var(--silanes-red) !important;
        box-shadow: 0 14px 30px rgba(237,28,36,.28) !important;
    }

        main#aplicaciones .view-mode-button.active i {
            color: #ffffff !important;
            filter: none !important;
        }


/* =====================================================
   GIRO KPIs
   ===================================================== */

/* CARD DEL 8 */
.kpi-main.kpi-card {
    transform: rotate(-12deg) !important;
    transform-origin: center center !important;
}

/* CARD DEL 6 */
.kpi-card.teal {
    transform: rotate(12deg) !important;
    transform-origin: center center !important;
}

/* =========================================================
   FOOTER REAL COMO IMAGEN, NO BACKGROUND
   ========================================================= */

.portal-footer {
    width: min(1280px, calc(100% - 48px)) !important;
    height: 210px !important;
    margin: 48px auto 72px !important;
    padding: 0 !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background: none !important;
    box-shadow: 0 26px 76px rgba(111,0,18,.20) !important;
}

    .portal-footer img {
        width: 100% !important;
        /*height: 100% !important;*/
        display: block !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    .portal-footer::before,
    .portal-footer::after,
    .portal-footer .footer-content {
        display: none !important;
    }

@media (max-width: 640px) and (orientation: portrait) {

    .portal-footer {
        height: 80px !important;
        overflow: hidden !important;
        background: #ed1c24 !important;
    }

    .portal-footer img {
        object-fit: cover !important;
        object-position: top left !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {

    .portal-footer {
        height: 160px !important;
        overflow: hidden !important;
        background: #ed1c24 !important;
    }

        .portal-footer img {
            width: 100% !important;
            height: 100% !important;
            /* CLAVE */
            object-fit: cover !important;
            /* MUEVE LA IMAGEN HACIA ARRIBA */
            object-position: top left !important;
            display: block !important;
        }
}


/* =========================================================
   MOBILE TUNING V3 - estilo referencia imagen 2
   - Logo superior alineado a la izquierda
   - KPIs con giro suave y sin encimarse
   - Carrusel movil tipo coverflow: card central completa y laterales visibles
   ========================================================= */
@media (max-width: 640px) and (orientation: portrait) {
    html, body {
        overflow-x: hidden !important;
    }

    .page-frame {
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 0 0 30px 30px !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, #fff1f2 0%, #ffffff 38%, #ffffff 100%) !important;
    }

    .page-frame::before {
        background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.94) 42%, #ffffff 100%), url('/img/fondo-rojo-panal.png') right top / 360px auto no-repeat !important;
        opacity: 1 !important;
    }

    .page-frame::after {
        display: none !important;
    }

    .hero-logo {
        left: 18px !important;
        right: auto !important;
        top: 18px !important;
        width: 126px !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 20px !important;
        background: #ed1c24 !important;
        box-shadow: 0 14px 34px rgba(237,28,36,.25) !important;
        transform: none !important;
    }

    .hero-logo::before,
    .hero-logo::after {
        display: none !important;
    }

    .hero-logo img {
        height: 30px !important;
        max-width: 96px !important;
        object-fit: contain !important;
        filter: none !important;
    }

    .hero-shell {
        width: calc(100% - 48px) !important;
        padding-top: 104px !important;
        padding-bottom: 22px !important;
        gap: 22px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-copy h1 {
        max-width: 310px !important;
        font-size: clamp(2.45rem, 12.4vw, 3.45rem) !important;
        line-height: .92 !important;
        letter-spacing: -.085em !important;
        margin: 0 !important;
    }

    .hero-copy p {
        max-width: 300px !important;
        margin-top: 16px !important;
        font-size: .92rem !important;
        line-height: 1.55 !important;
    }

    .hero-tools {
        margin-top: 22px !important;
        gap: 12px !important;
    }

    .search-box,
    .btn-primary-hero {
        width: 100% !important;
        min-height: 52px !important;
        border-radius: 18px !important;
    }

    .search-box {
        padding: 0 18px !important;
    }

    .search-box input {
        font-size: .86rem !important;
    }

    .btn-primary-hero {
        justify-content: center !important;
        font-size: .92rem !important;
        box-shadow: 0 18px 36px rgba(237,28,36,.24) !important;
    }

    .hero-showcase {
        min-height: 178px !important;
        margin-top: 4px !important;
        display: block !important;
    }

    .hero-showcase::before {
        display: none !important;
    }

    .kpi-orbit {
        width: 100% !important;
        height: 172px !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    .kpi-main,
    .kpi-card.teal {
        width: 46% !important;
        max-width: 146px !important;
        height: 128px !important;
        padding: 18px 16px !important;
        border-radius: 22px !important;
        box-shadow: 0 22px 50px rgba(16,24,40,.12) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    .kpi-main {
        left: 2px !important;
        top: 14px !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(-8deg) !important;
        z-index: 3 !important;
    }

    .kpi-card.teal {
        right: 2px !important;
        left: auto !important;
        top: 28px !important;
        bottom: auto !important;
        transform: rotate(8deg) !important;
        z-index: 2 !important;
    }

    .kpi-card strong {
        font-size: 3.8rem !important;
        line-height: .82 !important;
    }

    .kpi-card small {
        margin-top: 14px !important;
        font-size: .62rem !important;
        line-height: 1.18 !important;
        letter-spacing: .12em !important;
    }

    main#aplicaciones.content-shell {
        width: 100% !important;
        margin-top: 0 !important;
        padding: 24px 0 0 !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, #eef4f8 0%, #ffffff 46%, #ffffff 100%) !important;
    }

    main#aplicaciones .section-heading {
        width: calc(100% - 48px) !important;
        margin: 0 auto 14px !important;
        padding: 0 !important;
        min-height: auto !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    main#aplicaciones .section-heading h2 {
        color: #103b67 !important;
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        letter-spacing: -.055em !important;
        position: relative !important;
        padding-bottom: 12px !important;
    }

    main#aplicaciones .section-heading h2::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 42px !important;
        height: 4px !important;
        border-radius: 999px !important;
        background: #ed1c24 !important;
    }

    main#aplicaciones .view-actions,
    main#aplicaciones #btnVistaTodo,
    main#aplicaciones #btnVistaCover,
    main#aplicaciones .cover-arrows {
        display: none !important;
    }

    /* Coverflow movil real: card central completa + laterales visibles */
    main#aplicaciones .app-carousel.coverflow {
        position: relative !important;
        display: block !important;
        height: 340px !important;
        min-height: 340px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        perspective: 900px !important;
        perspective-origin: center center !important;
        transform-style: preserve-3d !important;
        scroll-snap-type: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        contain: layout paint !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        display: flex !important;
        flex: none !important;
        width: 235px !important;
        max-width: 235px !important;
        min-width: 235px !important;
        height: 270px !important;
        min-height: 270px !important;
        margin: 0 !important;
        padding: 22px !important;
        border-radius: 28px !important;
        overflow: hidden !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 0 !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        contain: paint !important;
        transition: transform .34s cubic-bezier(.22,.72,.22,1), opacity .24s ease !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-active {
        opacity: 1 !important;
        z-index: 10 !important;
        transform: translate3d(-50%, 0, 55px) rotateY(0deg) scale(1) !important;
        box-shadow: 0 28px 60px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.88) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        opacity: .50 !important;
        z-index: 4 !important;
        transform: translate3d(calc(-50% - 155px), 10px, -70px) rotateY(42deg) scale(.78) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        opacity: .50 !important;
        z-index: 4 !important;
        transform: translate3d(calc(-50% + 155px), 10px, -70px) rotateY(-42deg) scale(.78) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left {
        opacity: .15 !important;
        z-index: 1 !important;
        transform: translate3d(calc(-50% - 250px), 20px, -150px) rotateY(58deg) scale(.62) !important;
        pointer-events: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right {
        opacity: .15 !important;
        z-index: 1 !important;
        transform: translate3d(calc(-50% + 250px), 20px, -150px) rotateY(-58deg) scale(.62) !important;
        pointer-events: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate3d(-50%, 20px, -260px) scale(.50) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.d-none {
        display: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-bg {
        opacity: .58 !important;
        transform: none !important;
        filter: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-bg {
        opacity: .72 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 28px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: 1.02rem !important;
        line-height: 1.08 !important;
        min-height: 36px !important;
        margin-bottom: 10px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .75rem !important;
        line-height: 1.42 !important;
        min-height: 58px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer {
        min-height: 30px !important;
        font-size: .72rem !important;
    }

    .portal-footer {
        width: calc(100% - 48px) !important;
        height: 92px !important;
        margin: 8px auto 34px !important;
        border-radius: 26px !important;
    }
}

@media (max-width: 390px) and (orientation: portrait) {
    .hero-shell {
        width: calc(100% - 42px) !important;
    }

    .hero-copy h1 {
        font-size: clamp(2.30rem, 12vw, 3.20rem) !important;
    }

    .kpi-main,
    .kpi-card.teal {
        max-width: 136px !important;
        height: 122px !important;
        padding: 17px 15px !important;
    }

    .kpi-card strong {
        font-size: 3.45rem !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        width: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        height: 258px !important;
        min-height: 258px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        transform: translate3d(calc(-50% - 145px), 10px, -70px) rotateY(42deg) scale(.78) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        transform: translate3d(calc(-50% + 145px), 10px, -70px) rotateY(-42deg) scale(.78) !important;
    }
}

/* Mobile production safety: only the centered/active app card should be clickable. */
@media (max-width: 768px), (pointer: coarse) {
    .app-carousel.coverflow .cover-card:not(.is-active) {
        cursor: default;
    }
}

/* Ajuste v7: móvil horizontal con swipe y cards más compactas.
   Aplica solo a teléfono en landscape para que en portrait/desktop no cambie. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    main#aplicaciones.content-shell {
        padding-top: 14px !important;
        overflow: hidden !important;
    }

    main#aplicaciones .section-heading {
        width: calc(100% - 96px) !important;
        max-width: 620px !important;
        margin: 0 auto 8px !important;
    }

    main#aplicaciones .section-heading h2 {
        font-size: 1.02rem !important;
        padding-bottom: 9px !important;
    }

    main#aplicaciones .section-heading h2::after {
        width: 36px !important;
        height: 3px !important;
    }

    main#aplicaciones .app-carousel.coverflow {
        height: 246px !important;
        min-height: 246px !important;
        max-height: 246px !important;
        perspective: 820px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        top: 14px !important;
        width: 190px !important;
        max-width: 190px !important;
        min-width: 190px !important;
        height: 218px !important;
        min-height: 218px !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-active {
        transform: translate3d(-50%, 0, 48px) rotateY(0deg) scale(1) !important;
        box-shadow: 0 22px 45px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.88) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        transform: translate3d(calc(-50% - 126px), 6px, -76px) rotateY(44deg) scale(.70) !important;
        opacity: .46 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        transform: translate3d(calc(-50% + 126px), 6px, -76px) rotateY(-44deg) scale(.70) !important;
        opacity: .46 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left {
        transform: translate3d(calc(-50% - 198px), 12px, -160px) rotateY(58deg) scale(.52) !important;
        opacity: .12 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right {
        transform: translate3d(calc(-50% + 198px), 12px, -160px) rotateY(-58deg) scale(.52) !important;
        opacity: .12 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 18px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .88rem !important;
        line-height: 1.08 !important;
        min-height: 30px !important;
        margin-bottom: 7px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .64rem !important;
        line-height: 1.32 !important;
        min-height: 44px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer {
        min-height: 22px !important;
        font-size: .62rem !important;
    }

    .portal-footer {
        height: 72px !important;
        width: calc(100% - 120px) !important;
        max-width: 560px !important;
        margin: 4px auto 22px !important;
        border-radius: 22px !important;
    }
}

/* =========================================================
   Ajuste v8: telefono horizontal con el MISMO formato mobile vertical.
   - Mantiene coverflow 3D y swipe.
   - Laterales centran la card; central abre la aplicacion via JS existente.
   - Cards compactas para landscape sin verse gigantes.
   ========================================================= */
@media (max-width: 980px) and (orientation: landscape) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .page-frame {
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 0 0 28px 28px !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, #fff1f2 0%, #ffffff 45%, #ffffff 100%) !important;
    }

    .page-frame::before {
        background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.94) 42%, #ffffff 100%), url('/img/fondo-rojo-panal.png') right top / 330px auto no-repeat !important;
        opacity: 1 !important;
    }

    .page-frame::after {
        display: none !important;
    }

    .hero-logo {
        left: max(20px, env(safe-area-inset-left)) !important;
        right: auto !important;
        top: 14px !important;
        width: 116px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 18px !important;
        background: #ed1c24 !important;
        box-shadow: 0 12px 28px rgba(237,28,36,.22) !important;
        transform: none !important;
    }

    .hero-logo::before,
    .hero-logo::after {
        display: none !important;
    }

    .hero-logo img {
        height: 27px !important;
        max-width: 90px !important;
        object-fit: contain !important;
        filter: none !important;
    }

    .hero-shell {
        width: min(560px, calc(100% - 72px)) !important;
        margin: 0 auto !important;
        padding-top: 74px !important;
        padding-bottom: 14px !important;
        gap: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-copy h1 {
        max-width: 300px !important;
        font-size: clamp(2rem, 6vw, 2.8rem) !important;
        line-height: .92 !important;
        letter-spacing: -.08em !important;
        margin: 0 !important;
    }

    .hero-copy p {
        max-width: 420px !important;
        margin-top: 10px !important;
        font-size: .82rem !important;
        line-height: 1.38 !important;
    }

    .hero-tools {
        max-width: 430px !important;
        margin-top: 12px !important;
        gap: 9px !important;
    }

    .search-box,
    .btn-primary-hero {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 16px !important;
    }

    .search-box {
        padding: 0 16px !important;
    }

    .search-box input {
        font-size: .82rem !important;
    }

    .btn-primary-hero {
        justify-content: center !important;
        font-size: .86rem !important;
        box-shadow: 0 14px 28px rgba(237,28,36,.22) !important;
    }

    .hero-showcase {
        min-height: 128px !important;
        margin-top: 2px !important;
        display: block !important;
    }

    .hero-showcase::before {
        display: none !important;
    }

    .kpi-orbit {
        width: min(330px, 100%) !important;
        height: 128px !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    .kpi-main,
    .kpi-card.teal {
        width: 142px !important;
        max-width: 142px !important;
        height: 104px !important;
        padding: 14px 14px !important;
        border-radius: 20px !important;
        box-shadow: 0 18px 38px rgba(16,24,40,.11) !important;
    }

    .kpi-main {
        left: 8px !important;
        top: 8px !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(-8deg) !important;
        z-index: 3 !important;
    }

    .kpi-card.teal {
        right: 8px !important;
        left: auto !important;
        top: 18px !important;
        bottom: auto !important;
        transform: rotate(8deg) !important;
        z-index: 2 !important;
    }

    .kpi-card strong {
        font-size: 3.05rem !important;
        line-height: .82 !important;
    }

    .kpi-card small {
        margin-top: 10px !important;
        font-size: .55rem !important;
        line-height: 1.12 !important;
        letter-spacing: .11em !important;
    }

    main#aplicaciones.content-shell {
        width: 100% !important;
        margin-top: 0 !important;
        padding: 18px 0 0 !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, #eef4f8 0%, #ffffff 48%, #ffffff 100%) !important;
    }

    main#aplicaciones .section-heading {
        width: min(560px, calc(100% - 72px)) !important;
        margin: 0 auto 10px !important;
        padding: 0 !important;
        min-height: auto !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    main#aplicaciones .section-heading h2 {
        color: #103b67 !important;
        font-size: 1.08rem !important;
        line-height: 1.08 !important;
        letter-spacing: -.05em !important;
        position: relative !important;
        padding-bottom: 10px !important;
    }

    main#aplicaciones .section-heading h2::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 38px !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: #ed1c24 !important;
    }

    main#aplicaciones .view-actions,
    main#aplicaciones #btnVistaTodo,
    main#aplicaciones #btnVistaCover,
    main#aplicaciones .cover-arrows {
        display: none !important;
    }

    main#aplicaciones .app-carousel.coverflow {
        position: relative !important;
        display: block !important;
        height: 262px !important;
        min-height: 262px !important;
        max-height: 262px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        perspective: 900px !important;
        perspective-origin: center center !important;
        transform-style: preserve-3d !important;
        scroll-snap-type: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        contain: layout paint !important;
        touch-action: pan-y !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        position: absolute !important;
        top: 18px !important;
        left: 50% !important;
        display: flex !important;
        flex: none !important;
        width: 190px !important;
        max-width: 190px !important;
        min-width: 190px !important;
        height: 220px !important;
        min-height: 220px !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 0 !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        contain: paint !important;
        transition: transform .34s cubic-bezier(.22,.72,.22,1), opacity .24s ease !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-active {
        opacity: 1 !important;
        z-index: 10 !important;
        transform: translate3d(-50%, 0, 52px) rotateY(0deg) scale(1) !important;
        box-shadow: 0 24px 48px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.88) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        opacity: .50 !important;
        z-index: 4 !important;
        transform: translate3d(calc(-50% - 132px), 7px, -76px) rotateY(42deg) scale(.72) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        opacity: .50 !important;
        z-index: 4 !important;
        transform: translate3d(calc(-50% + 132px), 7px, -76px) rotateY(-42deg) scale(.72) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left {
        opacity: .14 !important;
        z-index: 1 !important;
        transform: translate3d(calc(-50% - 210px), 14px, -160px) rotateY(58deg) scale(.54) !important;
        pointer-events: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right {
        opacity: .14 !important;
        z-index: 1 !important;
        transform: translate3d(calc(-50% + 210px), 14px, -160px) rotateY(-58deg) scale(.54) !important;
        pointer-events: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover,
    main#aplicaciones .app-carousel.coverflow .cover-card.d-none {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate3d(-50%, 18px, -260px) scale(.50) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-bg {
        opacity: .58 !important;
        transform: none !important;
        filter: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 18px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .88rem !important;
        line-height: 1.08 !important;
        min-height: 30px !important;
        margin-bottom: 7px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .64rem !important;
        line-height: 1.32 !important;
        min-height: 44px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer {
        min-height: 22px !important;
        font-size: .62rem !important;
    }

    .portal-footer {
        width: min(520px, calc(100% - 96px)) !important;
        height: 72px !important;
        margin: 4px auto 22px !important;
        border-radius: 22px !important;
    }
}

/* =========================================================
   Version 2026-05-19: coverflow uniforme en todos los dispositivos
   - Autoplay habilitado tambien en movil/tablet desde Index.cshtml
   - KPIs consistentes
   - Cards con mas aire para que el texto no quede pegado
   ========================================================= */

/* Mas aire interno y texto legible en cualquier vista */
.app-card,
.cover-card,
.app-carousel.view-all .cover-card {
    padding: clamp(22px, 2.4vw, 32px) !important;
}

.app-card-body,
.cover-card .app-card-body,
.cover-card.tipo-1 .app-card-body,
.cover-card.tipo-2 .app-card-body,
.app-carousel.view-all .cover-card.tipo-1 .app-card-body,
.app-carousel.view-all .cover-card.tipo-2 .app-card-body {
    padding-top: clamp(26px, 3vw, 40px) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.app-card h3,
.cover-card h3 {
    margin-bottom: 14px !important;
    line-height: 1.14 !important;
    text-wrap: balance;
}

.app-card p,
.cover-card p {
    line-height: 1.68 !important;
    text-wrap: pretty;
}

.app-card-footer {
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #94a3b8;
    font-weight: 800;
    font-size: .82rem;
}

/* KPIs: misma composicion en tablet y telefono, solo escalada */
@media (max-width: 980px) {
    .hero-showcase {
        min-height: 300px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-showcase::before {
        display: block !important;
        inset: 18px 10px 18px 10px !important;
        opacity: .42 !important;
    }

    .kpi-orbit {
        width: min(420px, 100%) !important;
        height: 280px !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    .kpi-main,
    .kpi-card.teal {
        position: absolute !important;
        width: min(210px, 48%) !important;
        max-width: 210px !important;
        height: 176px !important;
        min-height: 176px !important;
        padding: 28px !important;
        border-radius: 34px !important;
    }

    .kpi-main {
        left: 0 !important;
        top: 8px !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(-3deg) !important;
    }

    .kpi-card.teal {
        right: 0 !important;
        left: auto !important;
        top: auto !important;
        bottom: 4px !important;
        transform: rotate(3deg) !important;
    }

    .kpi-card strong {
        font-size: clamp(4.2rem, 10vw, 5.4rem) !important;
    }

    .kpi-card small {
        margin-top: 18px !important;
        font-size: .72rem !important;
        line-height: 1.22 !important;
    }

    /* Coverflow real tambien en tablet: no se aplana a lista horizontal */
    main#aplicaciones .app-carousel.coverflow,
    .app-carousel.coverflow {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        padding: 0 !important;
        overflow: hidden !important;
        perspective: 1200px !important;
        perspective-origin: center center !important;
        transform-style: preserve-3d !important;
        scroll-snap-type: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        touch-action: pan-y !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        display: flex !important;
        flex: none !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        height: 315px !important;
        min-height: 315px !important;
        margin: 0 !important;
        border-radius: 30px !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 0 !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        backface-visibility: hidden !important;
        transition: transform .38s cubic-bezier(.22,.72,.22,1), opacity .26s ease, filter .26s ease !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    .app-carousel.coverflow .cover-card.is-active {
        opacity: 1 !important;
        z-index: 20 !important;
        filter: none !important;
        transform: translate3d(-50%, 0, 86px) rotateY(0deg) scale(1.02) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    .app-carousel.coverflow .cover-card.is-left {
        opacity: .58 !important;
        z-index: 8 !important;
        transform: translate3d(calc(-50% - 185px), 8px, -98px) rotateY(42deg) scale(.74) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    .app-carousel.coverflow .cover-card.is-right {
        opacity: .58 !important;
        z-index: 8 !important;
        transform: translate3d(calc(-50% + 185px), 8px, -98px) rotateY(-42deg) scale(.74) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    .app-carousel.coverflow .cover-card.is-far-left,
    .app-carousel.coverflow .cover-card.is-edge-left {
        opacity: .18 !important;
        z-index: 2 !important;
        transform: translate3d(calc(-50% - 300px), 16px, -210px) rotateY(58deg) scale(.54) !important;
        pointer-events: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    .app-carousel.coverflow .cover-card.is-far-right,
    .app-carousel.coverflow .cover-card.is-edge-right {
        opacity: .18 !important;
        z-index: 2 !important;
        transform: translate3d(calc(-50% + 300px), 16px, -210px) rotateY(-58deg) scale(.54) !important;
        pointer-events: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover,
    .app-carousel.coverflow .cover-card.is-hidden-cover,
    .app-carousel.coverflow .cover-card.d-none {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate3d(-50%, 18px, -280px) scale(.48) !important;
    }
}

@media (max-width: 640px) {
    .hero-showcase {
        min-height: 168px !important;
    }

    .kpi-orbit {
        width: min(330px, 100%) !important;
        height: 148px !important;
    }

    .kpi-main,
    .kpi-card.teal {
        width: 150px !important;
        max-width: 150px !important;
        height: 112px !important;
        min-height: 112px !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .kpi-main {
        left: 6px !important;
        top: 8px !important;
        transform: rotate(-6deg) !important;
    }

    .kpi-card.teal {
        right: 6px !important;
        bottom: 8px !important;
        transform: rotate(6deg) !important;
    }

    .kpi-card strong {
        font-size: 3.2rem !important;
    }

    .kpi-card small {
        margin-top: 10px !important;
        font-size: .55rem !important;
    }

    main#aplicaciones .app-carousel.coverflow,
    .app-carousel.coverflow {
        height: 288px !important;
        min-height: 288px !important;
        max-height: 288px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        top: 18px !important;
        width: min(214px, 70vw) !important;
        max-width: min(214px, 70vw) !important;
        min-width: min(214px, 70vw) !important;
        height: 236px !important;
        min-height: 236px !important;
        padding: 18px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    .app-carousel.coverflow .cover-card.is-left {
        transform: translate3d(calc(-50% - 140px), 7px, -86px) rotateY(42deg) scale(.70) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    .app-carousel.coverflow .cover-card.is-right {
        transform: translate3d(calc(-50% + 140px), 7px, -86px) rotateY(-42deg) scale(.70) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    .app-carousel.coverflow .cover-card.is-far-left,
    .app-carousel.coverflow .cover-card.is-edge-left {
        transform: translate3d(calc(-50% - 220px), 14px, -160px) rotateY(58deg) scale(.50) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    .app-carousel.coverflow .cover-card.is-far-right,
    .app-carousel.coverflow .cover-card.is-edge-right {
        transform: translate3d(calc(-50% + 220px), 14px, -160px) rotateY(-58deg) scale(.50) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 22px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .96rem !important;
        min-height: 34px !important;
        margin-bottom: 8px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .68rem !important;
        line-height: 1.42 !important;
    }
}

/* =========================================================
   Version 2026-05-19-v2: ajustes solicitados
   - Botones visibles en la barra de Aplicaciones Silanes
   - Coverflow 3D tambien en iPad/tablet
   - Mas aire y mejor legibilidad en textos de cards
   ========================================================= */

main#aplicaciones .section-heading {
    gap: 12px !important;
}

main#aplicaciones .view-actions,
main#aplicaciones .cover-arrows {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

main#aplicaciones #btnVistaTodo,
main#aplicaciones #btnVistaCover,
main#aplicaciones .cover-arrows button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

main#aplicaciones .view-mode-button {
    min-width: 42px !important;
    height: 36px !important;
    padding: 0 11px !important;
    border-radius: 14px !important;
}

main#aplicaciones .cover-arrows button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 13px !important;
}

main#aplicaciones .view-mode-button span {
    display: none !important;
}

main#aplicaciones .app-card,
main#aplicaciones .cover-card {
    padding: 24px 24px 22px !important;
}

main#aplicaciones .cover-card .app-card-body,
main#aplicaciones .cover-card.tipo-1 .app-card-body,
main#aplicaciones .cover-card.tipo-2 .app-card-body {
    padding: 34px 4px 0 !important;
}

main#aplicaciones .cover-card h3 {
    margin: 0 0 14px !important;
    line-height: 1.16 !important;
    letter-spacing: -.02em !important;
}

main#aplicaciones .cover-card p {
    margin: 0 !important;
    line-height: 1.62 !important;
    letter-spacing: -.01em !important;
}

@media (max-width: 980px) {
    main#aplicaciones .section-heading {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-inline: 0 !important;
    }

    main#aplicaciones .section-heading h2 {
        white-space: nowrap !important;
    }

    main#aplicaciones .view-actions,
    main#aplicaciones .cover-arrows {
        display: flex !important;
    }

    main#aplicaciones .app-carousel.coverflow {
        position: relative !important;
        display: block !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        overflow: hidden !important;
        perspective: 1250px !important;
        transform-style: preserve-3d !important;
        padding: 0 !important;
        touch-action: pan-y !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        position: absolute !important;
        left: 50% !important;
        top: 30px !important;
        width: 310px !important;
        min-width: 310px !important;
        max-width: 310px !important;
        height: 330px !important;
        min-height: 330px !important;
        padding: 28px 28px 24px !important;
        margin: 0 !important;
        opacity: 0 !important;
        display: flex !important;
        pointer-events: auto !important;
        transform-origin: center center !important;
        transition: transform .38s cubic-bezier(.22,.72,.22,1), opacity .25s ease, filter .25s ease !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-active {
        opacity: 1 !important;
        z-index: 30 !important;
        transform: translate3d(-50%, 0, 90px) rotateY(0deg) scale(1.02) !important;
        filter: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        opacity: .60 !important;
        z-index: 12 !important;
        transform: translate3d(calc(-50% - 190px), 8px, -95px) rotateY(42deg) scale(.74) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        opacity: .60 !important;
        z-index: 12 !important;
        transform: translate3d(calc(-50% + 190px), 8px, -95px) rotateY(-42deg) scale(.74) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left {
        opacity: .18 !important;
        z-index: 3 !important;
        transform: translate3d(calc(-50% - 310px), 16px, -210px) rotateY(58deg) scale(.54) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right {
        opacity: .18 !important;
        z-index: 3 !important;
        transform: translate3d(calc(-50% + 310px), 16px, -210px) rotateY(-58deg) scale(.54) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover,
    main#aplicaciones .app-carousel.coverflow .cover-card.d-none {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate3d(-50%, 16px, -260px) scale(.48) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-body {
        padding-top: 38px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3 {
        font-size: 1.24rem !important;
        min-height: auto !important;
        margin-bottom: 14px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p {
        font-size: .82rem !important;
        line-height: 1.6 !important;
        min-height: auto !important;
    }
}

@media (max-width: 640px) {
    main#aplicaciones .section-heading {
        padding: 0 16px !important;
    }

    main#aplicaciones .section-heading h2 {
        font-size: clamp(1.02rem, 4.4vw, 1.22rem) !important;
    }

    main#aplicaciones .view-actions {
        gap: 6px !important;
    }

    main#aplicaciones .view-mode-button {
        width: 34px !important;
        min-width: 34px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    main#aplicaciones .cover-arrows button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        border-radius: 12px !important;
    }

    main#aplicaciones .app-carousel.coverflow {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        top: 22px !important;
        width: min(254px, 72vw) !important;
        min-width: min(254px, 72vw) !important;
        max-width: min(254px, 72vw) !important;
        height: 266px !important;
        min-height: 266px !important;
        padding: 22px 22px 20px !important;
        border-radius: 26px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-active {
        transform: translate3d(-50%, 0, 62px) rotateY(0deg) scale(1) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        opacity: .52 !important;
        transform: translate3d(calc(-50% - 150px), 8px, -82px) rotateY(42deg) scale(.68) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        opacity: .52 !important;
        transform: translate3d(calc(-50% + 150px), 8px, -82px) rotateY(-42deg) scale(.68) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left {
        opacity: .14 !important;
        transform: translate3d(calc(-50% - 232px), 15px, -160px) rotateY(58deg) scale(.50) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right {
        opacity: .14 !important;
        transform: translate3d(calc(-50% + 232px), 15px, -160px) rotateY(-58deg) scale(.50) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-body {
        padding-top: 30px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3 {
        font-size: 1.04rem !important;
        line-height: 1.16 !important;
        margin-bottom: 10px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p {
        font-size: .72rem !important;
        line-height: 1.5 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer {
        padding-top: 12px !important;
        font-size: .66rem !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    main#aplicaciones .app-carousel.coverflow {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        top: 20px !important;
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        height: 248px !important;
        min-height: 248px !important;
        padding: 20px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        transform: translate3d(calc(-50% - 158px), 8px, -85px) rotateY(42deg) scale(.70) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        transform: translate3d(calc(-50% + 158px), 8px, -85px) rotateY(-42deg) scale(.70) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-body {
        padding-top: 28px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3 {
        font-size: 1rem !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p {
        font-size: .70rem !important;
        line-height: 1.46 !important;
    }
}


/* =========================================================
   Version 2026-05-19-v3
   - Quita el icono junto a Servicio externo / Aplicacion interna.
   - En Ver todos, fuerza cards con el mismo alto y mejor distribucion.
   ========================================================= */
main#aplicaciones .app-card-footer i,
main#aplicaciones .cover-card .app-card-footer i,
main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer i,
main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer i {
    display: none !important;
}

main#aplicaciones .app-card-footer {
    justify-content: flex-start !important;
}

main#aplicaciones .cover-card.tipo-1 .app-card-footer,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-footer,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer {
    justify-content: flex-start !important;
    text-align: left !important;
}

main#aplicaciones .cover-card.tipo-2 .app-card-footer,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
    justify-content: flex-end !important;
    text-align: right !important;
}

main#aplicaciones .app-carousel.view-all {
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
}

main#aplicaciones .app-carousel.view-all .cover-card,
main#aplicaciones .app-carousel.view-all .cover-card.is-active,
main#aplicaciones .app-carousel.view-all .cover-card.is-left,
main#aplicaciones .app-carousel.view-all .cover-card.is-right,
main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right {
    height: 315px !important;
    min-height: 315px !important;
    max-height: 315px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 30px 28px 24px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 155px !important;
    padding-top: 26px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card h3 {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card p {
    min-height: 74px !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 16px !important;
}

@media (max-width: 980px) {
    main#aplicaciones .app-carousel.view-all .cover-card,
    main#aplicaciones .app-carousel.view-all .cover-card.is-active,
    main#aplicaciones .app-carousel.view-all .cover-card.is-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
}

/* =========================================================
   Ajuste v4 - móvil vertical y alineaciones de tarjetas
   - Tipo 1 (Aplicación interna): texto izquierda, footer derecha.
   - Tipo 2 (Servicio externo): texto derecha, footer izquierda.
   - Modo Ver todos: tarjetas con mismo alto y mejor composición.
   - Móvil vertical: cards más limpias, con menos encabezado rojo y más aire.
   ========================================================= */

main#aplicaciones .app-card-footer i,
main#aplicaciones .cover-card .app-card-footer i,
main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer i,
main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer i {
    display: none !important;
}

main#aplicaciones .cover-card.tipo-1 .app-card-body,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-body {
    text-align: left !important;
    align-items: flex-start !important;
}

main#aplicaciones .cover-card.tipo-2 .app-card-body,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
    text-align: right !important;
    align-items: flex-end !important;
}

main#aplicaciones .cover-card.tipo-1 .app-card-footer,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-footer,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer {
    justify-content: flex-end !important;
    text-align: right !important;
}

main#aplicaciones .cover-card.tipo-2 .app-card-footer,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
    justify-content: flex-start !important;
    text-align: left !important;
}

main#aplicaciones .cover-card.tipo-1 .app-card-footer span,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-footer span,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer span {
    text-align: right !important;
}

main#aplicaciones .cover-card.tipo-2 .app-card-footer span,
main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer span,
main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer span {
    text-align: left !important;
}

/* Ver todos: grilla estable y todas las cards con el mismo alto */
main#aplicaciones .app-carousel.view-all {
    align-items: stretch !important;
}

main#aplicaciones .app-carousel.view-all .cover-card {
    height: 310px !important;
    min-height: 310px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 26px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-header {
    flex: 0 0 76px !important;
    min-height: 76px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding-top: 22px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card h3 {
    min-height: 46px !important;
    margin: 0 !important;
}

main#aplicaciones .app-carousel.view-all .cover-card p {
    margin: 0 !important;
    min-height: 84px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
    flex: 0 0 28px !important;
    min-height: 28px !important;
    margin-top: auto !important;
}

/* Móvil vertical: cards más compactas, legibles y con proporción más natural */
@media (max-width: 640px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.view-all {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 8px 24px 28px !important;
        overflow: visible !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 220px !important;
        min-height: 220px !important;
        padding: 22px 24px !important;
        border-radius: 30px !important;
        box-shadow: 0 20px 48px rgba(15, 35, 58, .10) !important;
        overflow: hidden !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-header {
        flex: 0 0 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
        padding-top: 14px !important;
        gap: 10px !important;
        min-height: 0 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card h3 {
        font-size: 1.05rem !important;
        line-height: 1.08 !important;
        min-height: 24px !important;
        margin: 0 !important;
        max-width: 92% !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card p {
        font-size: .78rem !important;
        line-height: 1.42 !important;
        min-height: 44px !important;
        max-height: 66px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
        min-height: 24px !important;
        flex-basis: 24px !important;
        font-size: .72rem !important;
        opacity: .78 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-bg {
        background-position: left top !important;
        opacity: .58 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-bg {
        background-position: right top !important;
        opacity: .70 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-body {
        text-align: left !important;
        align-items: flex-start !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
        text-align: right !important;
        align-items: flex-end !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer {
        justify-content: flex-end !important;
        text-align: right !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Coverflow vertical: menos amontonado en la card activa */
    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
        height: 286px !important;
        min-height: 286px !important;
        padding: 24px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header {
        min-height: 56px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 22px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: 1.05rem !important;
        line-height: 1.08 !important;
        min-height: 34px !important;
        margin-bottom: 10px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .74rem !important;
        line-height: 1.42 !important;
        min-height: 54px !important;
    }
}

@media (max-width: 390px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.view-all {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card {
        height: 216px !important;
        min-height: 216px !important;
    }
}

/* =========================================================
   Ajuste v5 - Ver todos estable + movil vertical horizontal
   - Solo afecta modo Ver todos.
   - Desktop/tablet: todas las tarjetas tienen el mismo alto y el texto visible.
   - Movil vertical: tarjetas horizontales, mismo tamano y scroll natural con el dedo.
   ========================================================= */

main#aplicaciones .app-carousel.view-all {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    grid-auto-rows: 350px !important;
    align-items: stretch !important;
    gap: 26px !important;
    padding-bottom: 42px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card,
main#aplicaciones .app-carousel.view-all .cover-card.is-active,
main#aplicaciones .app-carousel.view-all .cover-card.is-left,
main#aplicaciones .app-carousel.view-all .cover-card.is-right,
main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right,
main#aplicaciones .app-carousel.view-all .cover-card.is-hidden-cover {
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 28px 30px 24px !important;
    margin: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: hidden !important;
}

main#aplicaciones .app-carousel.view-all .cover-card:hover {
    transform: translateY(-8px) !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-header {
    flex: 0 0 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-top: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

main#aplicaciones .app-carousel.view-all .cover-card h3 {
    min-height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    font-size: 1.16rem !important;
    line-height: 1.12 !important;
}

main#aplicaciones .app-carousel.view-all .cover-card p {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    font-size: .82rem !important;
    line-height: 1.42 !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    font-size: .78rem !important;
}

@media (max-width: 980px) and (min-width: 641px) {
    main#aplicaciones .app-carousel.view-all {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
        grid-auto-rows: 330px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card,
    main#aplicaciones .app-carousel.view-all .cover-card.is-active,
    main#aplicaciones .app-carousel.view-all .cover-card.is-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-hidden-cover {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
        padding: 26px 24px 22px !important;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.view-all {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 8px 18px 34px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card,
    main#aplicaciones .app-carousel.view-all .cover-card.is-active,
    main#aplicaciones .app-carousel.view-all .cover-card.is-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-hidden-cover {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 154px !important;
        min-height: 154px !important;
        max-height: 154px !important;
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        column-gap: 16px !important;
        row-gap: 4px !important;
        padding: 18px 18px 16px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: 0 16px 38px rgba(15,35,58,.10), inset 0 1px 0 rgba(255,255,255,.82) !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-header {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width: 104px !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 18px !important;
        background: rgba(134,0,1,.12) !important;
        position: relative !important;
        z-index: 2 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-header {
        background: linear-gradient(180deg, rgba(134,0,1,.72), rgba(134,0,1,.58)) !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-header {
        background: rgba(248,250,252,.76) !important;
        border: 1px solid rgba(134,0,1,.10) !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        gap: 7px !important;
        justify-content: center !important;
        align-self: stretch !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card h3 {
        font-size: 1rem !important;
        line-height: 1.08 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card p {
        font-size: .74rem !important;
        line-height: 1.28 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-height: 18px !important;
        flex-basis: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: .68rem !important;
        line-height: 1 !important;
        opacity: .80 !important;
        align-self: end !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer {
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body,
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
        text-align: right !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer span {
        text-align: left !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer span {
        text-align: right !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-bg {
        background: url('/img/fondo-blanco.png') left center / 260px auto no-repeat !important;
        opacity: .36 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-bg {
        background: url('/img/fondo-rojo-panal.png') right center / 260px auto no-repeat !important;
        opacity: .42 !important;
    }
}

@media (max-width: 390px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.view-all .cover-card,
    main#aplicaciones .app-carousel.view-all .cover-card.is-active,
    main#aplicaciones .app-carousel.view-all .cover-card.is-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-hidden-cover {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        height: 158px !important;
        min-height: 158px !important;
        max-height: 158px !important;
        column-gap: 14px !important;
        padding: 16px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-header {
        width: 92px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card h3 {
        font-size: .94rem !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card p {
        font-size: .69rem !important;
        line-height: 1.22 !important;
    }
}

/* =========================================================
   Version 2026-05-19-v7: ajuste móvil vertical
   - Evita que los botones de la barra Aplicaciones Silanes se salgan.
   - Hace la barra más alta y usable en iPhone/Android vertical.
   - Reduce el bloque de contadores para que no invada el encabezado.
   - Mantiene Ver todos en formato horizontal compacto solo en móvil vertical.
   ========================================================= */

@media (max-width: 640px) and (orientation: portrait) {
    main#aplicaciones.section-heading,
    main#aplicaciones .section-heading {
        width: calc(100% - 28px) !important;
        margin: 0 auto 16px !important;
        padding: 14px 14px 12px !important;
        min-height: 92px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    main#aplicaciones .section-heading > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    main#aplicaciones .section-heading h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        font-size: clamp(1.14rem, 5.1vw, 1.36rem) !important;
        line-height: 1.05 !important;
    }

    main#aplicaciones .view-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    main#aplicaciones .cover-arrows {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    main#aplicaciones .view-mode-button,
    main#aplicaciones .cover-arrows button {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        flex: 0 0 34px !important;
        font-size: .86rem !important;
    }

    main#aplicaciones .view-mode-button i,
    main#aplicaciones .cover-arrows button i {
        font-size: .92rem !important;
        line-height: 1 !important;
    }

    main#aplicaciones .view-mode-button span {
        display: none !important;
    }

    /* Card activa un poco más baja para compensar la barra más gruesa */
    main#aplicaciones .app-carousel.coverflow {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;
        margin-top: 4px !important;
        overflow: hidden !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        top: 18px !important;
        width: min(246px, 70vw) !important;
        min-width: min(246px, 70vw) !important;
        max-width: min(246px, 70vw) !important;
        height: 256px !important;
        min-height: 256px !important;
        max-height: 256px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-left {
        transform: translate3d(calc(-50% - 134px), 7px, -82px) rotateY(42deg) scale(.66) !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.is-right {
        transform: translate3d(calc(-50% + 134px), 7px, -82px) rotateY(-42deg) scale(.66) !important;
    }

    /* Contadores del hero más compactos en móvil vertical para que no tapen la zona inferior */
    .hero-showcase,
    .showcase-visual {
        overflow: hidden !important;
    }

    .kpi-orbit {
        transform: scale(.86) !important;
        transform-origin: center top !important;
        margin-top: 8px !important;
        min-height: 205px !important;
    }

    .kpi-main,
    .kpi-card.teal {
        box-shadow: 0 20px 46px rgba(15, 35, 58, .12) !important;
    }
}

@media (max-width: 390px) and (orientation: portrait) {
    main#aplicaciones .section-heading {
        width: calc(100% - 20px) !important;
        padding: 12px 10px !important;
        min-height: 88px !important;
    }

    main#aplicaciones .section-heading h2 {
        font-size: clamp(1.03rem, 5vw, 1.18rem) !important;
    }

    main#aplicaciones .view-actions,
    main#aplicaciones .cover-arrows {
        gap: 5px !important;
    }

    main#aplicaciones .view-mode-button,
    main#aplicaciones .cover-arrows button {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        flex-basis: 30px !important;
        border-radius: 11px !important;
    }
}

/* =========================================================
   Version 2026-05-19-v8
   - Ver todos oculta flechas; carrusel las muestra por JS.
   - En movil vertical, Ver todos usa cards horizontales limpias sin cuadro lateral.
   - En desktop/tablet Ver todos sube titulo y descripcion para que respiren mejor.
   ========================================================= */

#coverArrows.d-none,
.cover-arrows.d-none {
    display: none !important;
}

/* Ver todos en pantallas no moviles: subir contenido de texto sin cambiar el alto uniforme */
@media (min-width: 641px) {
    main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
        padding-top: 8px !important;
        transform: translateY(-16px) !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card h3 {
        margin-top: 4px !important;
        margin-bottom: 12px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card p {
        margin-top: 0 !important;
    }
}

/* Solo movil vertical + Ver todos */
@media (max-width: 640px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.view-all {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: calc(100% - 28px) !important;
        max-width: 390px !important;
        margin: 0 auto !important;
        padding: 8px 0 26px !important;
        overflow: visible !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card,
    main#aplicaciones .app-carousel.view-all .cover-card.is-active,
    main#aplicaciones .app-carousel.view-all .cover-card.is-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-hidden-cover {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 132px !important;
        min-height: 132px !important;
        max-height: 132px !important;
        padding: 16px 18px 14px !important;
        border-radius: 22px !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        overflow: hidden !important;
        pointer-events: auto !important;
    }

    /* Oculta solo en esta vista el cuadro rojo/blanco lateral */
    main#aplicaciones .app-carousel.view-all .cover-card .app-card-header {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-bg {
        inset: 0 !important;
        opacity: .30 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-bg {
        background: url('/img/fondo-blanco.png') left center / 230px auto no-repeat !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-bg {
        background: url('/img/fondo-rojo-panal.png') right center / 230px auto no-repeat !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-body {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 2 !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card h3 {
        font-size: .98rem !important;
        line-height: 1.08 !important;
        min-height: 0 !important;
        margin: 0 0 7px !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card p {
        font-size: .70rem !important;
        line-height: 1.26 !important;
        min-height: 0 !important;
        max-height: 2.55em !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        min-height: 16px !important;
        padding: 0 !important;
        margin: 8px 0 0 !important;
        font-size: .66rem !important;
        line-height: 1 !important;
        opacity: .82 !important;
        z-index: 2 !important;
    }

    /* Internas: texto izquierda, footer derecha */
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-body {
        text-align: left !important;
        align-items: flex-start !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-1 .app-card-footer {
        justify-content: flex-end !important;
        text-align: right !important;
    }

    /* Externas: texto derecha, footer izquierda */
    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-body {
        text-align: right !important;
        align-items: flex-end !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer span {
        display: block !important;
        max-width: 100% !important;
    }
}

@media (max-width: 390px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.view-all .cover-card,
    main#aplicaciones .app-carousel.view-all .cover-card.is-active,
    main#aplicaciones .app-carousel.view-all .cover-card.is-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-far-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.view-all .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.view-all .cover-card.is-hidden-cover {
        height: 124px !important;
        min-height: 124px !important;
        max-height: 124px !important;
        padding: 14px 16px 12px !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card h3 {
        font-size: .92rem !important;
    }

    main#aplicaciones .app-carousel.view-all .cover-card p {
        font-size: .66rem !important;
    }
}

/* =========================================================
   Version 2026-05-19-v9
   - Refuerzo: las flechas se ocultan completamente en Ver todo.
   - JavaScript tambien aplica display:none !important para evitar overrides responsive.
   ========================================================= */
main#aplicaciones #coverArrows.d-none,
main#aplicaciones .cover-arrows.d-none,
main#aplicaciones #coverArrows[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

main#aplicaciones #coverArrows[aria-hidden="true"] button {
    display: none !important;
}

/* =========================================================
   Version 2026-05-19-v11-fix
   Coverflow movil vertical/horizontal: subir textos en cards
   Basado en el ZIP adjunto del usuario.
   Solo afecta vista Carrusel/Coverflow en movil y tablet.
   ========================================================= */
@media (max-width: 980px) {
    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        justify-content: flex-start !important;
        padding-top: 20px !important;
        padding-bottom: 18px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header {
        min-height: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 10px !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        min-height: auto !important;
        line-height: 1.08 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        margin-top: 0 !important;
        min-height: auto !important;
        line-height: 1.34 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer {
        margin-top: auto !important;
        padding-top: 8px !important;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.coverflow {
        min-height: 350px !important;
        padding-top: 10px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        height: 310px !important;
        min-height: 310px !important;
        padding: 18px 22px 16px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header {
        min-height: 10px !important;
        height: 10px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 8px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .98rem !important;
        margin-bottom: 7px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .70rem !important;
        line-height: 1.34 !important;
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    main#aplicaciones .app-carousel.coverflow {
        min-height: 330px !important;
        padding-top: 10px !important;
        padding-bottom: 28px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        height: 292px !important;
        min-height: 292px !important;
        padding: 18px 22px 16px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header {
        min-height: 8px !important;
        height: 8px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 6px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .96rem !important;
        margin-bottom: 6px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .68rem !important;
        line-height: 1.30 !important;
    }
}


/* =========================================================
   Version 2026-05-19-v12
   Correccion: el texto del coverflow movil habia subido demasiado.
   Se deja en una posicion intermedia para que no se corte y conserve el diseno.
   Solo afecta vista Carrusel/Coverflow en movil vertical y horizontal.
   ========================================================= */
@media (max-width: 640px) and (orientation: portrait) {
    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        padding: 20px 22px 18px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header {
        min-height: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 26px !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .98rem !important;
        line-height: 1.08 !important;
        margin-top: 0 !important;
        margin-bottom: 7px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .70rem !important;
        line-height: 1.32 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    main#aplicaciones .app-carousel.coverflow .cover-card,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-active,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-far-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-left,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-edge-right,
    main#aplicaciones .app-carousel.coverflow .cover-card.is-hidden-cover {
        padding: 18px 22px 16px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card .app-card-header {
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 .app-card-body,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-body {
        padding-top: 46px !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 h3,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 h3 {
        font-size: .96rem !important;
        line-height: 1.08 !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    main#aplicaciones .app-carousel.coverflow .cover-card p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-1 p,
    main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 p {
        font-size: .68rem !important;
        line-height: 1.30 !important;
        margin-top: 0 !important;
    }
}

/* =========================================================
   Version 2026-05-19-v14
   Fix definitivo de contadores en movil vertical/horizontal:
   - Evita encimado con buscador/boton.
   - Centra el bloque de contadores; no se carga a la derecha.
   - Reduce tamano y separacion en pantallas chicas.
   ========================================================= */
@media (max-width: 980px) {
    .page-frame {
        overflow: hidden !important;
    }

    .hero-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        justify-items: stretch !important;
        gap: 22px !important;
        width: min(100% - 34px, 760px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-bottom: 34px !important;
    }

    .hero-copy,
    .hero-tools,
    .hero-showcase {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
    }

    .hero-showcase {
        min-height: 174px !important;
        height: 174px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 2px auto 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .hero-showcase::before {
        inset: 8px 0 0 0 !important;
        border-radius: 30px !important;
        transform: none !important;
        opacity: .18 !important;
        background-size: cover !important;
    }

    .kpi-orbit {
        position: relative !important;
        width: min(330px, 100%) !important;
        height: 156px !important;
        margin: 0 auto !important;
        left: auto !important;
        right: auto !important;
        display: block !important;
        transform: none !important;
        overflow: visible !important;
    }

    .kpi-card,
    .kpi-main,
    .kpi-card.teal {
        position: absolute !important;
        width: 150px !important;
        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;
        padding: 18px 16px !important;
        border-radius: 24px !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }

    .kpi-main {
        left: 12px !important;
        top: 4px !important;
        z-index: 3 !important;
        transform: rotate(-5deg) !important;
    }

    .kpi-card.teal {
        right: 12px !important;
        left: auto !important;
        top: 26px !important;
        bottom: auto !important;
        z-index: 2 !important;
        transform: rotate(5deg) !important;
    }

    .kpi-card strong {
        font-size: 3.7rem !important;
        line-height: .82 !important;
        letter-spacing: -.08em !important;
    }

    .kpi-card small {
        font-size: .56rem !important;
        line-height: 1.16 !important;
        letter-spacing: .12em !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    .hero-shell {
        gap: 18px !important;
        padding-bottom: 28px !important;
    }

    .hero-tools {
        margin-bottom: 0 !important;
    }

    .hero-showcase {
        min-height: 158px !important;
        height: 158px !important;
        margin-top: 0 !important;
    }

    .kpi-orbit {
        width: min(292px, 100%) !important;
        height: 146px !important;
    }

    .kpi-card,
    .kpi-main,
    .kpi-card.teal {
        width: 132px !important;
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        padding: 15px 13px !important;
        border-radius: 22px !important;
    }

    .kpi-main {
        left: 10px !important;
        top: 6px !important;
    }

    .kpi-card.teal {
        right: 10px !important;
        top: 24px !important;
    }

    .kpi-card strong {
        font-size: 3.2rem !important;
    }

    .kpi-card small {
        font-size: .50rem !important;
        letter-spacing: .10em !important;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .kpi-orbit {
        width: 260px !important;
        height: 132px !important;
    }

    .kpi-card,
    .kpi-main,
    .kpi-card.teal {
        width: 116px !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        padding: 13px 11px !important;
        border-radius: 19px !important;
    }

    .kpi-main {
        left: 8px !important;
        top: 4px !important;
    }

    .kpi-card.teal {
        right: 8px !important;
        top: 22px !important;
    }

    .kpi-card strong {
        font-size: 2.75rem !important;
    }

    .kpi-card small {
        font-size: .45rem !important;
        line-height: 1.08 !important;
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    .hero-shell {
        grid-template-columns: minmax(0, 1fr) 250px !important;
        align-items: center !important;
        gap: 22px !important;
        width: min(100% - 52px, 760px) !important;
        padding-top: 104px !important;
        padding-bottom: 28px !important;
    }

    .hero-copy {
        min-width: 0 !important;
    }

    .hero-showcase {
        min-height: 140px !important;
        height: 140px !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .kpi-orbit {
        width: 230px !important;
        height: 126px !important;
    }

    .kpi-card,
    .kpi-main,
    .kpi-card.teal {
        width: 106px !important;
        height: 94px !important;
        min-height: 94px !important;
        max-height: 94px !important;
        padding: 12px 10px !important;
        border-radius: 18px !important;
    }

    .kpi-main {
        left: 4px !important;
        top: 4px !important;
    }

    .kpi-card.teal {
        right: 4px !important;
        top: 24px !important;
    }

    .kpi-card strong {
        font-size: 2.65rem !important;
    }

    .kpi-card small {
        font-size: .43rem !important;
        line-height: 1.08 !important;
        letter-spacing: .09em !important;
    }
}

/* =========================================================
   V15 FIX: contadores sin encimarse en movil vertical
   - Quita posiciones absolutas/rotacion de KPIs en portrait.
   - Los muestra como 2 mini cards separadas y centradas.
   ========================================================= */
@media (max-width: 640px) and (orientation: portrait) {
    .hero-showcase {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 130px !important;
        height: 130px !important;
        margin-top: 2px !important;
        overflow: visible !important;
    }

    .hero-showcase::before {
        inset: 8px 10px 8px 10px !important;
        opacity: .12 !important;
        transform: none !important;
    }

    .kpi-orbit {
        position: relative !important;
        width: min(238px, 100%) !important;
        height: auto !important;
        min-height: 104px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
        justify-content: center !important;
        overflow: visible !important;
        transform: none !important;
    }

    .kpi-orbit .kpi-card,
    .kpi-orbit .kpi-main,
    .kpi-orbit .kpi-card.teal {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
        margin: 0 !important;
        padding: 13px 11px !important;
        border-radius: 20px !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }

    .kpi-orbit .kpi-card strong {
        font-size: 2.85rem !important;
        line-height: .82 !important;
        letter-spacing: -.07em !important;
    }

    .kpi-orbit .kpi-card small {
        font-size: .45rem !important;
        line-height: 1.08 !important;
        letter-spacing: .08em !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .kpi-orbit {
        width: min(216px, 100%) !important;
        gap: 8px !important;
        min-height: 96px !important;
    }

    .kpi-orbit .kpi-card,
    .kpi-orbit .kpi-main,
    .kpi-orbit .kpi-card.teal {
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
        padding: 12px 10px !important;
        border-radius: 18px !important;
    }

    .kpi-orbit .kpi-card strong {
        font-size: 2.55rem !important;
    }

    .kpi-orbit .kpi-card small {
        font-size: .40rem !important;
        letter-spacing: .06em !important;
    }
}