/* ============================================================
   FREDELIN AI VÍDEO
   dashboard.css
   Dashboard profissional da plataforma
============================================================ */


/* ============================================================
   VARIÁVEIS
============================================================ */

:root {

    --dashboard-primary: #635bff;
    --dashboard-primary-dark: #4b43d6;
    --dashboard-secondary: #8b5cf6;
    --dashboard-accent: #06b6d4;

    --dashboard-dark: #111827;
    --dashboard-dark-2: #1e293b;

    --dashboard-text: #172033;
    --dashboard-muted: #667085;

    --dashboard-white: #ffffff;
    --dashboard-bg: #f6f8fc;

    --dashboard-border: #e5e7eb;

    --dashboard-success: #16a34a;
    --dashboard-danger: #dc2626;
    --dashboard-warning: #f59e0b;

    --dashboard-sidebar:
        linear-gradient(
            180deg,
            #111827 0%,
            #0f172a 100%
        );

    --dashboard-gradient:
        linear-gradient(
            135deg,
            #635bff,
            #8b5cf6
        );

    --dashboard-shadow:
        0 10px 30px rgba(15, 23, 42, 0.07);

    --dashboard-shadow-large:
        0 20px 60px rgba(15, 23, 42, 0.12);

    --dashboard-radius: 16px;

}


/* ============================================================
   RESET DO DASHBOARD
============================================================ */

.dashboard,
.dashboard * {

    box-sizing: border-box;

}


.dashboard {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    width: 100%;

    color:
        var(--dashboard-text);

}


/* ============================================================
   LAYOUT PRINCIPAL
============================================================ */

.dashboard {

    display: flex;

    min-height: 100vh;

    background:
        var(--dashboard-bg);

}


/* ============================================================
   SIDEBAR
============================================================ */

.sidebar {

    width: 260px;

    height: 100vh;

    position: fixed;

    left: 0;

    top: 0;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    background:
        var(--dashboard-sidebar);

    color:
        white;

    box-shadow:
        5px 0 25px rgba(15, 23, 42, 0.10);

    transition:
        transform 0.3s ease,
        width 0.3s ease;

}


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

.sidebar-logo {

    min-height: 76px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    font-size: 20px;

    font-weight: 900;

    letter-spacing:
        -0.6px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    white-space: nowrap;

}


.sidebar-logo span {

    color:
        #8b8cff;

    margin-left:
        5px;

}


/* ============================================================
   CAIXA DO USUÁRIO
============================================================ */

.user-box {

    margin:
        15px 12px;

    padding:
        13px;

    display: flex;

    align-items: center;

    gap:
        11px;

    border-radius:
        12px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.06);

}


.avatar {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #635bff,
            #8b5cf6
        );

    color:
        white;

    font-size:
        16px;

    font-weight:
        800;

    box-shadow:
        0 6px 18px rgba(99,91,255,0.30);

}


.user-info {

    min-width:
        0;

    overflow:
        hidden;

}


.user-info strong {

    display:
        block;

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.user-info small {

    display:
        block;

    margin-top:
        3px;

    color:
        #94a3b8;

    font-size:
        11px;

}


/* ============================================================
   MENU
============================================================ */

.menu {

    flex:
        1;

    padding:
        4px 12px 15px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

}


.menu::-webkit-scrollbar {

    width:
        5px;

}


.menu::-webkit-scrollbar-track {

    background:
        transparent;

}


.menu::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,0.12);

    border-radius:
        20px;

}


/* ============================================================
   TÍTULO DO MENU
============================================================ */

.menu-title {

    padding:
        15px 11px 7px;

    color:
        #64748b;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.8px;

    text-transform:
        uppercase;

}


/* ============================================================
   LINKS
============================================================ */

