/* ==========================================================================
   EDUCARE ONE - TEMA PREMIUM (Sobreposição ao Tailwind)
   ========================================================================== */

/* 1. Tipografia Moderna */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --color-primary: #4F46E5;       /* Indigo moderno */
    --color-primary-hover: #4338CA;
    --color-bg: #F8FAFC;            /* Fundo suave da aplicação */
    --shadow-soft: 0 10px 40px -10px rgba(15, 23, 42, 0.08);
    --shadow-float: 0 20px 40px -10px rgba(79, 70, 229, 0.15);
    --radius-card: 16px;
    --radius-input: 10px;
    --radius-btn: 10px;
    --transition-snappy: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background-color: var(--color-bg) !important;
    color: #0F172A;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. Navegação em "Glassmorphism" (Efeito Vidro)
   ========================================================================== */
nav.bg-white {
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ==========================================================================
   3. Cartões (Cards) Suaves e Flutuantes
   ========================================================================== */
/* Captura as caixas brancas do Tailwind e injeta elegância */
.bg-white.shadow, .bg-white.shadow-sm, .bg-white.shadow-md {
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid rgba(241, 245, 249, 1) !important;
    transition: var(--transition-snappy);
}

/* Efeito ao passar o rato (Hover) em cartões interativos */
.hover\:shadow-md:hover {
    box-shadow: var(--shadow-float) !important;
    transform: translateY(-3px);
    border-color: rgba(79, 70, 229, 0.2) !important;
}

/* ==========================================================================
   4. Botões com Energia e Sombras Coloridas
   ========================================================================== */
button[type="submit"], .bg-blue-600 {
    background-color: var(--color-primary) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.3) !important;
    transition: var(--transition-snappy) !important;
}

button[type="submit"]:hover:not(:disabled), .bg-blue-600:hover:not(:disabled) {
    background-color: var(--color-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4) !important;
    transform: translateY(-2px);
}

button:disabled {
    box-shadow: none !important;
    opacity: 0.65;
    cursor: not-allowed;
}

/* ==========================================================================
   5. Campos de Formulário (Inputs) Premium
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"], 
input[type="date"], input[type="time"], select, textarea {
    border-radius: var(--radius-input) !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #F1F5F9 !important; /* Fundo cinza bem claro nativo */
    padding: 0.65rem 1rem !important;
    transition: var(--transition-snappy) !important;
    box-shadow: none !important;
    color: #334155 !important;
}

/* Foco interativo nos campos */
input:focus, select:focus, textarea:focus {
    background-color: #FFFFFF !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
    outline: none !important;
}

/* ==========================================================================
   6. Customização Oculta da Barra de Rolagem
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ==========================================================================
   7. Animações de Interface (Micro-interações)
   ========================================================================== */
.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Badge de pendente (pulsante suave) */
.bg-yellow-100 {
    animation: pulseWarning 2.5s infinite alternate;
}

@keyframes pulseWarning {
    0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.2); }
    100% { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); }
}
        /* Estilos exclusivos para a Landing Page que complementam o styles.css */
        .hero-gradient {
            background: radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
            background-color: #F8FAFC;
        }

        .blob {
            position: absolute;
            width: 500px;
            height: 500px;
            background: linear-gradient(180deg, rgba(79, 70, 229, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
            filter: blur(80px);
            border-radius: 50%;
            z-index: -1;
            animation: move 25s infinite alternate;
        }

        @keyframes move {
            from { transform: translate(-10%, -10%) rotate(0deg); }
            to { transform: translate(20%, 20%) rotate(360deg); }
        }

        .floating-card {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(-2deg); }
            50% { transform: translateY(-20px) rotate(0deg); }
        }

        .glass-tag {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }