/* ==========================================================================
   universo.css — as telas de CHEGADA do portal: login e hub.
   Não define cor nem fonte própria: tudo vem dos tokens do design system.
   Antes deste arquivo existiam duas identidades brigando (League Spartan +
   navy #20274D aqui; Montserrat + navy #1C2952 no DS). Agora há uma só.
   ========================================================================== */

/* A versão no @import é obrigatória: sem ela o navegador serve o DS do cache,
   e o céu (.ceu/.vidro) e os tokens novos (--blue-600) simplesmente não existem.
   Ao mexer no avenna-ds.css, suba este número aqui e nos <link> das internas. */
@import url('avenna-ds.css?v=5');

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--cream-500);
    min-height: 100vh;
}

.logo-marca { height: 34px; width: auto; max-width: 190px; display: block; object-fit: contain; }

/* ==========================================================================
   Tela de login — o cartão de vidro flutua no céu
   ========================================================================== */
.tela-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.card-login {
    width: 100%;
    max-width: 390px;
    padding: 40px 32px 34px;
    text-align: center;
    /* .vidro dá o fundo; aqui só a sombra que o descola do fundo */
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.card-login .logo-marca { height: 42px; max-width: 220px; margin: 4px auto 20px; }
.subtitulo {
    color: var(--blue-300);
    margin: 0 0 28px;
    font-size: 13.5px;
    letter-spacing: var(--tracking-wide);
}

.card-login form { text-align: left; }
.card-login label {
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--blue-300);
}
.card-login input {
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(253, 251, 233, .16);
    border-radius: var(--radius-lg);
    color: var(--cream-500);
    font-size: 15px;
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.card-login input::placeholder { color: rgba(253, 251, 233, .35); }
.card-login input:focus {
    outline: none;
    border-color: var(--blue-400);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(58, 131, 196, .2);
}

.card-login button[type="submit"] {
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: var(--white);
    border: 0;
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.card-login button[type="submit"]:hover {
    box-shadow: var(--shadow-blue);
    transform: translateY(-1px);
}

.alerta {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #FCA5A5;
    padding: 11px 14px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    margin-bottom: 18px;
    text-align: left;
}

/* ==========================================================================
   Hub — o topo e a moldura
   ========================================================================== */
.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: rgba(11, 14, 28, .55);
    border-bottom: 1px solid rgba(253, 251, 233, .09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 5;
}
.usuario {
    color: var(--blue-300);
    font-size: 14px;
    display: flex; align-items: center; gap: 14px;
}
.sair {
    color: var(--cream-500);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border: 1px solid rgba(253, 251, 233, .2);
    padding: 7px 15px;
    border-radius: var(--radius-md);
    transition: background var(--transition-base), border-color var(--transition-base);
}
.sair:hover { background: rgba(255, 255, 255, .08); border-color: var(--blue-400); }

.hub { max-width: 1040px; margin: 0 auto; padding: 60px 28px 90px; }

/* A saudação: o único lugar do portal com tipo grande de verdade */
.saudacao { margin-bottom: 52px; }
.saudacao .selo {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest); text-transform: uppercase;
    color: var(--blue-300);
    border: 1px solid rgba(253, 251, 233, .16);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    margin-bottom: 20px;
}
.hub h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 14px;
    color: var(--cream-500);
}
.hub h1 .brilho {
    background: linear-gradient(100deg, var(--blue-300) 0%, var(--white) 45%, var(--blue-400) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hub .lead { color: var(--blue-300); font-size: 16px; margin: 0; max-width: 54ch; line-height: var(--leading-normal); }

/* ==========================================================================
   Áreas e planetas
   ========================================================================== */
.area { margin-top: 46px; }
.area-titulo {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-widest);
    font-weight: var(--weight-semibold);
    color: var(--blue-300);
    margin: 0 0 20px;
}
/* A linha que continua depois do título é a "órbita" da área */
.area-titulo::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(253,251,233,.18), transparent);
}
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ponto.azul    { background: var(--blue-500); box-shadow: 0 0 12px var(--blue-500); }
.ponto.verde   { background: #37B24D;         box-shadow: 0 0 12px rgba(55,178,77,.8); }
.ponto.amarelo { background: #F0A020;         box-shadow: 0 0 12px rgba(240,160,32,.8); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 18px; }

.card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px 22px 22px;
    text-decoration: none;
    color: var(--cream-500);
    overflow: hidden;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
/* O brilho que passa pela borda superior quando o planeta é focado */
.card::before {
    content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--blue-400), transparent);
    opacity: 0; transition: opacity var(--transition-base);
}
.card:hover, .card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(110, 145, 203, .5);
    box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(110,145,203,.2), 0 0 30px rgba(58,131,196,.15);
    outline: none;
}
.card:hover::before, .card:focus-visible::before { opacity: 1; }

/* O ícone vira um pequeno corpo celeste, com halo */
.card-icone {
    width: 48px; height: 48px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 23px; line-height: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(110,145,203,.45), rgba(32,39,77,.9) 70%);
    border: 1px solid rgba(253, 251, 233, .14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.3);
    transition: box-shadow var(--transition-base);
}
.card:hover .card-icone { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 24px rgba(58,131,196,.45); }

.card-nome {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 17px;
    color: var(--cream-500);
}
.card-desc {
    color: rgba(253, 251, 233, .58);
    font-size: 13.5px;
    line-height: var(--leading-normal);
}
.card-ir {
    margin-top: auto; padding-top: 6px;
    font-size: 12px; font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--blue-400);
    opacity: 0; transform: translateX(-4px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.card:hover .card-ir, .card:focus-visible .card-ir { opacity: 1; transform: translateX(0); }

@media (max-width: 640px) {
    .hub { padding: 40px 20px 70px; }
    .saudacao { margin-bottom: 36px; }
    .card-ir { opacity: 1; transform: none; }   /* no toque não existe hover */
}