.menu a {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    width:
        100%;

    min-height:
        43px;

    margin:
        3px 0;

    padding:
        10px 12px;

    border-radius:
        9px;

    color:
        #cbd5e1;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}


.menu a:hover {

    color:
        white;

    background:
        rgba(255,255,255,0.07);

}


.menu a.active {

    color:
        white;

    background:
        linear-gradient(
            90deg,
            rgba(99,91,255,1),
            rgba(99,91,255,0.82)
        );

    box-shadow:
        0 7px 18px
        rgba(99,91,255,0.20);

}


.menu a.active::before {

    content:
        "";

    position:
        absolute;

    left:
        -12px;

    top:
        8px;

    bottom:
        8px;

    width:
        3px;

    border-radius:
        0 4px 4px 0;

    background:
        #a5b4fc;

}


/* ============================================================
   ÍCONES DO MENU
============================================================ */

.menu-icon {

    width:
        23px;

    min-width:
        23px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        17px;

    line-height:
        1;

}


.menu a span:not(.menu-icon) {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ============================================================
   BADGE DO MENU
============================================================ */

.menu-badge {

    margin-left:
        auto;

    padding:
        3px 7px;

    min-width:
        20px;

    border-radius:
        20px;

    background:
        #ef4444;

    color:
        white;

    font-size:
        9px;

    font-weight:
        800;

    text-align:
        center;

}


/* ============================================================
   LOGOUT
============================================================ */

.logout {

    padding:
        12px;

    border-top:
        1px solid rgba(255,255,255,0.08);

}


.logout button {

    width:
        100%;

    min-height:
        43px;

    padding:
        10px 12px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #cbd5e1;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        600;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.logout button:hover {

    background:
        rgba(239,68,68,0.12);

    color:
        #f87171;

}


/* ============================================================
   CONTEÚDO PRINCIPAL
============================================================ */

.main-content {

    width:
        calc(100% - 260px);

    min-height:
        100vh;

    margin-left:
        260px;

    background:
        var(--dashboard-bg);

}


/* ============================================================
   TOPBAR
============================================================ */

.topbar {

    height:
        70px;

    position:
        sticky;

    top:
        0;

    z-index:
        900;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 30px;

    background:
        rgba(255,255,255,0.94);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid var(--dashboard-border);

}


.topbar-left {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.page-title {

    color:
        var(--dashboard-dark);

    font-size:
        18px;

    font-weight:
        800;

}


.topbar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


/* ============================================================
   MENU MOBILE
============================================================ */

.menu-toggle {

    display:
        none;

    width:
        40px;

    height:
        40px;

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

    border-radius:
        10px;

    background:
        white;

    color:
        var(--dashboard-dark);

    font-size:
        21px;

    cursor:
        pointer;

}


/* ============================================================
   NOTIFICAÇÃO
============================================================ */

.notification {

    position:
        relative;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        #f8fafc;

    color:
        var(--dashboard-dark);

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.notification:hover {

    background:
        #eef2ff;

    transform:
        translateY(-1px);

}


.notification-dot {

    position:
        absolute;

    top:
        7px;

    right:
        7px;

    width:
        7px;

    height:
        7px;

    border:
        2px solid white;

    border-radius:
        50%;

    background:
        #ef4444;

}


/* ============================================================
   CONTEÚDO
============================================================ */

.content {

    max-width:
        1450px;

    margin:
        0 auto;

    padding:
        30px;

}


/* ============================================================
   BOAS-VINDAS
============================================================ */

.welcome {

    margin-bottom:
        25px;

}


.welcome h1 {

    margin:
        0;

    color:
        var(--dashboard-dark);

    font-size:
        28px;

    line-height:
        1.2;

    font-weight:
        850;

    letter-spacing:
        -0.7px;

}


.welcome p {

    margin:
        8px 0 0;

    color:
        var(--dashboard-muted);

    font-size:
        14px;

}


/* ============================================================
   ESTATÍSTICAS
============================================================ */

.stats {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        18px;

    margin-bottom:
        28px;

}


.stat-card {

    min-width:
        0;

    padding:
        20px;

    background:
        white;

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

    border-radius:
        var(--dashboard-radius);

    box-shadow:
        var(--dashboard-shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.stat-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 35px
        rgba(15,23,42,0.09);

}


.stat-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.stat-icon {

    width:
        45px;

    height:
        45px;

    min-width:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #f1f0ff;

    font-size:
        20px;

}


.stat-number {

    color:
        var(--dashboard-dark);

    font-size:
        25px;

    line-height:
        1.1;

    font-weight:
        850;

}


.stat-label {

    margin-top:
        5px;

    color:
        var(--dashboard-muted);

    font-size:
        12px;

    font-weight:
        500;

}


/* ============================================================
   CARD CRIAR VÍDEO
============================================================ */

.create-card {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        32px;

    padding:
        30px;

    border-radius:
        20px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e3a8a 55%,
            #312e81 100%
        );

    box-shadow:
        var(--dashboard-shadow-large);

}


.create-card::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -100px;

    top:
        -150px;

    border-radius:
        50%;

    background:
        rgba(139,92,246,0.20);

}


.create-card::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    left:
        -100px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(6,182,212,0.10);

}


.create-card h2 {

    position:
        relative;

    z-index:
        1;

    margin:
        0 0 8px;

    font-size:
        23px;

    line-height:
        1.25;

}


.create-card p {

    position:
        relative;

    z-index:
        1;

    max-width:
        700px;

    margin:
        0;

    color:
        #cbd5e1;

    font-size:
        14px;

    line-height:
        1.6;

}


/* ============================================================
   ÁREA DE CRIAÇÃO
============================================================ */

.create-area {

    position:
        relative;

    z-index:
        2;

    margin-top:
        20px;

    padding:
        8px;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius:
        14px;

    background:
        rgba(255,255,255,0.07);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


.create-area textarea {

    display:
        block;

    width:
        100%;

    min-height:
        110px;

    padding:
        17px;

    border:
        0;

    outline:
        0;

    resize:
        vertical;

    background:
        transparent;

    color:
        white;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1.6;

}


.create-area textarea::placeholder {

    color:
        #94a3b8;

}


.create-area textarea:focus {

    outline:
        none;

}


/* ============================================================
   RODAPÉ DA CRIAÇÃO
============================================================ */

.create-footer {

    position:
        relative;

    z-index:
        2;

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        8px 8px 8px 12px;

    border-top:
        1px solid rgba(255,255,255,0.10);

}


.create-footer small {

    color:
        #94a3b8;

    font-size:
        11px;

}


/* ============================================================
   BOTÃO CRIAR
============================================================ */

.btn-create {

    position:
        relative;

    border:
        0;

    outline:
        none;

    padding:
        12px 19px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1f5f9
        );

    color:
        #4f46e5;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.btn-create:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(0,0,0,0.24);

}


.btn-create:active {

    transform:
        translateY(0);

}


.btn-create:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

    transform:
        none;

}


/* ============================================================
   TÍTULOS DAS SEÇÕES
============================================================ */

.section-title {

    margin-bottom:
        18px;

}


.section-title h2 {

    margin:
        0;

    color:
        var(--dashboard-dark);

    font-size:
        21px;

    line-height:
        1.3;

    font-weight:
        800;

}


.section-title p {

    margin:
        6px 0 0;

    color:
        var(--dashboard-muted);

    font-size:
        13px;

}


/* ============================================================
   MODELOS
============================================================ */

.models {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

}


.model {

    position:
        relative;

    min-height:
        175px;

    overflow:
        hidden;

    padding:
        21px;

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

    border-radius:
        15px;

    background:
        white;

    cursor:
        pointer;

    box-shadow:
        var(--dashboard-shadow);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;

}


.model::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--dashboard-primary),
            var(--dashboard-secondary)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.25s ease;

}


