:root{
    --bg-deep:#041728;
    --text:#ffffff;
    --muted:rgba(233,244,255,.82);
    --shadow:0 18px 36px rgba(1,10,23,.40);
    --card-border:rgba(133,205,255,.36);
    --chip-border:rgba(155,214,255,.26);
    --cyan:#22c1ff;
    --cyan2:#6ee7ff;
}

/* =========================================================
   RESET
   ========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    min-height:100vh;

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    color:var(--text);
    background:var(--bg-deep);

    position:relative;

    /* IMPORTANTE:
       En escritorio usamos 3 filas:
       cabecera + contenido + footer
    */
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto;

    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}


/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.container{
    width:min(1500px, calc(100% - 40px));
    margin-inline:auto;

    position:relative;
    z-index:3;
}


/* =========================================================
   FONDO
   ========================================================= */

.page-bg,
.page-overlay{
    position:fixed;
    inset:0;

    pointer-events:none;
}

.page-bg{
    z-index:0;

    background:
        url('../img/bg-fondo.png')
        center center / cover no-repeat;

    transform:scale(1.01);
}

.page-overlay{
    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(2,14,29,.10) 0%,
            rgba(2,14,29,.18) 28%,
            rgba(2,14,29,.28) 62%,
            rgba(2,14,29,.38) 100%
        ),
        radial-gradient(
            circle at top center,
            rgba(23,137,230,.12) 0%,
            rgba(23,137,230,.03) 28%,
            rgba(0,0,0,0) 48%
        ),
        radial-gradient(
            circle at center,
            rgba(28,170,255,.08) 0%,
            rgba(0,0,0,0) 55%
        );
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.topbar{
    padding-top:12px;

    display:flex;
    justify-content:flex-end;

    position:relative;
    z-index:10;
}

.user-chip{
    min-width:250px;

    border:1px solid var(--chip-border);

    background:
        linear-gradient(
            180deg,
            rgba(9,30,58,.72),
            rgba(7,24,47,.56)
        );

    backdrop-filter:blur(10px);

    box-shadow:var(--shadow);

    border-radius:18px;

    padding:9px 14px;

    display:flex;
    align-items:center;
    gap:10px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.user-chip:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 30px rgba(1,10,23,.45),
        0 0 18px rgba(34,193,255,.14);
}

.avatar{
    width:42px;
    height:42px;

    border-radius:50%;

    display:grid;
    place-items:center;

    font-weight:800;
    font-size:16px;

    background:
        linear-gradient(
            180deg,
            #3a8fff,
            #235bc6
        );

    color:#fff;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        0 8px 16px rgba(0,0,0,.18);
}

.user-meta{
    display:flex;
    flex-direction:column;

    line-height:1.12;
}

.user-meta strong{
    font-size:14px;
    font-weight:700;
}

.user-meta strong span{
    color:#29bcff;
}

.user-meta small{
    font-size:12px;

    color:rgba(255,255,255,.78);

    margin-top:3px;
}

.caret{
    margin-left:auto;

    font-size:16px;

    color:rgba(255,255,255,.8);
}


/* =========================================================
   PORTAL
   ========================================================= */

.portal{
    /* YA NO usamos height:calc(100vh...) */
    min-height:0;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding-top:0;
    padding-bottom:4px;

    position:relative;
    z-index:3;
}


/* =========================================================
   LOGO / HERO
   ========================================================= */

.hero{
    text-align:center;

    padding-top:0;

    position:relative;
    z-index:4;
}

.brand-logo{
    width:min(280px, 24vw);

    margin-inline:auto;

    filter:
        drop-shadow(
            0 12px 24px rgba(0,0,0,.40)
        );

    animation:
        logoFloat 4s ease-in-out infinite;
}

.hero h1{
    margin-top:0;

    font-size:
        clamp(38px, 4.2vw, 60px);

    line-height:1.02;

    letter-spacing:.2px;

    font-weight:800;

    text-shadow:
        0 8px 22px rgba(0,0,0,.32);
}

.accent-line{
    width:54px;
    height:4px;

    border-radius:99px;

    display:block;

    margin:
        9px auto 10px;

    background:
        linear-gradient(
            90deg,
            #1cbcff,
            #6ee7ff
        );

    box-shadow:
        0 0 18px rgba(39,193,255,.48);
}

.hero p{
    font-size:
        clamp(15px, 1.15vw, 20px);

    line-height:1.4;

    color:var(--muted);

    text-shadow:
        0 2px 8px rgba(0,0,0,.26);
}

