:root {
    --primary-color: #9c1be7;
    --secondary-color: #731aa7;
    --accent-color: #8112ff;
    
    --primary-gradient: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
    --secondary-gradient: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    --bg-light: #F7F8FA;
    --text-dark: #2D3436;
    --text-muted: #636E72;
    --border-radius: 12px;
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    --hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
    font-family: cream;
    src: url(../font/Poppins-Regular.ttf);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
}

/* Transição Global para Elementos Interativos */
a, button, .card, .nav-link, img {
    transition: var(--transition);
}

.gradient-button {
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.6rem 1.2rem;
    font-weight: 500;
}

.gradient-button:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(156, 27, 231, 0.3);
}

.input-gradient-border {
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(270deg, #9c1be7, #731aa7, #8112ff, #f9ae01) border-box;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 300% 300%;
    animation: moveGradient 4s linear infinite;
    outline: none;
}

@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Modais com Glassmorphism */
.modal-content {
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Estilo de Cartão (Card) Moderno */
.card {
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
}

.font_cream {
    font-family: cream;
}

/* Utilitários de Cor Arrumados */
.cor_texto_azul { color: #3498db !important; }
.cor_texto_roso { color: #8e44ad !important; }
.cor_texto_verde { color: #27ae60 !important; }

/* Botões Customizados Modernos */
.btn-roso {
    background: #6b00d1;
    color: white;
    border-radius: var(--border-radius);
    padding: 10px 20px;
    font-weight: 600;
}

.btn-roso:hover {
    background: #00d7dd;
    color: white;
    transform: scale(1.05);
}

.btn-amarelo {
    background: #FFD93D;
    color: #2D3436;
    border-radius: var(--border-radius);
    padding: 10px 20px;
    font-weight: 600;
}

.btn-amarelo:hover {
    background: #FFE66D;
    transform: scale(1.05);
}

/* Rodapé / Bottom Bar em estilo App */
.rodape {
    height: 70px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
}