:root {
    --roxo-claro: #7A6CFF;
    --roxo-escuro: #761D88;
    --gradiente-GTI: linear-gradient(90deg, var(--roxo-claro) 0%, var(--roxo-escuro) 100%);
    --transition-padrao: all 0.3s ease;
}

[data-theme="dark"] {
    --bg-color: #0b0914;
    --text-color: #ffffff;
    --text-muted: #CECCE6;
    
    --card-bg: linear-gradient(135deg, #101828 0%, #000 100%);
    --card-border-color: #1E2939;
    --card-border-width: 0.8px;
    
    --input-bg: rgba(255, 255, 255, 0.1);
    --icon-filter: brightness(0) invert(1);

    --hero-overlay: rgba(11, 9, 20, 0.7);

    --footer-bg: linear-gradient(180deg, rgba(11, 9, 20, 0.8) 0%, rgba(6, 5, 10, 1) 100%);
    --footer-border: 1px solid rgba(139, 134, 179, 0.2);
}

[data-theme="light"] {
    --bg-color: #f5f4fa;
    --text-color: #242230; 
    --text-muted: #8B86B3; 
    --card-bg: #FFFFFF;
    --card-border-color: #8B86B3;
    --card-border-width: 1px;
    --input-bg: rgba(0, 0, 0, 0.05);
    --icon-filter: brightness(0);

    --hero-overlay: rgba(245, 244, 250, 0.85);

    --footer-bg: #f5f4fa;
    --footer-border: 1px solid #000000;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); transition: var(--transition-padrao); }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
ul { list-style-position: inside; color: var(--text-muted); }
.container {
    padding: 100px 5%; 
    max-width: 1400px; 
    margin: 0 auto;
}

/* Importação das fontes */
@font-face {
    font-family: 'Conthrax';
    src: url('../_fonts/Conthrax-SemiBold.otf') format('truetype'); 
    font-weight: 600;
    font-style: normal;
    font-size: 78.55px;
    line-height: 78.55px;
}

body, p, a, button, input, li {
    font-family: 'Inter', sans-serif;
}

h1, h2, span {
    font-family: 'Conthrax', sans-serif;
    text-transform: uppercase; 
}

h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
}

/* ESTILOS DO BOTÃO TOGGLE SVG */
.switch {
    display: inline-block;
    position: relative;
}

/* Oculta o checkbox nativo do HTML */
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Cursor e tamanho para o SVG */
.toggle-svg {
    cursor: pointer;
    display: block;
}

/* Transições suaves para os elementos de dentro do SVG */
.toggle-bg, .toggle-knob, .knob-circle, .knob-detail {
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* TEMA CLARO */

/* Muda a cor do fundo do botão */
input:checked + .toggle-svg .toggle-bg {
    fill: #8B86B3; 
}

/* Move a bolinha para a direita */
input:checked + .toggle-svg .toggle-knob {
    transform: translateX(46.43px); 
}

/* Muda a cor da bolinha para o dark/preto */
input:checked + .toggle-svg .knob-circle {
    fill: #242230; 
}

/* Esconde a "meia-lua" roxa desenhada na bolinha */
input:checked + .toggle-svg .knob-detail {
    opacity: 0;
}

/* UTILITÁRIAS */
.text-gradient { background: var(--gradiente-GTI); background-clip: text; -webkit-text-fill-color: transparent; }
.btn-primary { background: var(--gradiente-GTI); color: #fff; border: none; padding: 12px 32px; border-radius: 50px; font-weight: bold; cursor: pointer; transition: opacity 0.3s ease; }
.btn-primary:hover { opacity: 0.8; }
.btn-outline { background: transparent; color: var(--text-color); border: 3px solid var(--roxo-claro, #7A6CFF); padding: 10px 32px; border-radius: 50px; cursor: pointer; }
.btn-toggle { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-color); padding: 8px 16px; border-radius: 20px; cursor: pointer;}
.gradient-line { height: 2px; background: var(--gradiente-GTI); border: none; margin: 15px 0; }
.btn-secondary {
    display: flex;
    height: 60px; 
    padding: 0 32px;
    align-items: center;
    justify-content: center; 
    gap: 8px;
    border-radius: 60px;
    background: #242230; 
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: var(--transition-padrao);
}

/* HEADER */
.header { 
    display: flex; 
    align-items: center; 
    padding: 20px 5%; 
    position: sticky; 
    top: 0; 
    backdrop-filter: blur(10px); 
    z-index: 100; 
    border-bottom: 1px solid var(--card-border); 
    gap: 40px; 
}

.header .logo {
    margin-right: auto;
}

.header img { 
    height: 55px; 
} 

.menu {
    display: flex;
    align-items: center;
    gap: 30px; 
}

.menu a { 
    font-size: 0.9rem; 
    font-weight: 600; 
}

/* HERO */
.hero {
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url('../_img/assets/background-hero.png'); 
    
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    
    background-blend-mode: luminosity; 
    
    min-height: 80vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;

    position: relative;
}
.hero h1 { font-size: 4rem; margin-bottom: 20px; line-height: 1.1; }
.hero p { color: var(--text-muted); font-weight: 400px; margin: 0 auto 40px auto; font-size: 25px; }
.hero-buttons { display: flex; gap: 20px; justify-content: center; }

/* SETA DE SCROLL DO HERO */
.scroll-arrow {
    position: absolute;
    bottom: 40px; /* Distância do final da seção Hero */
    left: 50%;
    transform: translateX(-50%); /* Centraliza perfeitamente no eixo X */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: bounce 2s infinite; /* Chama a animação de pulo */
    transition: opacity 0.3s ease;
}

.scroll-arrow:hover {
    opacity: 0.7;
}

/* Animação de pulinho suave */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }
    40% {
        transform: translate(-50%, -15px); /* Pula 15px para cima */
    }
    60% {
        transform: translate(-50%, -7px); /* Pulinho menor na volta */
    }
}

/* Rolagem suave para quando clicar na seta (ou nos links do menu) */
html {
    scroll-behavior: smooth;
}


/* SEÇÕES GERAIS */
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: 2.5rem; margin-bottom: 10px; }
.section-header p { color: var(--text-muted); font-size: 22px; font-weight: 400; line-height: 32px; }

/* CARDS E GLASSMORPHISM */
.cards-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 12px;
}

