/* ==========================================================================
   Design System & Tokens
   ========================================================================== */
:root {
    /* Color Palette */
    --color-bg: #030712;
    --color-text-main: #f3f4f6;
    --color-text-muted: #9ca3af;
    
    /* Portal Colors */
    --color-escola: #10b981;       /* Emerald / Green */
    --color-escola-glow: rgba(16, 185, 129, 0.15);
    
    --color-aluno: #3b82f6;        /* Blue / Indigo */
    --color-aluno-glow: rgba(59, 130, 246, 0.15);
    
    --color-painel: #8b5cf6;       /* Violet / Purple */
    --color-painel-glow: rgba(139, 92, 246, 0.15);

    /* Fonts */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Shadows & Glassmorphism */
    --glass-bg: rgba(17, 24, 39, 0.6);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.5;
}

/* ==========================================================================
   Background Glow Blobs (Dynamic & Premium)
   ========================================================================== */
.glow-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    mix-blend-mode: screen;
    animation: pulse 12s infinite alternate ease-in-out;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--color-escola) 0%, transparent 70%);
}

.blob-2 {
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--color-painel) 0%, transparent 70%);
    animation-delay: -4s;
}

.blob-3 {
    top: 40%;
    left: 50%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, var(--color-aluno) 0%, transparent 70%);
    animation-delay: -8s;
}

@keyframes pulse {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    50% {
        transform: translate(30px, -50px) scale(1.1);
    }
    100% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

/* ==========================================================================
   Layout Container
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */
.header {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.logo-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    height: 240px; /* Aumentado em 3x (de 80px para 240px) */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.15));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo:hover {
    transform: scale(1.05);
}

.subtitle {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text-muted);
    font-weight: 400;
    letter-spacing: -0.02em;
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   Grid and Card Styles
   ========================================================================== */
.cards-grid {
    display: grid;
    grid-template-cols: repeat(3, 1fr); /* Sempre lado a lado */
    gap: 1.25rem;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .cards-grid {
        gap: 0.75rem;
    }
}

@media (max-width: 580px) {
    .cards-grid {
        grid-template-cols: 1fr; /* On very small screens (portrait mobile) stack them, or stack if screen space is too tight. Wait, let's keep them side-by-side or stacked on very small mobile? "lado a lado, na horizontal" means we should probably keep them repeat(3, 1fr) on most screens, but let's make sure it handles wrap or smaller scales. Let's make it repeat(3, 1fr) by default, and only on extremely small screens under 420px we can use smaller padding or allow horizontal scrolling. Let's make repeat(3, 1fr) standard. */
    }
}

.card {
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: var(--color-text-main);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    min-height: 90px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* Subtle glow layer behind the card */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(800px circle at var(--x, 0px) var(--y, 0px), rgba(255,255,255,0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.card:hover::before {
    opacity: 1;
}

/* Hover behaviors per portal type */
.card-escola:hover {
    border-color: var(--color-escola);
    box-shadow: 0 0 25px var(--color-escola-glow);
    transform: translateY(-4px);
}
.card-aluno:hover {
    border-color: var(--color-aluno);
    box-shadow: 0 0 25px var(--color-aluno-glow);
    transform: translateY(-4px);
}
.card-painel:hover {
    border-color: var(--color-painel);
    box-shadow: 0 0 25px var(--color-painel-glow);
    transform: translateY(-4px);
}

/* Icon Styling */
.card-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-icon {
    width: 22px;
    height: 22px;
    transition: transform 0.4s ease;
}

.card-escola .card-icon-wrapper {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-escola);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.card-aluno .card-icon-wrapper {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--color-aluno);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.card-painel .card-icon-wrapper {
    background-color: rgba(139, 92, 246, 0.1);
    color: var(--color-painel);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Icon rotation / zoom on card hover */
.card:hover .card-icon-wrapper {
    transform: scale(1.08);
}
.card:hover .card-icon {
    transform: rotate(5deg);
}

.card-escola:hover .card-icon-wrapper {
    background-color: var(--color-escola);
    color: #ffffff;
}
.card-aluno:hover .card-icon-wrapper {
    background-color: var(--color-aluno);
    color: #ffffff;
}
.card-painel:hover .card-icon-wrapper {
    background-color: var(--color-painel);
    color: #ffffff;
}

/* Content Details */
.card-content {
    flex-grow: 1;
    min-width: 0;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    letter-spacing: -0.01em;
}

.card-description {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Arrow Styling on Far Right */
.card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.card-arrow i {
    width: 20px;
    height: 20px;
}

.card-escola .card-arrow { color: rgba(16, 185, 129, 0.4); }
.card-aluno .card-arrow { color: rgba(59, 130, 246, 0.4); }
.card-painel .card-arrow { color: rgba(139, 92, 246, 0.4); }

.card-escola:hover .card-arrow { color: var(--color-escola); }
.card-aluno:hover .card-arrow { color: var(--color-aluno); }
.card-painel:hover .card-arrow { color: var(--color-painel); }

.card:hover .card-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */
.footer {
    text-align: center;
    margin-top: 3rem;
    width: 100%;
}

.footer p {
    color: rgba(156, 163, 175, 0.4);
    font-size: 0.85rem;
    font-weight: 400;
}