.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);
    }

.portal-footer {
    width: min(1440px, calc(100% - 36px));
    margin: 0 auto 22px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 28px 34px;
    color: #fff;
    background: linear-gradient(135deg, #101828, #310005);
    border-radius: 0 0 30px 30px;
}

    .portal-footer span:last-child {
        color: rgba(255,255,255,.64);
    }

@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, .portal-footer {
        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;
}

.app-card-footer {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #667085;
    font-size: .84rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

    .app-card-footer i {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 15px;
        background: #f2f4f7;
        color: #344054;
        transition: .22s ease;
    }

.app-card:hover .app-card-footer i {
    transform: translate(3px, -3px);
    background: var(--silanes-red);
    color: #fff;
}

.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;
}

.app-card-footer {
    font-size: .72rem;
}

.portal-footer {
    width: min(1220px, calc(100% - 44px));
    margin: 30px auto 70px;
    padding: 24px 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(17,24,39,.96), rgba(55,6,18,.96));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 22px 60px rgba(16,24,40,.14);
}

    .portal-footer div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .portal-footer strong {
        font-size: 1rem;
    }

    .portal-footer span {
        color: rgba(255,255,255,.72);
        font-weight: 700;
    }

.footer-year {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(255,255,255,.10);
    display: grid;
    place-items: center;
    color: #fff !important;
}

@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,
    .portal-footer {
        width: min(100% - 24px, 1220px);
    }

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

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

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

    .portal-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ===== 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);
}

.app-card-footer {
    margin-top: auto;
    padding-top: 24px;
}

.portal-footer {
    min-height: 112px;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
    border: 1px solid rgba(255,255,255,.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 24px 60px rgba(16,24,40,.08);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .footer-brand img {
        height: 42px;
        width: auto;
        object-fit: contain;
    }

    .footer-brand div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .footer-brand strong {
        color: #101828;
        font-size: 1rem;
        font-weight: 900;
    }

    .footer-brand span {
        color: #667085;
        font-size: .92rem;
    }

.footer-meta {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(143,0,4,.92), rgba(15,118,110,.82));
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(143,0,4,.18);
}

.footer-year {
    display: none;
}

@media(max-width:980px) {

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

    .portal-footer {
        gap: 20px;
    }
}

@media(max-width:640px) {

    .footer-brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-meta {
        width: 60px;
        height: 60px;
    }
}


/* ===== Final polish: ADN integrado, footer premium, móvil y cards alineadas ===== */

/* 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);
    }

/* Cards: footer de cada tarjeta alineado abajo */
.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;
    }

.app-card-footer {
    margin-top: auto !important;
}

/* Footer premium: fondo ADN, sin badge 2026 */
.portal-footer {
    width: min(1220px, calc(100% - 44px));
    margin: 34px auto 78px;
    min-height: 138px;
    padding: 0;
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,250,252,.92));
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 26px 70px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.8);
}

    .portal-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 48%, rgba(255,255,255,.62) 100%), url('/img/fondo-blanco-azul.png') right center / 520px auto no-repeat;
        opacity: .9;
        z-index: 0;
    }

    .portal-footer::after {
        content: "";
        position: absolute;
        right: -120px;
        top: -120px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(143,0,4,.16), transparent 64%);
        z-index: 0;
    }

.footer-content {
    position: relative;
    z-index: 2;
    min-height: 138px;
    padding: 34px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 22px;
}

    .footer-brand img {
        height: 48px;
        width: auto;
        display: block;
        object-fit: contain;
        filter: drop-shadow(0 12px 18px rgba(16,24,40,.10));
    }

    .footer-brand div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .footer-brand strong {
        color: #101828;
        font-size: 1.08rem;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .footer-brand span,
    .footer-copy span {
        color: #667085;
        font-size: .92rem;
        font-weight: 800;
    }

.footer-copy {
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(16,24,40,.06);
}

/* anula estilos previos del badge */
.footer-meta,
.footer-year {
    display: none !important;
}

/* 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;
    }

    .portal-footer {
        width: min(100% - 20px, 1220px);
        margin: 28px auto 42px;
        border-radius: 30px;
    }

        .portal-footer::before {
            background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)), url('/img/fondo-blanco-azul.png') right top / 420px auto no-repeat;
            opacity: .88;
        }

    .footer-content {
        min-height: 160px;
        padding: 30px 26px;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

        .footer-brand img {
            height: 44px;
            padding: 6px 10px;
            border-radius: 14px;
            background: rgba(255,255,255,.94);
        }

    .footer-copy {
        width: 100%;
        text-align: center;
    }
}


/* ===== Red band hero + compact cards + integrated footer ===== */

.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;
}