.hero p span{
    color:var(--cyan);

    font-weight:700;
}


/* =========================================================
   GRID DE TARJETAS
   ========================================================= */

.cards-grid{
    margin-top:14px;

    display:grid;

    grid-template-columns:
        repeat(5, minmax(180px, 1fr));

    gap:16px;

    align-items:stretch;

    position:relative;
    z-index:4;

    perspective:1200px;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.system-card{
    min-height:238px;

    border-radius:24px;

    padding:
        16px 13px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(20,42,74,.40),
            rgba(10,25,46,.54)
        );

    border:
        1px solid var(--card-border);

    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter:blur(13px);

    text-align:center;

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

    position:relative;

    overflow:hidden;

    animation:
        riseIn .55s ease-out both;

    animation-delay:
        var(--delay, 0s);

    transition:
        transform .18s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    transform-style:
        preserve-3d;

    isolation:isolate;
}


/* LUZ INTERIOR */

.system-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(255,255,255,.14),
            transparent 34%
        );

    pointer-events:none;

    z-index:0;
}


/* EFECTO DE BARRIDO */

.system-card::after{
    content:"";

    position:absolute;

    inset:-40%;

    background:
        linear-gradient(
            120deg,
            transparent 28%,
            rgba(255,255,255,.18) 45%,
            rgba(255,255,255,.03) 52%,
            transparent 65%
        );

    transform:
        translateX(-120%) rotate(12deg);

    transition:
        transform .8s ease;

    pointer-events:none;

    z-index:0;
}

.system-card:hover::after{
    transform:
        translateX(120%) rotate(12deg);
}


/* HOVER */

.system-card:hover{
    border-color:
        rgba(120,214,255,.72);

    box-shadow:
        0 24px 46px rgba(0,0,0,.34),
        0 0 24px rgba(32,181,255,.20),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* =========================================================
   ICONOS
   ========================================================= */

.card-icon-ring{
    width:78px;
    height:78px;

    border-radius:50%;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(91,197,255,.34);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(35,185,255,.12),
            rgba(7,31,58,.16)
        );

    box-shadow:
        inset 0 0 0 1px rgba(28,180,255,.08),
        0 0 18px rgba(10,145,227,.12);

    margin-bottom:12px;

    position:relative;
    z-index:1;

    transition:
        all .3s ease;
}

.system-card:hover .card-icon-ring{
    transform:
        translateZ(20px) scale(1.07);

    box-shadow:
        0 0 28px rgba(28,180,255,.32),
        inset 0 0 0 1px rgba(110,231,255,.18);
}

.card-icon{
    width:60px;
    height:60px;

    border-radius:18px;

    display:grid;
    place-items:center;

    color:#81e5ff;

    position:relative;
}

.card-icon svg{
    width:36px;
    height:36px;
}


/* LOGOS DENTRO DE LAS TARJETAS */

.card-logo{
    display:block;

    max-width:100%;
    max-height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 4px 10px rgba(0,0,0,.25)
        );
}

.card-logo-fk{
    width:72px;
    height:auto;
}

.card-logo-revalue{
    width:56px;
    height:auto;
}


/* =========================================================
   TEXTO DE TARJETAS
   ========================================================= */

.system-card h3,
.system-card p,
.card-line,
.card-arrow{
    position:relative;

    z-index:1;
}

.system-card h3{
    min-height:38px;

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

    font-size:14px;
    font-weight:800;

    line-height:1.2;

    transition:
        transform .3s ease;
}

.system-card:hover h3{
    transform:
        translateZ(18px);
}

.card-line{
    width:32px;
    height:3px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #1dc1ff,
            #78ebff
        );

    box-shadow:
        0 0 14px rgba(22,185,255,.36);

    margin:
        1px 0 10px;

    transition:
        width .28s ease;
}

.system-card:hover .card-line{
    width:48px;
}

.system-card p{
    color:
        rgba(235,245,255,.84);

    font-size:12px;

    line-height:1.38;

    min-height:48px;

    display:flex;

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

    transition:
        transform .3s ease;
}

.system-card:hover p{
    transform:
        translateZ(12px);
}


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

.card-arrow{
    margin-top:auto;

    width:34px;
    height:34px;

    border-radius:50%;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(81,205,255,.42);

    color:#fff;

    font-size:17px;

    line-height:1;

    background:
        linear-gradient(
            180deg,
            rgba(7,83,132,.28),
            rgba(8,38,68,.14)
        );

    box-shadow:
        0 0 14px rgba(25,178,255,.14);

    transition:
        transform .26s ease,
        background .26s ease,
        box-shadow .26s ease;
}

