/* --- IMPORTAÇÃO DAS FONTES LOCAIS --- */
/* Registrando Inter */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter_18pt-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter_18pt-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}


/* Registrando Plus Jakarta Sans */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('./fonts/GoogleSansFlex_24pt-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}


:root {
    --brand-blue: #0071e3;
    --brand-blue-hover: #2b84de; 
    --brand-orange: #ff7a50; 
    --brand-green: #75c191;
    --brand-green-hover: #56A273; 
    --brand-gray: #6e6e73;
    --text-white: #ffffff;
    --text-black: #000000;
    --text-muted: #2e2e2e;
    --cards-bg: #f5f5f7; 
    --text-gray:#6e6e73;
    --font-title: 'Google Sans Flex', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* --- CLASSES DE CONEXÃO (CSS -> TAILWIND) --- */
/* Criamos estas classes para o Tailwind "enxergá-las" nos componentes */
.font-title { 
    font-family: 'Google Sans Flex', 'Inter', sans-serif; 
    font-weight: 500 ;
}
.font-body { 
    font-family: 'Inter', sans-serif;
    font-weight: 400 ;
 }

/* --- CLASSES UTILITÁRIAS --- */
.text-f-white { color: var(--text-white); }
.text-f-black { color: var(--text-black); }
.text-f-muted { color: var(--text-muted); }
.text-f-green { color: var(--brand-green); }
.text-f-blue { color: var(--brand-blue); }
.text-f-orange { color: var(--brand-orange); }
.text-f-gray { color: var(--brand-gray); }
.bg-f-green { background-color: var(--brand-blue); }
.bg-f-green:hover { background-color: var(--brand-blue-hover); }
.bg-f-card { background-color: var(--cards-bg); }
.bg-f-blue { background-color: var(--brand-blue); }
.bg-f-blue:hover { background-color: var(--brand-blue-hover); }

/* --- CONFIGURAÇÃO GLOBAL --- */
body {
    background: radial-gradient(circle at center, #ffffff 0%, #f5f5f7 100%) !important;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.6;
    color: #111;
    min-height: 100vh;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden !important; 
    margin: 0;
    padding: 0;
}


/* Removido o font-weight fixo de 600 para permitir variações (black, medium, etc) */
body h1 {
    font-family: var(--font-title) !important;
    font-size: clamp(40px, 6vw, 56px) ;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
}

body h2 {
    font-family: var(--font-title) !important;
    font-size: clamp(32px, 4.5vw, 40px) ;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
}

body h3 {
    font-family: var(--font-title) !important;
    font-size: clamp(24px, 3.5vw, 28px) ;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

body p {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 65ch;
}

.strong {
    font-weight: 600;
}

/* Di1retriz: Todos os botões arredondados */
button, .rounded-button {
    border-radius: 9999px !important;
}

/* --- ANIMAÇÕES E EFEITOS --- */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

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

#nav-logo, 
#nav-como-funciona,
.cursor-pointer {
    cursor: pointer !important;
}

.ai-scanner {
    position: relative;
    overflow: hidden;
}

.ai-scanner::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(86, 162, 115, 0.2), #56A273, transparent);
    animation: scan 3s infinite linear;
}

@keyframes scan {
    0% { top: -100%; }
    100% { top: 100%; }
}