.app-card-footer {
    padding-top: 16px !important;
    margin-top: auto !important;
    font-size: .66rem !important;
}

    .app-card-footer i {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
    }

/* footer integrado, sobrio y ancho */
.portal-footer {
    width: min(1220px, calc(100% - 44px));
    margin: 28px auto 60px;
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 0 34px 34px !important;
    overflow: hidden;
    background: linear-gradient(90deg, #111827 0%, #2a0711 56%, #0f3f3d 100%) !important;
    border: none !important;
    box-shadow: 0 24px 60px rgba(16,24,40,.10) !important;
}

    .portal-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(17,24,39,.94), rgba(42,7,17,.88), rgba(15,63,61,.84)), url('/img/fondo-blanco-azul.png') right center / 460px auto no-repeat;
        opacity: 1;
    }

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

.footer-content {
    position: relative;
    z-index: 2;
    min-height: 88px !important;
    padding: 24px 34px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .footer-content > div {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .footer-content strong {
        color: #fff !important;
        font-size: 1rem;
        font-weight: 900;
    }

    .footer-content span,
    .footer-copy {
        color: rgba(255,255,255,.72) !important;
        font-weight: 750;
    }

.footer-copy {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}

/* anula footer viejo */
.footer-brand,
.footer-meta,
.footer-year {
    display: none !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;
        }

    .portal-footer {
        border-radius: 24px !important;
        margin-bottom: 38px;
    }

    .footer-content {
        min-height: 96px !important;
        align-items: flex-start;
        flex-direction: column;
        padding: 24px !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,
.app-card-footer {
    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;
}

.app-card-footer {
    margin-top: auto !important;
    padding-top: 28px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #667085;
    font-size: .72rem !important;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .10em;
}

    .app-card-footer i {
        width: 42px !important;
        height: 42px !important;
        border-radius: 15px !important;
        display: grid;
        place-items: center;
        background: #fff;
        color: #344054;
        box-shadow: 0 12px 26px rgba(16,24,40,.07);
        transition: .22s ease;
    }

.app-card:hover .app-card-footer i {
    transform: translate(3px,-3px);
    background: #860001;
    color: #fff;
}

/* FOOTER PREMIUM */
.portal-footer {
    width: min(1280px, calc(100% - 48px));
    margin: 18px auto 70px;
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(90deg, rgba(17,24,39,.98), rgba(58,7,18,.94), rgba(15,76,73,.88));
    box-shadow: 0 24px 70px rgba(16,24,40,.14);
    border: 1px solid rgba(255,255,255,.10);
}

    .portal-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(17,24,39,.94), rgba(58,7,18,.84) 54%, rgba(15,76,73,.70)), url('/img/fondo-rojo-panal.png') right center / 560px auto no-repeat;
        opacity: 1;
    }

.footer-content {
    position: relative;
    z-index: 2;
    min-height: 120px;
    padding: 34px 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.footer-brand {
    display: flex !important;
    align-items: center;
    gap: 20px;
}

    .footer-brand img {
        height: 48px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 12px 22px rgba(0,0,0,.30));
    }

    .footer-brand div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .footer-brand strong {
        color: #fff;
        font-size: 1.08rem;
        font-weight: 950;
    }

    .footer-brand span,
    .footer-copy {
        color: rgba(255,255,255,.72);
        font-weight: 800;
    }

.footer-copy {
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}

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

/* RESPONSIVE */
@media(max-width:980px) {
    .page-frame,
    .content-shell,
    .portal-footer {
        width: min(100% - 28px, 1280px);
    }

    .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,
    .portal-footer {
        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;
    }

    .portal-footer {
        border-radius: 30px;
        margin-bottom: 42px;
    }

    .footer-content {
        min-height: 152px;
        padding: 30px 26px;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

        .footer-brand img {
            height: 44px;
        }
}


/* =========================================================
   Ajuste final: logo limpio, coverflow tipo iTunes y footer premium
   ========================================================= */

/* 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;
    }

/* Footer menos pesado y más elegante */
.portal-footer {
    width: min(1280px, calc(100% - 48px)) !important;
    margin: 22px auto 72px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 112px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    box-shadow: 0 22px 60px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

    .portal-footer::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 58%, rgba(255,255,255,.54) 100%), url('/img/fondo-rojo-panal.png') right center / 520px auto no-repeat !important;
        opacity: .96 !important;
        z-index: 0 !important;
    }

    .portal-footer::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 7px !important;
        background: linear-gradient(180deg,#860001,#0f766e) !important;
        display: block !important;
        z-index: 2 !important;
    }

.footer-content {
    position: relative !important;
    z-index: 3 !important;
    min-height: 112px !important;
    padding: 28px 36px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 20px !important;
}

.footer-mark {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(134,0,1,.96), rgba(15,118,110,.86));
    display: grid;
    place-items: center;
    box-shadow: 0 16px 34px rgba(134,0,1,.18);
}

    .footer-mark span {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        background: rgba(255,255,255,.92);
        display: block;
    }

