/* =========================================
   PÁGINA DE APLICAÇÕES E USO (GERAL)
   ========================================= */

.hero-usos {
    padding: 150px 0 60px;
    text-align: center;
}

/* O Container que segura a tabela e o scroll */
.tabela-container {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 40px;
    overflow-x: auto; /* Ativa o scroll horizontal */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    
    /* Firefox: Scrollbar fina e colorida */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-violet) rgba(255, 255, 255, 0.05);
    
    /* Garante que o conteúdo não "fure" o arredondamento nas quinas */
    clip-path: inset(0 round 20px);
}

.tabela-titulo {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tabela-aplicacoes {
    width: 100%;
    min-width: 800px; /* Largura mínima para não esmagar */
    border-collapse: separate; /* Necessário para rounded corners internos */
    border-spacing: 0;
}

.tabela-aplicacoes th {
    background: rgba(0, 194, 238, 0.05);
    color: var(--accent-violet);
    padding: 15px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--accent-violet);
    text-align: center;
}

.tabela-aplicacoes th:first-child {
    text-align: left;
}

.tabela-aplicacoes td {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    vertical-align: middle;
}

.tabela-aplicacoes tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* Arredondamento das células de baixo para casar com o container */
.tabela-aplicacoes tr:last-child td:first-child { border-bottom-left-radius: 15px; }
.tabela-aplicacoes tr:last-child td:last-child { border-bottom-right-radius: 15px; }

/* Disclaimer Final */
.disclaimer-usos {
    background: rgba(0,0,0,0.3);
    border-left: 4px solid var(--accent-violet);
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin-top: 40px;
}

/* =========================================
   CUSTOM SCROLLBAR (CHROME, SAFARI, EDGE)
   ========================================= */

.tabela-container::-webkit-scrollbar {
    height: 6px;
}

.tabela-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    margin: 0 20px; /* Barra não encosta nas bordas laterais */
}

.tabela-container::-webkit-scrollbar-thumb {
    background: var(--accent-violet);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--violet-glow-strong);
}

/* =========================================
   RESPONSIVIDADE (MOBILE)
   ========================================= */

@media (max-width: 900px) {
    /* 1. Regra de Ouro: Respiro Lateral */
    .hero-interno .container,
    .section-padding {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 2. Ajuste do Hero */
    .hero-interno {
        padding: 120px 0 30px !important;
    }

    .hero-interno h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }

    .hero-interno h1 br {
        display: none !important;
    }

    /* 3. Ajustes do Container da Tabela */
    .tabela-container {
        padding: 15px 15px 25px !important; /* Mais espaço embaixo para a scrollbar */
        border-radius: 16px !important;
        clip-path: inset(0 round 16px);
        background: rgba(255,255,255,0.02);
    }

    /* Texto de Ajuda ao Usuário */
    .tabela-container::after {
        content: 'Deslize para ver mais →';
        display: block;
        text-align: right;
        font-size: 10px;
        text-transform: uppercase;
        color: var(--accent-violet);
        margin-top: 15px;
        opacity: 0.7;
        font-weight: 700;
    }

    /* Larguras mínimas específicas para cada tipo de tabela no Mobile */
    .tabela-aplicacoes {
        min-width: 750px !important; 
    }

    /* A tabela de Mercado Financeiro (última) precisa de mais espaço lateral */
    .tabela-container:last-of-type .tabela-aplicacoes {
        min-width: 950px !important;
    }

    .tabela-aplicacoes th, 
    .tabela-aplicacoes td {
        padding: 12px 8px !important;
        font-size: 12px !important;
    }

    .tabela-titulo {
        font-size: 16px !important;
    }

    /* Scrollbar ainda mais fina no Mobile */
    .tabela-container::-webkit-scrollbar {
        height: 4px;
    }
}

@media (max-width: 600px) {
    .hero-interno h1 {
        font-size: 28px !important;
    }
    
    .section-padding {
        padding-top: 20px !important;
    }

    .disclaimer-usos p {
        font-size: 12px !important;
    }
}