.glass-card { 
    flex: 1 1 calc(33.333% - 20px); 
    max-width: 450px;
    min-height: 350px;
    
    /* Aqui entram as variáveis mágicas que trocam de tema */
    border-radius: 16px;
    border: var(--card-border-width) solid var(--card-border-color);
    background: var(--card-bg);
    
    padding: 40px; 
    text-align: left;
    transition: var(--transition-padrao);
    
    display: flex;
    flex-direction: column;
}

.glass-card:hover { 
    transform: translateY(-5px); 
}

/* Tamanho do ícone ajustado para o visual da imagem */
.icon-box img { 
    width: 48px; 
    height: 48px;
    margin-bottom: 24px; 
}

/* Fontes (garantindo que o H3 e o P peguem as fontes certas e as cores do design) */
.glass-card h3 { 
    margin-bottom: 12px; 
    font-size: 1.5rem; 
    color: var(--text-color); /* Atualizado */
}

.glass-card p { 
    color: var(--text-muted); /* Atualizado */
    font-size: 1rem; 
    line-height: 1.6; 
}

/* Pilares */
.pilar-row { display: flex; align-items: center; gap: 50px; margin-bottom: 80px; }
.pilar-row.reverse { flex-direction: row-reverse; } 
.pilar-text { flex: 1; }

.pilar-title { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 20px; 
}
.pilar-title img { width: 40px; }

.title-group {
    display: flex;
    flex-direction: column;
    font-size: 42px;
    line-height: 1.2;
}

.title-group h3 {
    color: #FFF;
    font-family: Poppins;
    font-size: 33px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px; 
}