.footer-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .footer-text strong {
        color: #101828 !important;
        font-size: 1.08rem;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .footer-text span {
        color: #667085 !important;
        font-weight: 800;
    }

.footer-copy {
    color: #344054 !important;
    background: #fff !important;
    border: 1px solid rgba(16,24,40,.06) !important;
    box-shadow: 0 12px 26px rgba(16,24,40,.06) !important;
}

/* ocultar estilos previos del footer */
.footer-brand {
    display: none !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;
    }

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

    .footer-copy {
        grid-column: 1 / -1;
        width: fit-content;
    }
}


/* =========================================================
   TRUE COVER FLOW + FOOTER V2
   ========================================================= */

.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;
    }

/* FOOTER decente: oscuro premium, sin cápsulas raras */
.portal-footer {
    width: min(1280px, calc(100% - 48px)) !important;
    margin: 24px auto 78px !important;
    min-height: 150px !important;
    border-radius: 40px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(135deg, #111827 0%, #240711 48%, #073f3d 100%) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 30px 80px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

    .portal-footer::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(90deg, rgba(17,24,39,.96) 0%, rgba(36,7,17,.82) 52%, rgba(7,63,61,.70) 100%), url('/img/fondo-rojo-panal.png') right center / 680px auto no-repeat !important;
        opacity: 1 !important;
        z-index: 0 !important;
    }

    .portal-footer::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: 5px !important;
        width: auto !important;
        display: block !important;
        background: linear-gradient(90deg,#860001,#c41f2c,#0f766e) !important;
        z-index: 3 !important;
    }

.footer-glow {
    position: absolute;
    right: 10%;
    top: -130px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 66%);
    z-index: 1;
    pointer-events: none;
}

.footer-content {
    position: relative !important;
    z-index: 2 !important;
    min-height: 150px !important;
    padding: 40px 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .footer-left img {
        height: 58px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 16px 28px rgba(0,0,0,.35));
    }

    .footer-left div {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .footer-left strong {
        color: #fff;
        font-size: 1.18rem;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .footer-left span {
        color: rgba(255,255,255,.68);
        font-weight: 800;
    }

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

    .footer-right span {
        color: rgba(255,255,255,.62);
        font-size: .86rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .10em;
    }

    .footer-right strong {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 950;
    }

/* ocultar restos anteriores */
.footer-mark,
.footer-text,
.footer-brand {
    display: none !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;
    }

    .portal-footer {
        width: min(100% - 18px, 1280px) !important;
        min-height: 190px !important;
        border-radius: 32px !important;
        margin-bottom: 42px !important;
    }

    .footer-content {
        min-height: 190px !important;
        padding: 34px 28px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .footer-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

        .footer-left img {
            height: 48px;
        }

    .footer-right {
        align-items: flex-start;
    }
}


/* =========================================================
   Ajustes: sin FontAwesome en cards, toggle Ver todo/CoverFlow,
   footer rediseñado
   ========================================================= */

/* 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;
    }

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

/* Footer nuevo: limpio, corporativo, con ADN sutil */
.portal-footer {
    width: min(1280px, calc(100% - 48px)) !important;
    margin: 26px auto 78px !important;
    min-height: 132px !important;
    border-radius: 36px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(247,249,252,.92)) !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    box-shadow: 0 28px 70px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

    .portal-footer::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 52%, rgba(255,255,255,.58) 100%), url('/img/fondo-rojo-panal.png') right center / 620px auto no-repeat !important;
        opacity: 1 !important;
        z-index: 0 !important;
    }

    .portal-footer::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 10px !important;
        height: auto !important;
        display: block !important;
        background: linear-gradient(180deg,#860001,#c91f2d,#0f766e) !important;
        z-index: 2 !important;
    }