.model:hover {

    transform:
        translateY(-4px);

    border-color:
        #d7d4ff;

    box-shadow:
        0 15px 35px
        rgba(15,23,42,0.10);

}


.model:hover::before {

    transform:
        scaleX(1);

}


.model-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        13px;

    border-radius:
        13px;

    background:
        #f1f0ff;

    font-size:
        23px;

}


.model h3 {

    margin:
        0 0 5px;

    color:
        var(--dashboard-dark);

    font-size:
        15px;

    font-weight:
        750;

}


.model p {

    margin:
        0;

    color:
        var(--dashboard-muted);

    font-size:
        12px;

    line-height:
        1.5;

}


/* ============================================================
   ESTADO VAZIO
============================================================ */

.empty-state {

    padding:
        45px 25px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        15px;

    background:
        white;

    text-align:
        center;

}


.empty-state-icon {

    margin-bottom:
        12px;

    font-size:
        38px;

}


.empty-state h3 {

    margin:
        0 0 5px;

    color:
        var(--dashboard-dark);

    font-size:
        17px;

}


.empty-state p {

    margin:
        0;

    color:
        var(--dashboard-muted);

    font-size:
        13px;

}


/* ============================================================
   BADGES
============================================================ */

.badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        4px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        750;

}


.badge-success {

    color:
        #15803d;

    background:
        #dcfce7;

}