.system-card:hover .card-arrow{
    transform:
        translateX(4px)
        translateZ(18px)
        scale(1.08);

    background:
        linear-gradient(
            180deg,
            rgba(13,116,186,.40),
            rgba(8,47,82,.24)
        );

    box-shadow:
        0 0 18px rgba(25,178,255,.28);
}


/* =========================================================
   FOOTER
   AQUÍ ESTÁ LA CORRECCIÓN PRINCIPAL
   ========================================================= */

.footer{
    width:100%;

    max-width:none;

    margin:0;

    position:relative;

    z-index:20;

    display:flex;

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

    gap:8px;

    padding:
        5px 10px 8px;

    color:
        rgba(241,249,255,.90);

    font-size:13px;

    text-align:center;

    text-shadow:
        0 2px 8px rgba(0,0,0,.75);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(2,15,29,.22)
        );
}

.footer p{
    margin:0;
}

.footer p span{
    color:#22c1ff;

    font-weight:700;
}

.footer-shield{
    width:16px;
    height:16px;

    color:#41ceff;

    flex:0 0 16px;
}

.footer-shield svg{
    width:100%;
    height:100%;

    display:block;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes riseIn{

    from{
        opacity:0;

        transform:
            translateY(18px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }
}


@keyframes logoFloat{

    0%,
    100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-4px);
    }
}


/* =========================================================
   PANTALLAS DE POCA ALTURA
   ========================================================= */

@media (max-height:760px) and (min-width:1321px){

    .topbar{
        padding-top:8px;
    }

    .user-chip{
        padding:7px 12px;
    }

    .avatar{
        width:36px;
        height:36px;

        font-size:14px;
    }

    .brand-logo{
        width:min(235px, 21vw);
    }

    .hero h1{
        font-size:
            clamp(32px, 3.8vw, 50px);
    }

    .accent-line{
        margin:
            7px auto 8px;
    }

    .hero p{
        font-size:14px;

        line-height:1.35;
    }

    .cards-grid{
        margin-top:10px;

        gap:14px;
    }

    .system-card{
        min-height:218px;

        padding:
            13px 10px 11px;
    }

    .card-icon-ring{
        width:68px;
        height:68px;

        margin-bottom:9px;
    }

    .card-icon{
        width:50px;
        height:50px;
    }

    .card-icon svg{
        width:31px;
        height:31px;
    }

    .card-logo-fk{
        width:60px;
    }

    .card-logo-revalue{
        width:48px;
    }

    .system-card h3{
        font-size:13px;

        min-height:34px;
    }

    .system-card p{
        font-size:11px;

        min-height:43px;
    }

    .card-arrow{
        width:32px;
        height:32px;
    }

    .footer{
        font-size:12px;

        padding:
            3px 8px 5px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1320px){

    body{
        display:block;

        height:auto;

        min-height:100vh;

        overflow:auto;
    }

    .topbar{
        justify-content:center;

        padding-bottom:12px;
    }

    .portal{
        min-height:auto;

        padding-bottom:25px;
    }

    .cards-grid{
        grid-template-columns:
            repeat(3, minmax(220px, 1fr));

        margin-top:24px;
    }

    .system-card{
        min-height:280px;
    }

    .footer{
        position:relative;

        margin-top:10px;

        padding:
            12px 10px 16px;
    }
}


/* =========================================================
   TABLET PEQUEÑA
   ========================================================= */

@media (max-width:900px){

    .container{
        width:
            min(100% - 24px, 1100px);
    }

    .hero h1{
        font-size:48px;
    }

    .hero p{
        font-size:18px;
    }

    .brand-logo{
        width:min(280px, 65vw);
    }

    .cards-grid{
        grid-template-columns:
            repeat(2, minmax(220px, 1fr));

        margin-top:24px;
    }

    .system-card{
        min-height:280px;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width:640px){

    .user-chip{
        min-width:unset;

        width:100%;
    }

    .brand-logo{
        width:min(240px, 72vw);
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:15px;
    }

    .cards-grid{
        grid-template-columns:1fr;

        gap:16px;
    }

    .system-card{
        min-height:265px;
    }

    .footer{
        font-size:11px;

        flex-wrap:wrap;
    }
}