.footer-content {
    position: relative !important;
    z-index: 3 !important;
    min-height: 132px !important;
    padding: 30px 38px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 24px !important;
}

.footer-logo-panel {
    width: 150px;
    height: 68px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(134,0,1,.96), rgba(184,18,27,.88));
    box-shadow: 0 18px 44px rgba(134,0,1,.20), inset 0 1px 0 rgba(255,255,255,.24);
}

    .footer-logo-panel img {
        height: 42px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
    }

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .footer-main strong {
        color: #101828;
        font-size: 1.12rem;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .footer-main span {
        color: #667085;
        font-weight: 750;
        line-height: 1.5;
    }

.footer-meta {
    padding: 14px 18px;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-weight: 950;
    box-shadow: 0 14px 32px rgba(16,24,40,.07);
    border: 1px solid rgba(16,24,40,.06);
}

/* Ocultar footer viejo */
.footer-left,
.footer-right,
.footer-glow,
.footer-mark,
.footer-text,
.footer-brand {
    display: none !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;
    }

    .portal-footer {
        width: min(100% - 18px, 1280px) !important;
        min-height: 220px !important;
        border-radius: 30px !important;
        margin-bottom: 42px !important;
    }

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

    .footer-logo-panel {
        width: 142px;
        height: 64px;
    }

    .footer-meta {
        width: fit-content;
    }
}


/* =========================================================
   Final requested changes:
   - view buttons with icon/image style
   - no card numbers
   - TipoApp defines visual style
   - better landscape mobile coverflow
   - footer redesign
   ========================================================= */

/* 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
*/
.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;
}

/* Footer redesign - simpler, stronger, cleaner */
.portal-footer {
    width: min(1280px, calc(100% - 48px)) !important;
    margin: 26px auto 78px !important;
    min-height: 128px !important;
    border-radius: 38px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(135deg, #0f172a 0%, #220711 46%, #073f3d 100%) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 30px 80px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

    .portal-footer::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(90deg, rgba(15,23,42,.96) 0%, rgba(34,7,17,.84) 54%, rgba(7,63,61,.70) 100%), url('/img/fondo-rojo-panal.png') right center / 680px auto no-repeat !important;
        opacity: 1 !important;
        z-index: 0 !important;
    }

    .portal-footer::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: 6px !important;
        width: auto !important;
        display: block !important;
        background: linear-gradient(90deg,#860001,#d1222e,#0f766e) !important;
        z-index: 3 !important;
    }

.footer-content {
    position: relative !important;
    z-index: 2 !important;
    min-height: 128px !important;
    padding: 30px 40px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 26px !important;
}

.footer-brand-block {
    width: 158px;
    height: 68px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

    .footer-brand-block img {
        height: 46px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
    }

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .footer-info strong {
        color: #fff;
        font-size: 1.18rem;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .footer-info span {
        color: rgba(255,255,255,.68);
        font-weight: 800;
    }

.footer-system {
    min-width: 150px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

    .footer-system span {
        color: rgba(255,255,255,.62);
        font-size: .72rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .12em;
    }

    .footer-system strong {
        color: #fff;
        font-size: 1.22rem;
        font-weight: 950;
    }

/* Hide all previous footer variants */
.footer-logo-panel,
.footer-main,
.footer-meta,
.footer-left,
.footer-right,
.footer-glow,
.footer-mark,
.footer-text,
.footer-brand {
    display: none !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,
    .portal-footer {
        width: min(100% - 36px, 1280px) !important;
    }

    .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;
    }
}


/* =========================================================
   Fine tuning: cards typography + premium footer
   ========================================================= */

/* Tipografía más moderna en tarjetas */
.app-card h3,
.cover-card h3 {
    font-family: Inter, 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: Inter, 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;
}

.cover-card.tipo-2 .app-card-footer,
.app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
    flex-direction: row-reverse !important;
}

    .cover-card.tipo-2 .app-card-footer span,
    .app-carousel.view-all .cover-card.tipo-2 .app-card-footer span {
        text-align: right !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;
    }

/* Footer más fregón: pieza visual premium, no barra genérica */
.portal-footer {
    width: min(1280px, calc(100% - 48px)) !important;
    margin: 34px auto 86px !important;
    min-height: 176px !important;
    border-radius: 44px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(135deg, #080d1a 0%, #230511 42%, #044945 100%) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 34px 90px rgba(16,24,40,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
    isolation: isolate;
}

    .portal-footer::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(90deg, rgba(8,13,26,.97) 0%, rgba(35,5,17,.86) 48%, rgba(4,73,69,.68) 100%), url('/img/fondo-rojo-panal.png') right center / 760px auto no-repeat !important;
        z-index: 0 !important;
        opacity: 1 !important;
    }

    .portal-footer::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
        background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.14), transparent 16rem), radial-gradient(circle at 82% 50%, rgba(15,118,110,.42), transparent 20rem), linear-gradient(90deg, #b40012 0 32%, #ffffff 32% 34%, #0f766e 34% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 7px, 0 7px);
        z-index: 3 !important;
    }