.badge-warning {

    color:
        #b45309;

    background:
        #fef3c7;

}


.badge-danger {

    color:
        #b91c1c;

    background:
        #fee2e2;

}


/* ============================================================
   BOTÕES GERAIS DO DASHBOARD
============================================================ */

.dashboard button {

    font-family:
        inherit;

}


.dashboard button:focus-visible,
.dashboard a:focus-visible,
.dashboard textarea:focus-visible {

    outline:
        3px solid
        rgba(99,91,255,0.30);

    outline-offset:
        3px;

}


/* ============================================================
   OVERLAY MOBILE
============================================================ */

.sidebar-overlay {

    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        950;

    background:
        rgba(15,23,42,0.45);

    backdrop-filter:
        blur(2px);

}


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

@media (max-width: 1200px) {

    .stats {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .models {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


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

@media (max-width: 900px) {

    .sidebar {

        width:
            240px;

    }


    .main-content {

        width:
            calc(100% - 240px);

        margin-left:
            240px;

    }


    .content {

        padding:
            25px;

    }


    .models {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


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

@media (max-width: 768px) {


    /* SIDEBAR */

    .sidebar {

        width:
            270px;

        transform:
            translateX(-100%);

        box-shadow:
            10px 0 40px
            rgba(15,23,42,0.25);

    }


    .sidebar.open {

        transform:
            translateX(0);

    }


    /* OVERLAY */

    .sidebar.open + .sidebar-overlay {

        display:
            block;

    }


    /* CONTEÚDO */

    .main-content {

        width:
            100%;

        margin-left:
            0;

    }


    /* TOPBAR */

    .topbar {

        height:
            64px;

        padding:
            0 16px;

    }


    .menu-toggle {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .page-title {

        font-size:
            16px;

    }


    /* CONTEÚDO */

    .content {

        padding:
            20px 16px;

    }


    /* BOAS-VINDAS */

    .welcome {

        margin-bottom:
            20px;

    }


    .welcome h1 {

        font-size:
            24px;

    }


    .welcome p {

        font-size:
            13px;

    }


    /* ESTATÍSTICAS */

    .stats {

        grid-template-columns:
            1fr 1fr;

        gap:
            12px;

    }


    .stat-card {

        padding:
            16px;

    }


    .stat-number {

        font-size:
            22px;

    }


    .stat-icon {

        width:
            40px;

        height:
            40px;

        min-width:
            40px;

        font-size:
            18px;

    }


    /* CRIAR */

    .create-card {

        padding:
            22px;

        border-radius:
            17px;

    }


    .create-card h2 {

        font-size:
            20px;

    }


    .create-card p {

        font-size:
            13px;

    }


    .create-footer {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .create-footer small {

        text-align:
            center;

    }


    .btn-create {

        width:
            100%;

        min-height:
            45px;

    }


    /* MODELOS */

    .models {

        grid-template-columns:
            1fr 1fr;

        gap:
            12px;

    }


    .model {

        min-height:
            160px;

        padding:
            18px;

    }

}


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

@media (max-width: 480px) {

    .stats {

        grid-template-columns:
            1fr;

    }


    .models {

        grid-template-columns:
            1fr 1fr;

    }


    .model {

        min-height:
            150px;

        padding:
            15px;

    }


    .model-icon {

        width:
            43px;

        height:
            43px;

        font-size:
            21px;

    }


    .model h3 {

        font-size:
            14px;

    }


    .model p {

        font-size:
            11px;

    }


    .notification {

        width:
            37px;

        height:
            37px;

    }


    .create-card {

        padding:
            19px;

    }

}


/* ============================================================
   CELULARES MUITO PEQUENOS
============================================================ */

@media (max-width: 360px) {

    .models {

        grid-template-columns:
            1fr;

    }


    .model {

        min-height:
            auto;

    }


    .page-title {

        font-size:
            15px;

    }

}


/* ============================================================
   ACESSIBILIDADE
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .dashboard *,
    .dashboard *::before,
    .dashboard *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}
/* ==========================================
   MEU PERFIL
========================================== */

.perfil-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
}

.perfil-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100% - 30px));
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    z-index: 9999;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.perfil-fechar {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f1f1f5;
    cursor: pointer;
    font-size: 16px;
}

.perfil-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
}

.perfil-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #635bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
}

.perfil-header h2 {
    margin: 0;
    font-size: 24px;
}

.perfil-header p {
    margin: 5px 0 0;
    color: #777;
}

.perfil-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.perfil-item {
    padding: 16px;
    background: #f7f7fa;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.perfil-item span {
    font-size: 13px;
    color: #777;
}

.perfil-item strong {
    font-size: 16px;
    color: #222;
}

.perfil-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.perfil-btn {
    flex: 1;
    padding: 13px 16px;
    border: none;
    border-radius: 10px;
    background: #635bff;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.perfil-btn:hover {
    opacity: 0.9;
}
/* ================================
   RODAPÉ - FREDELIN AI VÍDEO
================================ */

.site-footer {
    width: 100%;
    background: #111827;
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.footer-links {
    margin-bottom: 15px;
}

.footer-links a {
    display: inline-block;
    color: #60a5fa;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #93c5fd;
    text-decoration: underline;
    transform: translateY(-1px);
}

.site-footer p {
    margin: 0;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.6;
}

/* ================================
   RESPONSIVO - CELULAR
================================ */

@media (max-width: 600px) {

    .site-footer {
        padding: 25px 15px;
        margin-top: 35px;
    }

    .footer-links a {
        font-size: 14px;
    }

    .site-footer p {
        font-size: 12px;
    }
}
/* ==========================================
   PAINEL DE PLANOS
========================================== */

.planos-modal {
    max-width: 1200px;
    width: 95%;
}

.creditos-atual {
    margin-top: 6px;
    color: #666;
}

.planos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 20px 0;
}

.plano-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
}

.plano-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
}

