/* Estilos Globais e da Landing Page */
:root {
    --background: #ffffff;
    --foreground: #0B1F3A;
    --card: #ffffff;
    --primary: #0B1F3A;
    --primary-foreground: #ffffff;
    --secondary: #FF6B00;
    --muted-foreground: #64748b;
    --border: #e2e8f0;
    --radius: 1rem;
    --gradient-primary: linear-gradient(135deg, #0B1F3A, #1e3a5f);
    --gradient-secondary: linear-gradient(135deg, #FF6B00, #ff8c33);
    --gradient-hero: linear-gradient(135deg, #0B1F3A 0%, #FF6B00 100%);
}

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.gradient-hero {
    background: var(--gradient-hero);
}

.text-center { text-align: center; }

/* --- Cabeçalho e Rodapé --- */
.main-header { border-bottom: 1px solid var(--border); background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); position: sticky; top: 0; z-index: 50; }
.main-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
.logo-container { display: flex; align-items: center; gap: 0.5rem; }
.logo { width: 2.5rem; height: 2.5rem; background: var(--gradient-hero); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; }
.logo.small { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.logo span { color: white; font-weight: bold; }
.brand-name { font-size: 1.5rem; font-family: 'Montserrat'; font-weight: bold; }

.main-nav { display: flex; gap: 1rem; }
.btn { display: inline-block; padding: 0.5rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; transition: all 0.2s; }
.btn-outline { border: 1px solid var(--border); color: var(--foreground); }
.btn-outline:hover { background-color: var(--accent); }
.btn-secondary { background: var(--gradient-secondary); color: white; border: 0; }
.btn.btn-lg { padding: 0.75rem 2rem; font-size: 1.125rem; border-radius: 1rem; }
.btn-outline-light { border: 1px solid white; color: white; }
.btn-outline-light:hover { background-color: white; color: var(--primary); }


/* --- Seções --- */
.hero-section { padding: 5rem 1rem; }
.hero-title { font-size: 3.75rem; font-weight: bold; margin-bottom: 1.5rem; background: var(--gradient-hero); -webkit-background-clip: text; color: transparent; }
.hero-subtitle { font-size: 1.25rem; color: var(--muted-foreground); margin-bottom: 2rem; max-width: 56rem; margin-left: auto; margin-right: auto; }

.section-title { font-size: 2.25rem; font-weight: bold; text-align: center; margin-bottom: 3rem; }
.how-it-works-section { padding: 4rem 1rem; background-color: #f8fafc; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-card { text-align: center; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 20px -4px rgba(210, 20, 80, 0.1); border: 0; }
.feature-icon { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.feature-icon i { color: white; width: 2rem; height: 2rem; }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.feature-card p { color: var(--muted-foreground); }
.gradient-primary { background: var(--gradient-primary); }
.gradient-secondary { background: var(--gradient-secondary); }

.who-is-it-for-section { padding: 4rem 1rem; }
.user-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.user-type-card { text-align: center; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 20px -4px rgba(210, 20, 80, 0.1); border: 0; }
.user-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; }
.user-icon i { color: white; }
.user-type-card h3 { font-weight: 600; margin-bottom: 0.5rem; }
.user-type-card p { font-size: 0.875rem; color: var(--muted-foreground); }

.cta-section { padding: 5rem 1rem; background: var(--gradient-hero); color: white; }
.cta-section h2 { font-size: 2.25rem; font-weight: bold; margin-bottom: 1.5rem; }
.cta-section p { font-size: 1.25rem; opacity: 0.9; max-width: 48rem; margin: 0 auto 2rem; }
.cta-buttons { display: flex; justify-content: center; gap: 1rem; }

.main-footer { background-color: var(--primary); color: white; padding: 3rem 1rem; }
.main-footer .logo-container { justify-content: center; margin-bottom: 1rem; }
.main-footer p { opacity: 0.7; }

/* --- Media Queries para Responsividade --- */

/* Para tablets e celulares (telas menores que 768px) */
@media (max-width: 768px) {
    .main-header .container {
        gap: 1rem;
    }

    .main-nav {
        width: 100%;
        justify-content: center;
        font-size: 8pt;
    }
    .btn {
        padding: 0.5rem 0.8rem;
    }
    .hero-section {
        padding: 3rem 1rem;
    }

    .hero-title {
        font-size: 2.5rem; /* Reduz o tamanho do título */
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    .features-grid {
        grid-template-columns: 1fr; /* Muda para uma coluna */
        gap: 1.5rem;
    }

    .user-types-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas em telas menores */
        gap: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 80%;
        text-align: center;
    }
}

/* Para celulares (telas menores que 480px) */
@media (max-width: 480px) {
    .user-types-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas bem pequenas */
    }

    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
    }
}