.footer-ambient {
    position: absolute;
    right: 8%;
    top: -170px;
    width: 430px;
    height: 430px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(15,118,110,.13) 36%, transparent 66%);
    filter: blur(2px);
    z-index: 1;
    pointer-events: none;
}

.footer-content {
    position: relative !important;
    z-index: 4 !important;
    min-height: 176px !important;
    padding: 42px 52px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 34px !important;
}

.footer-brand-block {
    width: 178px !important;
    height: 84px !important;
    border-radius: 30px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 48px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .footer-brand-block img {
        height: 54px !important;
        width: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0 18px 28px rgba(0,0,0,.42)) !important;
    }

.footer-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.footer-kicker {
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.70) !important;
    font-size: .70rem !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.footer-info strong {
    color: #fff !important;
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    line-height: 1.05 !important;
}

.footer-info span:not(.footer-kicker) {
    color: rgba(255,255,255,.68) !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
    max-width: 560px;
}

.footer-system {
    min-width: 170px !important;
    padding: 20px 22px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 22px 48px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .footer-system span {
        color: rgba(255,255,255,.62) !important;
        font-size: .70rem !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: .14em !important;
        text-align: right !important;
    }

    .footer-system strong {
        color: #fff !important;
        font-size: 2rem !important;
        font-weight: 950 !important;
        letter-spacing: -.05em !important;
    }

/* anular versiones previas */
.footer-logo-panel,
.footer-main,
.footer-meta,
.footer-left,
.footer-right,
.footer-glow,
.footer-mark,
.footer-text,
.footer-brand {
    display: none !important;
}

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

    .footer-system {
        grid-column: 2;
        align-items: flex-start !important;
        width: fit-content;
    }
}

@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;
    }

    .cover-card.tipo-2 .app-card-footer,
    .app-carousel.view-all .cover-card.tipo-2 .app-card-footer {
        flex-direction: row !important;
    }

    .portal-footer {
        width: min(100% - 18px, 1280px) !important;
        min-height: 285px !important;
        border-radius: 34px !important;
        margin-bottom: 46px !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        min-height: 285px !important;
        padding: 34px 28px !important;
        align-items: start !important;
    }

    .footer-brand-block {
        width: 162px !important;
        height: 76px !important;
    }

        .footer-brand-block img {
            height: 48px !important;
        }

    .footer-system {
        grid-column: auto;
        align-items: flex-start !important;
        min-width: 0 !important;
    }

        .footer-system span {
            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;
    }