.plano-icon {
    font-size: 38px;
    margin-bottom: 10px;
}

.plano-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.plano-preco {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 5px;
}

.plano-preco small {
    font-size: 13px;
    font-weight: normal;
    color: #777;
}

.plano-descricao {
    min-height: 45px;
    color: #777;
    font-size: 14px;
    line-height: 1.4;
}

.plano-creditos {
    margin-top: 18px;
    font-weight: bold;
    font-size: 16px;
}

.plano-videos {
    margin-top: 7px;
    color: #666;
}

.plano-card ul {
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 20px 0;
}

.plano-card li {
    padding: 7px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.plano-btn {
    width: 100%;
    border: none;
    border-radius: 9px;
    padding: 13px 10px;
    font-weight: bold;
    cursor: pointer;
    background: #111827;
    color: #fff;
    transition: 0.3s;
}

.plano-btn:hover {
    transform: translateY(-1px);
}

.plano-btn-primary,
.plano-btn-pro {
    background: #2563eb;
}

.plano-btn-atual {
    background: #e5e7eb;
    color: #374151;
    cursor: default;
}

.plano-atual {
    border: 2px solid #22c55e;
}

.plano-pro {
    border: 2px solid #2563eb;
}

.plano-popular {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #2563eb;
    color: #fff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.planos-info {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 18px;
    color: #777;
    font-size: 13px;
}

.planos-info p {
    margin: 6px 0;
}

.planos-info a {
    color: #2563eb;
    text-decoration: none;
}


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

@media (max-width: 1000px) {

    .planos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .planos-modal {
        width: 96%;
        max-height: 92vh;
        overflow-y: auto;
    }

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

    .plano-card {
        padding: 22px 18px;
    }

}