.title-group span {
    color: var(--GTI-Primria, #7A6CFF);
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 
    letter-spacing: 0.15px;
}

.pilar-title h3 { 
    font-size: 2rem; 
    color: var(--text-color); 
    margin: 0; 
    line-height: 1.1;
}


.pilar-subtitle {
    color: var(--roxo-claro); 
    font-size: 0.85rem;
    font-weight: 600;
}

.pilar-text p { color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; font-size: 1.2rem; }


.pilar-text ul {
    list-style: none; 
    padding: 0;
}

.pilar-text ul li { 
    margin-bottom: 12px; 
    display: flex; 
    align-items: center;
    color: var(--text-muted);
}

.pilar-text ul li::before {
    content: "•"; 
    color: var(--roxo-claro); 
    font-size: 1.5rem; 
    margin-right: 10px; 
    line-height: 1;
}

.pilar-img { flex: 1; text-align: center; max-width: 110%; }
.pilar-img img { max-width: 100%; border-radius: 16px; }

.pilar-row:hover .pilar-img img {
    transform: scale(1.05); /* Efeito de zoom interativo */
}

/* Impacto */
.impacto .cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.impacto .glass-card {
    flex: 1 1 calc(33.333% - 20px);
    max-width: 450px;
    min-height: 350px;
    
    border-radius: 16px;
    border: var(--card-border-width) solid var(--card-border-color);
    background: var(--card-bg);
    
    padding: 40px;
    text-align: left;
    transition: var(--transition-padrao);
    
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

.impacto .glass-card .impact-img {
    height: 64px; 
    width: auto;  
    margin-bottom: 16px; 
    align-self: center; 
}

.impacto .glass-card .gradient-line {
    height: 5px;
    align-self: stretch; 
    background: var(--gradiente-GTI); 
    border: none;
    margin: 16px 0; 
    border-radius: 4px; 
}

.impacto .glass-card h3 {
    margin-bottom: 12px; 
    font-size: 1.5rem; 
    color: var(--text-color); 
}

.impacto .glass-card p {
    color: var(--text-muted); 
    font-size: 1rem; 
    line-height: 1.6;
}

@media (max-width: 900px) {
    .impacto .glass-card {
        flex: 1 1 100%;
    }
}

/* CTA BOX */
.cta-box { background: var(--gradiente-GTI); padding: 80px; border-radius: 24px; text-align: center; color: white; }
.cta-box h2 { font-size: 40px; margin-bottom: 15px; font-family: Poppins; font-style: normal; text-decoration: none; line-height: 52px; font-weight: 400;}
.cta-box p { margin-bottom: 40px; font-size: 1.1rem; opacity: 0.9; font-weight: 400; font-size: 24px; }
.cta-form { display: flex; justify-content: center; gap: 15px; max-width: 650px; margin: 0 auto; line-height: 32px; }
.cta-form input { flex: 1; padding: 15px 20px; border-radius: 50px; border: none; background: var(--input-bg); color: white; outline: none; }
.cta-form input::placeholder { color: rgba(255,255,255,0.7); }

/* FOOTER */
.footer {
    background: var(--footer-bg);
    border-top: var(--footer-border); /* Linha de cima */
    margin-top: 120px;
    backdrop-filter: blur(10px); /* Efeito glassmorphism no Dark */
    width: 100%;
    height: 100%;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
}

.footer-brand img {
    height: 60px;
    margin-bottom: 25px;
}

.footer-brand p {
    color: var(--text-muted);
    max-width: 350px;
    font-size: 1rem;
    line-height: 1.6;
}

.footer-links h4, .footer-contact h4 {
    margin-bottom: 25px;
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
}

.footer-links a {
    display: block;
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--roxo-claro);
}

/* Divisória e Linha de baixo */
.footer-bottom {
    text-align: center;
    padding: 30px 0;
    border-top: var(--footer-border); /* Linha de baixo (entre conteúdo e copyright) */
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Alinha o ícone e o texto do e-mail lado a lado */
.footer-contact .contact-email {
    display: flex;
    align-items: center;
    gap: 10px; /* Controla o espaço entre o ícone e o texto */
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Controla o tamanho do ícone para não ficar gigante nem amassar */
.footer-contact .email-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* AJUSTES GERAIS DE RESPONSIVIDADE */
@media (max-width: 768px) {
    /* 1. Header: Ajusta o espaçamento */
    .header {
        padding: 15px 5%;
        gap: 15px;
    }
    
    .menu {
        display: none; /* Esconde o menu de texto simples no celular (opcional: pode usar um menu hamburguer) */
    }

    /* 2. Hero: Diminui o tamanho das fontes para não quebrar o layout */
    .hero h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .hero p {
        font-size: 1rem;
        padding: 0 10px;
    }

    .hero-buttons {
        flex-direction: column; /* Botões um em cima do outro */
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* 3. Cards: Garante que eles ocupem a largura total */
    .glass-card, .impacto .glass-card {
        flex: 1 1 100% !important;
        max-width: 100%;
        height: auto; /* Deixa o card crescer conforme o texto */
        min-height: 250px;
    }

    /* 4. Pilares: Empilhamento das linhas */
    .pilar-row, .pilar-row.reverse {
        flex-direction: column;
        text-align: left;
        gap: 80px;
        margin-bottom: 120px;
    }

    .pilar-title {
        justify-content: left;
    }

    /* 5. CTA (Chamada para Ação) */
    .cta-box {
        padding: 40px 20px; 
        margin: 0 15px; 
    }

    .cta-box h2 {
        font-size: 1.8rem; /* Diminui o tamanho da fonte */
        line-height: 1.2;
        margin-bottom: 15px;
        word-wrap: break-word; /* Força a quebra de palavra se necessário */
    }

    .cta-form {
        flex-direction: column;
        width: 100%;
    }

    .cta-form input {
        width: 100%;
    }

    /* 6. Footer: Alinhamento centralizado */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-bottom p{
        margin: 0 auto 20px auto;
        justify-content: center;
        text-align: center;
    }
}

/* Ajustes para telas muito pequenas (iPhone SE, etc) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    /* Exibe as redes sociais apenas no mobile */
    .social-links-mobile {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
    }

    .social-links-mobile img {
        width: 24px;
        height: 24px;
        filter: var(--icon-filter); 
    }

    .contact-email svg {
        stroke: var(--text-color); 
    }
}

/* Esconde as redes sociais mobile no Desktop */
.social-links-mobile {
    display: none;
}

/* 2. Regras específicas para Celular (Resoluções até 768px) */
@media (max-width: 768px) {
    
    .social-links-mobile {
        display: flex; /* Faz a seção aparecer no celular */
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
    }

    .social-links-mobile img {
        width: 24px;
        height: 24px;
        /* Aplica o filtro para que o ícone fique escuro no tema claro */
        filter: var(--icon-filter);
    }

    /* Garante que o ícone de e-mail também fique escuro/visível */
    .contact-email svg {
        stroke: var(--text-color);
    }

    .btn-secondary {
        width: 100%;
        font-size: 0.9rem;
        height: 55px;
        text-align: left; 
        justify-content: space-between; 
    }
}

/* footer alinhado a esquerda */
@media (max-width: 768px) {
    .footer {
        margin-top: 60px; /* Reduz um pouco o recuo no mobile */
    }

    .footer .container {
        padding-top: 40px;
    }

    .footer-content {
        grid-template-columns: 1fr; /* Uma coluna por linha */
        text-align: left; /* Garante que todos os textos fiquem à esquerda */
        gap: 40px;
    }

    /* Removemos o 'margin: 0 auto' que estava centralizando os elementos */
    .footer-brand p {
        margin: 0 0 20px 0;
        text-align: left;
    }

    .social-links-mobile {
        justify-content: flex-start; /* Alinha os ícones à esquerda */
        margin-top: 10px;
    }

    .contact-email {
        justify-content: flex-start; /* Alinha ícone + e-mail à esquerda */
        margin: 0;
    }

    .footer-bottom {
        text-align: left; /* Copyright também à esquerda para manter o padrão */
        padding: 20px 0;
    }
}