/* Footer: año a la derecha y mejor acomodo */
.portal-footer {
    min-height: 166px !important;
}

.footer-content {
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
}

.footer-system {
    justify-self: end !important;
    align-items: flex-end !important;
    min-width: 190px !important;
}

    .footer-system strong {
        font-size: 2.25rem !important;
        line-height: 1 !important;
    }

.footer-info {
    justify-self: start !important;
}

    .footer-info strong {
        max-width: 620px;
    }

/* 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;
    }
}


/* =========================================================
   Fix: resultado unico centrado normal en cualquier vista,
   flechas ocultas al buscar, footer con año a la derecha
   ========================================================= */

/* 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;
}

/* Footer: año realmente a la derecha y mejor balanceado */
.portal-footer {
    min-height: 172px !important;
}

.footer-content {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 34px !important;
}

.footer-info {
    justify-self: start !important;
    max-width: 650px !important;
}

.footer-system {
    justify-self: end !important;
    align-self: center !important;
    min-width: 210px !important;
    text-align: right !important;
    align-items: flex-end !important;
}

    .footer-system span {
        text-align: right !important;
    }

    .footer-system strong {
        font-size: 2.45rem !important;
        line-height: 1 !important;
        text-align: right !important;
    }

/* Evitar que el footer viejo tape el nuevo */
.footer-copy {
    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;
    }

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

    .footer-system {
        grid-column: auto !important;
    }
}


/* =========================================================
   Final fixes: active button state, centered coverflow, footer/year
   ========================================================= */

/* 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;
}

/* Footer: quitar texto extra y alinear año claramente a la derecha */
.footer-kicker {
    display: none !important;
}

.portal-footer {
    min-height: 166px !important;
}

.footer-content {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 36px !important;
}

.footer-info {
    justify-self: start !important;
}

    .footer-info strong {
        max-width: 650px !important;
    }

.footer-system {
    justify-self: end !important;
    margin-left: auto !important;
    align-self: center !important;
    min-width: 190px !important;
    text-align: right !important;
    align-items: flex-end !important;
}

    .footer-system span {
        display: none !important;
    }

    .footer-system strong {
        font-size: 2.6rem !important;
        line-height: 1 !important;
        text-align: right !important;
    }

/* Eliminar restos antiguos del footer que pueden interferir */
.footer-copy {
    display: none !important;
}

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

    .footer-system {
        grid-column: auto !important;
        justify-self: end !important;
        align-items: flex-end !important;
        text-align: right !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;
    }

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

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

        .footer-system strong {
            text-align: left !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
   ========================================================= */

/* Contenedor más alto que la tarjeta para que no se corte sombra/footer */
.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;
        }

        .app-carousel.coverflow .cover-card .app-card-footer {
            padding-top: 18px !important;
        }

            .app-carousel.coverflow .cover-card .app-card-footer i {
                width: 36px !important;
                height: 36px !important;
                border-radius: 13px !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;
        }

/* Evitar que el footer se pegue demasiado */
.portal-footer {
    margin-top: 18px !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 .app-card-footer,
    .app-carousel.coverflow .cover-card.is-right .app-card-footer,
    .app-carousel.coverflow .cover-card.is-far-left .app-card-footer,
    .app-carousel.coverflow .cover-card.is-far-right .app-card-footer,
    .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) .app-card-footer,
.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 FOOTER: mover TODO el badge 2026 a la derecha
   Pegar al FINAL de wwwroot/css/portal.css
   Usa tu estructura actual:
   .footer-content > .footer-brand-block + .footer-info + .footer-system
   ========================================================= */

.portal-footer .footer-content {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) max-content !important;
    align-items: center !important;
    width: 100% !important;
    column-gap: 34px !important;
}

.portal-footer .footer-brand-block {
    grid-column: 1 !important;
    justify-self: start !important;
}

.portal-footer .footer-info {
    grid-column: 2 !important;
    justify-self: start !important;
    min-width: 0 !important;
}

.portal-footer .footer-system {
    grid-column: 3 !important;
    justify-self: end !important;
    margin-left: auto !important;
    /* esto mueve TODO el cuadro, no solo el texto */
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

    .portal-footer .footer-system strong {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    .portal-footer .footer-system span {
        display: none !important;
    }

/* Evita que reglas anteriores en tablet lo regresen a la izquierda */
@media(max-width: 980px) {
    .portal-footer .footer-content {
        grid-template-columns: auto minmax(0, 1fr) max-content !important;
    }

    .portal-footer .footer-system {
        grid-column: 3 !important;
        justify-self: end !important;
        margin-left: auto !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* En móvil mantiene el badge a la derecha, pero sin romper el footer */
@media(max-width: 640px) {
    .portal-footer .footer-content {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "logo year"
            "info info" !important;
        row-gap: 20px !important;
    }

    .portal-footer .footer-brand-block {
        grid-area: logo !important;
        justify-self: start !important;
    }

    .portal-footer .footer-system {
        grid-area: year !important;
        justify-self: end !important;
        margin-left: auto !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }

    .portal-footer .footer-info {
        grid-area: info !important;
        justify-self: start !important;
        text-align: left !important;
    }
}

/* ===== FOOTER FINAL CON fondo.png ===== */

.portal-footer {
    background: linear-gradient(135deg, rgba(8,13,26,.55), rgba(35,5,17,.45), rgba(4,73,69,.40)), url('/img/fondo.png') center center / cover no-repeat !important;
}

    /* Este es el que te está tapando el fondo */
    .portal-footer::before {
        background: transparent !important;
        opacity: 0 !important;
    }

    /* Si no quieres línea superior */
    .portal-footer::after {
        display: none !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 .app-card-footer,
        .app-carousel.coverflow .cover-card.is-edge-right .app-card-footer,
        .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;
    }
}


/* =========================================================
   Ajuste final: footer mas angosto / compacto
   ========================================================= */
.portal-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.footer-content {
    min-height: 58px !important;
    padding: 10px 22px !important;
    gap: 14px !important;
}

.footer-brand {
    gap: 12px !important;
}

    .footer-brand img {
        height: 34px !important;
    }

    .footer-brand div {
        gap: 2px !important;
    }

    .footer-brand strong {
        font-size: .92rem !important;
        line-height: 1.05 !important;
    }

    .footer-brand span,
    .footer-copy {
        font-size: .74rem !important;
        line-height: 1.1 !important;
    }

.footer-copy {
    padding: 6px 10px !important;
}

@media(max-width:760px) {
    .portal-footer {
        width: calc(100% - 28px) !important;
        margin-bottom: 18px !important;
    }

    .footer-content {
        min-height: auto !important;
        padding: 10px 14px !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: "Segoe UI", 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,
        main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer {
            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 .app-card-footer {
            padding-top: 18px !important;
            margin-top: auto !important;
        }

            main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer i {
                width: 36px !important;
                height: 36px !important;
                border-radius: 13px !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;
        }

        main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer {
            flex-direction: row-reverse !important;
        }

            main#aplicaciones .app-carousel.coverflow .cover-card.tipo-2 .app-card-footer span {
                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;
            }

            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 {
                flex-direction: row-reverse !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: 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 {
                flex-direction: row !important;
            }
}
/* =========================================================
   AJUSTE FINAL CARD FOOTER - 2026-05-07
   Base: CSS actual compartido por el usuario.
   Cambios:
   - Quitar icono/boton junto a "Aplicacion interna" / "Servicio externo".
   - Tipo 1: letrero a la derecha.
   - Tipo 2: letrero a la izquierda.
   - Aplica en CoverFlow, Ver Todo, laptop y movil.
   - No modifica transformaciones ni layout del coverflow.
   ========================================================= */

/* Ocultar el icono de abrir de todas las cards */
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;
}

/* Footer base de card sin icono */
main#aplicaciones .app-card-footer,
main#aplicaciones .cover-card .app-card-footer,
main#aplicaciones .app-carousel.coverflow .cover-card .app-card-footer,
main#aplicaciones .app-carousel.view-all .cover-card .app-card-footer {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Tipo 1: Aplicacion interna a la derecha */
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 {
        display: block !important;
        width: 100% !important;
        text-align: right !important;
    }

/* Tipo 2: Servicio externo a la izquierda */
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 {
        display: block !important;
        width: 100% !important;
        text-align: left !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;
    }
}