/* ========================================================================== RESET E VARIÁVEIS GLOBAIS (Configurações base do design system) ========================================================================== */ /* Importa fontes elegantes do Google Fonts (Inter para texto corrido e Outfit para títulos) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap'); /* Seletor universal (*): Aplica as regras a absolutamente todos os elementos do HTML */ * { margin: 0; /* Zera a margem padrão (espaço externo) para evitar recuos indesejados */ padding: 0; /* Zera o padding padrão (espaço interno) */ box-sizing: border-box; /* Garante que a largura (width) e altura (height) de um elemento incluam bordas e preenchimentos internos */ } /* Imagens e vídeos responsivos por padrão para não quebrar telas pequenas */ img, video { max-width: 100%; height: auto; } /* O seletor `:root` representa o elemento raiz (geralmente a tag ) e é perfeito para declarar variáveis globais de CSS */ :root { /* Cores Principais - Paleta Premium (#0f766e Teal) */ --primary-blue: #0f766e; /* Cor principal da marca (#0f766e) */ --dark-blue: #0d5c56; /* Tom escuro para efeitos de hover */ --light-blue: #f0fdfa; /* Tom suave para fundos de cards */ --white: #ffffff; /* Branco puro */ --off-white: #f8fafc; /* Branco acinzentado suave */ /* Cores de Apoio (usadas em ícones de funcionalidades específicas e alertas) */ --purple: #0d9488; --green: #10b981; --orange: #f59e0b; --red: #ef4444; --teal: #14b8a6; /* Tons de Cinza Suaves para textos secundários, bordas e fundos discretos */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-600: #475569; --gray-700: #334155; --gray-900: #0f172a; /* Sombras Elevadas Premium para dar efeito de profundidade (cards que parecem flutuar) */ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03); /* Transições suaves: suaviza mudanças de cores, sombras ou posições ao passar o mouse */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== ESTILOS GLOBAIS DE CORPO E TIPOGRAFIA ========================================================================== */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fonte legível padrão */ color: var(--gray-900); /* Tom escuro padrão para melhor contraste de leitura */ line-height: 1.6; /* Espaçamento confortável entre linhas de texto */ overflow-x: hidden; /* Impede o aparecimento de barra de rolagem horizontal indesejada */ background-color: var(--white); /* Cor de fundo padrão do site */ } /* Define a fonte Outfit para elementos de título (headings) e para a marca da Logo */ h1, h2, h3, h4, h5, h6, .logo, .footer-logo, .modal-logo { font-family: 'Outfit', sans-serif; } /* Define o container de largura máxima centralizado na tela, mantendo o conteúdo alinhado */ .container { max-width: 1280px; margin: 0 auto; /* margin-left e margin-right auto centraliza o bloco na horizontal */ padding: 0 20px; /* Preenchimento nas laterais para o texto não encostar nas bordas em celulares */ } /* Oculta elementos que são exclusivos para celulares (inicialmente ocultos em desktops) */ .mobile-only { display: none !important; } /* ========================================================================== HEADER / NAVBAR (Menu fixo no topo) ========================================================================== */ .header { position: fixed; /* Fixa o menu no topo da tela, mesmo ao rolar a página */ top: 0; left: 0; right: 0; background: #0f766e; /* Fundo verde #0f766e conforme solicitado */ backdrop-filter: blur(10px); /* Efeito de vidro fosco */ box-shadow: var(--shadow-sm); /* Sombra discreta inferior */ z-index: 1000; /* Garante que o menu fique por cima */ transition: var(--transition); /* Transição suave */ } /* Classe adicionada via Javascript quando o usuário rola a página para baixo */ .header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Destaque de sombra na rolagem */ } .navbar { padding: 1rem 0; /* Espaçamento do menu de navegação */ } .nav-wrapper { display: flex; /* Organização em linha */ justify-content: space-between; /* Distribuição dos itens */ align-items: center; /* Alinhamento vertical centralizado */ } .logo { display: flex; align-items: center; gap: 0.5rem; /* Espaçamento entre ícone e texto */ font-size: 1.8rem; font-weight: 700; color: #ffffff; /* Texto da logo em branco */ white-space: nowrap; } .logo-img { height: 2.4rem; width: auto; object-fit: contain; } .logo strong { color: #ffffff; /* Parte "Edu" da logo também em branco */ font-weight: inherit; } .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: #ffffff; /* Links de navegação em branco */ font-weight: 500; opacity: 0.92; transition: var(--transition); position: relative; } .nav-link:hover { color: #ffffff; /* Mantém branco no hover */ opacity: 1; } /* Linha animada em branco ao passar o mouse */ .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #ffffff; transition: var(--transition); } .nav-link:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 1.5rem; } .btn-theme-toggle { background: transparent; border: none; color: var(--gray-700); font-size: 1.25rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .btn-theme-toggle:hover { color: var(--primary-blue); background: var(--gray-100); } /* Estilo exclusivo do Botão de Login no Cabeçalho */ #btn-nav-login, #btn-nav-login-mobile { background: #ffffff !important; /* Fundo branco no botão de login */ color: #0f766e !important; /* Texto verde/teal #0f766e */ border: none; border-radius: 8px; font-weight: 700 !important; padding: 0.65rem 1.6rem; cursor: pointer; transition: var(--transition); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } #btn-nav-login:hover, #btn-nav-login-mobile:hover { background: #f0fdfa !important; /* Fundo levemente suavizado no hover */ color: #0d5c56 !important; /* Verde um pouco mais escuro no hover */ transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } .btn-primary { padding: 0.75rem 1.5rem; background: var(--primary-blue); color: rgb(255, 255, 255); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary:hover { background: var(--dark-blue); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { padding: 0.75rem 1.5rem; background: transparent; color: var(--primary-blue); border: 2px solid var(--primary-blue); border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; } .btn-secondary:hover { background: var(--light-blue); } .btn-large { padding: 1rem 2rem; font-size: 1.1rem; } .btn-outline { padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--gray-300); color: var(--gray-700); border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); } .btn-outline:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .hamburger span { width: 25px; height: 3px; background: #ffffff; /* Ícone do menu hambúrguer em branco */ border-radius: 3px; transition: var(--transition); } /* HERO SECTION */ .hero { min-height: calc(100vh - 80px); margin-top: 80px; display: flex; align-items: center; padding: 60px 0 80px; background: linear-gradient(135deg, #f8fafc 0%, #ccfbf1 100%); position: relative; overflow: hidden; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--primary-blue); border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: var(--white); box-shadow: var(--shadow-md); margin-bottom: 1.5rem; } .hero-badge i { color: #fbbf24; } .hero-title { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.2rem; color: var(--gray-900); } .gradient-text { background: linear-gradient(135deg, #0f766e 0%, #10b981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-description { font-size: 1.1rem; color: var(--gray-600); margin-bottom: 1.5rem; line-height: 1.6; font-weight: 600; } .hero-features-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; } .hero-features-list li { display: flex; align-items: center; gap: 1rem; font-size: 1.1rem; color: var(--gray-700); font-weight: 500; } .hero-features-list li span:last-child { flex: 1; } .check-icon { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; background-color: var(--primary-blue); color: var(--white); border-radius: 50%; font-size: 0.85rem; flex-shrink: 0; box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.2); } .hero-buttons { display: flex; gap: 1rem; margin-bottom: 3rem; } .hero-stats { display: flex; justify-content: space-between; gap: 2rem; } .stat-item h3 { font-size: 2rem; color: var(--primary-blue); margin-bottom: 0px; line-height: 1.1; } .stat-item p { color: var(--gray-600); font-size: 0.9rem; font-weight: 600; line-height: 1.2; } /* Hero Visual */ .hero-image { position: relative; height: 500px; } .hero-card { position: absolute; background: white; padding: 1.5rem; border-radius: 16px; box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 1rem; animation: float 3s ease-in-out infinite; } .hero-card i { font-size: 2rem; color: var(--primary-blue); } .hero-card h4 { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 0.25rem; } .hero-card p { font-size: 1.2rem; font-weight: 700; color: var(--gray-900); } .card-1 { top: 50px; left: 50px; } .card-2 { top: 200px; right: 50px; animation-delay: 1s; } .card-3 { bottom: 50px; left: 100px; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .floating-shape { position: absolute; opacity: 0.2; animation: rotate 20s linear infinite; display: flex; align-items: center; justify-content: center; } .shape-1 { font-size: 180px; color: #0f766e; top: -60px; right: -80px; } .shape-2 { font-size: 120px; color: #14b8a6; bottom: -50px; left: 30px; top: -10%; animation-delay: 5s; } .shape-3 { font-size: 80px; color: #0d9488; top: 50%; left: 40%; animation-delay: 10s; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* SECTIONS COMUNS */ section { padding: 100px 0; } .section-header { text-align: center; margin-bottom: 4rem; } .section-badge { display: inline-block; padding: 0.5rem 1rem; background: var(--primary-blue); color: var(--white); border-radius: 50px; font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; } .section-title { font-size: 2.5rem; font-weight: 800; color: var(--gray-900); margin-bottom: 1rem; } .section-description { font-size: 1.1rem; color: var(--gray-600); max-width: 800px; margin: 0 auto; } /* ========================================================================== SEÇÃO DE FUNCIONALIDADES (CSS Grid e Micro-animações) ========================================================================== */ .features { background: white; } /* CSS Grid define um sistema de layout bidimensional de colunas e linhas */ .features-grid { display: grid; /* Ativa o modo Grid no container */ grid-template-columns: repeat(3, 1fr); /* Divide o espaço horizontal em 3 colunas de larguras iguais (1fr = 1 fração do espaço) */ gap: 2rem; /* Define o espaçamento de 2rem entre cada card do grid */ } .feature-card { padding: 2rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; transition: var(--transition); /* Suaviza as animações de hover configuradas abaixo */ cursor: pointer; } /* Micro-animação ao passar o mouse sobre o cartão de funcionalidade */ .feature-card:hover { transform: translateY(-8px); /* Desloca o card 8 pixels para cima no eixo Y (vertical) */ box-shadow: var(--shadow-xl); /* Aplica uma sombra intensa para dar efeito de flutuação / elevação */ border-color: var(--primary-blue); /* Muda a cor da borda para o azul da marca */ } .feature-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; /* Flexbox para centralizar o ícone interno */ align-items: center; /* Alinha na vertical */ justify-content: center; /* Alinha na horizontal */ font-size: 1.5rem; margin-bottom: 1.5rem; } /* Classes utilitárias de cores para os fundos e ícones de cada card */ .feature-icon.blue { background: var(--light-blue); color: var(--primary-blue); } .feature-icon.purple { background: #ede9fe; color: var(--purple); } .feature-icon.green { background: #d1fae5; color: var(--green); } .feature-icon.orange { background: #fef3c7; color: var(--orange); } .feature-icon.red { background: #fee2e2; color: var(--red); } .feature-icon.teal { background: #ccfbf1; color: var(--teal); } .feature-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--gray-900); transition: var(--transition); } .feature-card p { color: var(--gray-600); line-height: 1.6; transition: var(--transition); } .feature-card:hover h3 { color: var(--primary-blue); } .feature-card:hover p { color: var(--gray-700); } /* BENEFITS */ .benefits { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%); color: white; } .benefits .section-badge { background: rgba(255, 255, 255, 0.2); color: white; } .benefits .section-title, .benefits .section-description { color: white; } .benefits-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .benefits-list { display: flex; flex-direction: column; gap: 2rem; } .benefit-item { display: flex; gap: 1.5rem; } .benefit-text { flex: 1; } .benefit-icon { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .benefit-text h4 { font-size: 1.2rem; margin-bottom: 0.5rem; } .benefit-text p { color: rgba(255, 255, 255, 0.9); line-height: 1.6; } .benefits-visual { background: white; padding: 2rem; border-radius: 16px; box-shadow: var(--shadow-xl); } .visual-card { color: var(--gray-900); } .visual-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--gray-200); } .visual-header i { font-size: 2rem; color: var(--primary-blue); } .visual-header span { font-weight: 600; font-size: 1.1rem; } .progress-item { margin-bottom: 1.5rem; } .progress-item span { display: block; margin-bottom: 0.5rem; color: var(--gray-700); font-weight: 500; } .progress-bar { height: 12px; background: var(--gray-200); border-radius: 50px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #0f766e 0%, #10b981 100%); border-radius: 50px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; color: white; font-size: 0.75rem; font-weight: 700; transition: width 1s ease; } /* PRICING */ .pricing { background: var(--white); } .pricing-custom-container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; background: var(--off-white); padding: 3.5rem; border-radius: 24px; border: 1px solid var(--gray-200); margin-top: 1rem; } .pricing-info h3 { font-size: 2rem; margin-bottom: 1rem; color: var(--gray-900); font-weight: 700; } .pricing-info p { font-size: 1.1rem; color: var(--gray-600); margin-bottom: 2rem; } .custom-features-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; } .custom-features-list li { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.05rem; color: var(--gray-700); } .custom-features-list li span { flex: 1; } .custom-features-list li i { color: var(--primary-blue); font-size: 1.25rem; margin-top: 0.15rem; } .pricing-cta-card { background: var(--white); padding: 3rem 2.5rem; border-radius: 20px; border: 2px solid var(--primary-blue); box-shadow: var(--shadow-xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .cta-card-header i { font-size: 3rem; color: var(--primary-blue); margin-bottom: 1rem; } .cta-card-header h3 { font-size: 1.75rem; margin-bottom: 0.5rem; color: var(--gray-900); font-weight: 700; } .cta-card-header p { color: var(--gray-600); font-size: 1rem; line-height: 1.5; } .cta-card-buttons { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .cta-card-buttons button, .cta-card-buttons a { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; } .btn-whatsapp { background-color: #25d366; color: white !important; border: none; } .btn-whatsapp:hover { background-color: #128c7e; transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Dark theme overrides */ body.dark-theme .pricing-custom-container { background: #1e293b; border-color: #334155; } body.dark-theme .pricing-info h3, body.dark-theme .cta-card-header h3 { color: #f8fafc; } body.dark-theme .pricing-info p, body.dark-theme .cta-card-header p, body.dark-theme .custom-features-list li { color: #cbd5e1; } body.dark-theme .pricing-cta-card { background: #0f172a; border-color: var(--primary-blue); } /* Responsividade */ @media (max-width: 992px) { .pricing-custom-container { grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem; } } /* TESTIMONIALS */ .testimonials { background: white; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .testimonial-card { background: var(--white); border: 1px solid var(--gray-200); padding: 2rem; border-radius: 16px; transition: var(--transition); display: flex; flex-direction: column; } .testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--primary-blue); } .testimonial-rating { color: #fbbf24; margin-bottom: 1rem; } .testimonial-text { color: var(--gray-700); line-height: 1.8; margin-bottom: 1.5rem; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: auto; } .author-avatar { width: 50px; height: 50px; background: var(--light-blue); color: var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; object-fit: cover; } .author-info h4 { font-size: 1rem; margin-bottom: 0.25rem; color: var(--gray-900); line-height: 1.2; } .author-info p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.2; } /* FAQ SECTION (Blue gradient background) */ .faq { background: linear-gradient(135deg, #f8fafc 0%, #ccfbf1 100%); border-top: none; border-bottom: none; } .faq .section-badge { background: var(--primary-blue); } .faq .section-title { color: var(--gray-900); } .faq .section-description { color: var(--gray-600); } .faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } .faq-item { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); overflow: hidden; transition: var(--transition); } .faq-item:hover { box-shadow: var(--shadow-md); border-color: var(--gray-200); } .faq-item.active { box-shadow: var(--shadow-lg); border-color: var(--primary-blue); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; background: transparent; border: none; font-size: 1.125rem; font-weight: 600; color: var(--gray-900); text-align: left; cursor: pointer; transition: var(--transition); } .faq-question:hover { color: var(--primary-blue); } .faq-icon { font-size: 1rem; color: var(--gray-600); transition: transform 0.3s ease; } .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--primary-blue); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-answer-content { padding: 0 2rem 1.5rem 2rem; color: var(--gray-600); line-height: 1.7; font-size: 1rem; } /* Dark theme overrides for FAQ items */ body.dark-theme .faq-item { background: #1e293b; border-color: #334155; } body.dark-theme .faq-question { color: #f8fafc; } body.dark-theme .faq-answer-content { color: #cbd5e1; } /* CONTACT/PRICING GRADIENT WRAPPER */ .contact-gradient-wrapper { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%); } .contact-gradient-wrapper .pricing { background: transparent; } .contact-gradient-wrapper .pricing .section-badge { background: rgba(255, 255, 255, 0.2); color: var(--white); } .contact-gradient-wrapper .pricing .section-title { color: var(--white); } .contact-gradient-wrapper .pricing .section-description { color: rgba(255, 255, 255, 0.9); } /* FOOTER */ .footer { background: var(--gray-900); color: white; padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .footer-logo .logo-img { height: 2.25rem; width: auto; object-fit: contain; } .footer-logo strong { color: var(--primary-blue); font-weight: inherit; } .footer-column p { color: var(--gray-300); margin-bottom: 1.5rem; } .social-links { display: flex; gap: 1rem; } .social-links a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: var(--transition); } .social-links a:hover { background: var(--primary-blue); transform: translateY(-3px); } .footer-column h4 { margin-bottom: 1.5rem; font-size: 1.1rem; } .footer-column ul { list-style: none; } .footer-column ul li { margin-bottom: 0.75rem; } .footer-column ul li a { color: var(--gray-300); text-decoration: none; transition: var(--transition); } .footer-column ul li a:hover { color: var(--primary-blue); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--gray-400); } .footer-links { display: flex; gap: 2rem; } .footer-links a { color: var(--gray-400); text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--primary-blue); } /* ========================================================================== RESPONSIVIDADE (Design Adaptável / Media Queries) ========================================================================== */ /* As @media queries permitem aplicar estilos CSS específicos baseados no tamanho da tela do dispositivo */ /* Celulares grandes e Tablets pequenos (telas com até 1024px de largura) */ @media (max-width: 1024px) { .hero-title { font-size: 2.5rem; /* Reduz o tamanho do título para caber melhor */ } /* Transforma os grids de 3 colunas em 2 colunas para não espremer os cards */ .features-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); } /* Transforma o layout de 2 colunas dos benefícios em 1 única coluna (vertical) */ .benefits-wrapper { grid-template-columns: 1fr; } } /* Celulares comuns (telas com até 768px de largura) */ @media (max-width: 768px) { /* Oculta o menu de navegação horizontal tradicional */ .nav-menu { display: none; } /* Estilos para quando o menu mobile está ativado/aberto (adicionado via JS) */ .nav-menu.active { display: flex; /* Exibe o menu usando Flexbox */ flex-direction: column; /* Alinha os itens verticalmente, um abaixo do outro */ position: absolute; /* Tira o menu do fluxo normal e posiciona-o de forma flutuante */ top: 100%; /* Posiciona logo abaixo do cabeçalho */ left: 0; right: 0; background: #0f766e; /* Fundo verde #0f766e opaco no celular */ padding: 2rem; box-shadow: var(--shadow-lg); border-top: 1px solid rgba(255, 255, 255, 0.15); gap: 1.5rem; z-index: 999; max-height: calc(100vh - 70px); /* Garante que o menu possa ser rolado em telas pequenas */ overflow-y: auto; } .nav-menu.active li { width: 100%; text-align: center; } .nav-menu.active li a { display: block; padding: 0.5rem 0; font-size: 1.1rem; } /* Oculta os botões normais de login da navbar no celular */ .nav-buttons { display: none; } /* Mostra elementos que são exclusivos de celular (como o botão de login dentro do menu hambúrguer) */ .mobile-only { display: block !important; } /* Exibe o botão Hambúrguer */ .hamburger { display: flex; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .hero { margin-top: 70px; min-height: calc(100vh - 70px); padding: 40px 0 60px; } .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-title { font-size: 2rem; } .hero-title br { display: none; /* Permite ao título fluir naturalmente no celular */ } .hero-buttons { flex-direction: column; } .hero-features-list { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; margin: 0 auto 2.5rem auto; } .hero-features-list li { align-items: flex-start; } .hero-features-list li .check-icon { margin-top: 0.2rem; } .hero-stats { justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .hero-image { display: none; } .features-grid, .testimonials-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 1.25rem; } .testimonial-text { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; } .faq-question { padding: 1.25rem 1.5rem; font-size: 1rem; } .faq-answer-content { padding: 0 1.5rem 1.25rem 1.5rem; font-size: 0.9rem; } /* Simulator Mobile Optimization */ .teachers-panel, .class-grid-container { padding: 1.25rem; } .teachers-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .teachers-list .grid-header { display: none; } .teacher-token { flex: 1 1 calc(50% - 0.5rem); padding: 0.5rem 0.75rem; min-height: auto; } .teacher-token .avatar { width: 32px; height: 32px; font-size: 0.9rem; } .teacher-token .info strong { font-size: 0.85rem; } .teacher-token .info span { font-size: 0.7rem; } .grids-panel { grid-template-columns: 1fr; gap: 1.5rem; } .timetable-grid { grid-template-columns: auto 1fr; gap: 0.5rem; } .time-slot-label { font-size: 0.75rem; min-height: 56px; white-space: nowrap; } .grid-cell { padding: 0.5rem; min-height: 56px; } .grid-cell .placeholder { font-size: 0.75rem; } .grid-cell-content { gap: 0.5rem; } .grid-cell-content .avatar-small { width: 28px; height: 28px; font-size: 0.85rem; } .grid-cell-content .cell-info strong { font-size: 0.8rem; } .grid-cell-content .cell-info span { font-size: 0.7rem; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } .cta-content h2 { font-size: 2rem; } .cta-buttons { flex-direction: column; } } @media (max-width: 480px) { .logo { font-size: 1.5rem; } .logo-img { height: 2.3rem; } .section-title { font-size: 1.6rem; } .hero-title { font-size: 1.6rem; } .btn-large { padding: 0.875rem 1.25rem; font-size: 1rem; width: 100%; justify-content: center; } .pricing-custom-container { padding: 1.25rem 1rem; border-radius: 16px; } .pricing-cta-card { padding: 1.75rem 1rem; border-radius: 16px; } .teacher-token { flex: 1 1 100%; } .class-grid-container { padding: 1rem 0.75rem; } .time-slot-label { font-size: 0.7rem; padding: 0 0.25rem; } .grid-cell { padding: 0.35rem; } } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-card { background: var(--white); width: 100%; max-width: 480px; padding: 3rem; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; transform: translateY(30px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid var(--gray-200); margin: auto; } .modal-overlay.active .modal-card { transform: translateY(0); } .modal-close-btn { position: absolute; top: 1.5rem; right: 1.5rem; background: var(--gray-100); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-600); cursor: pointer; transition: var(--transition); } .modal-close-btn:hover { background: var(--gray-200); color: var(--gray-900); transform: rotate(90deg); } .modal-logo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.75rem; font-weight: 600; color: var(--gray-900); margin-bottom: 1.5rem; } .modal-logo i { color: var(--primary-blue); font-size: 2.25rem; } .modal-logo strong { color: var(--primary-blue); } .modal-title { font-size: 1.75rem; font-weight: 800; color: var(--gray-900); text-align: center; margin-bottom: 0.5rem; } .modal-subtitle { font-size: 0.95rem; color: var(--gray-600); text-align: center; margin-bottom: 2rem; } .modal-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-size: 0.9rem; font-weight: 600; color: var(--gray-700); } .label-wrapper { display: flex; justify-content: space-between; align-items: center; } .forgot-password-link { font-size: 0.85rem; color: var(--primary-blue); text-decoration: none; font-weight: 500; transition: var(--transition); } .forgot-password-link:hover { color: var(--dark-blue); text-decoration: underline; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 1rem; color: var(--gray-600); font-size: 1.1rem; pointer-events: none; transition: var(--transition); } .input-wrapper input { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; border: 2px solid var(--gray-200); border-radius: 12px; font-size: 1rem; color: var(--gray-900); background: var(--white); outline: none; transition: var(--transition); } .input-wrapper input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15); } .input-wrapper input:focus+.input-icon, .input-wrapper input:focus~.input-icon { color: var(--primary-blue); } .password-toggle-btn { position: absolute; right: 1rem; background: transparent; border: none; color: var(--gray-600); cursor: pointer; font-size: 1.1rem; padding: 0.25rem; transition: var(--transition); } .password-toggle-btn:hover { color: var(--primary-blue); } .remember-me { display: flex; align-items: center; gap: 0.5rem; } .remember-me input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-blue); cursor: pointer; } .remember-me label { font-size: 0.9rem; color: var(--gray-600); cursor: pointer; user-select: none; } .btn-submit { width: 100%; justify-content: center; padding: 1rem; font-size: 1.05rem; margin-top: 0.5rem; } .modal-footer { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--gray-600); } .modal-footer a { color: var(--primary-blue); text-decoration: none; font-weight: 600; transition: var(--transition); } .modal-footer a:hover { color: var(--dark-blue); text-decoration: underline; } body.modal-open { overflow: hidden; } /* ESTILOS ADICIONAIS PARA SELECT E RESPONSIVIDADE DO MODAL */ .input-wrapper select { width: 100%; padding: 0.875rem 2.75rem 0.875rem 2.75rem; /* Ajustado para ícone à esquerda e seta à direita */ border: 2px solid var(--gray-200); border-radius: 12px; font-size: 1rem; color: var(--gray-900); background: var(--white); outline: none; transition: var(--transition); appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } .input-wrapper select:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15); } .select-arrow { position: absolute; right: 1.25rem; color: var(--gray-600); pointer-events: none; font-size: 0.9rem; transition: var(--transition); } .input-wrapper select:focus ~ .select-arrow { color: var(--primary-blue); transform: translateY(-2px); } /* Ajustes de responsividade do modal */ @media (max-width: 480px) { .modal-card { padding: 2.5rem 1.5rem 2rem; border-radius: 20px; } .modal-title { font-size: 1.5rem; } } .modal-card-visual { width: 42%; background: linear-gradient(135deg, #0f766e 0%, #0d5c56 100%); padding: 3rem; color: white; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .modal-card-form { width: 58%; padding: 3rem; display: flex; flex-direction: column; justify-content: center; } /* Flex Row para agrupar campos */ .modal-form .flex-row { display: flex; gap: 1rem; } .modal-form .flex-row .form-group-item { flex: 1; min-width: 0; /* Prevents overflow of flex items */ } /* Conteúdo interno da parte visual */ .visual-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; z-index: 2; } .visual-logo i { font-size: 2rem; } .visual-content { z-index: 2; margin-bottom: 2rem; } .visual-content h3 { font-size: 1.75rem; font-weight: 800; line-height: 1.3; margin-bottom: 1rem; } .visual-content p { font-size: 0.95rem; opacity: 0.85; line-height: 1.6; margin-bottom: 2rem; } .visual-features { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .visual-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; font-weight: 500; } .visual-features li i { font-size: 1.1rem; opacity: 0.9; } /* Ícones flutuantes decorativos */ .visual-decorations { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; } .visual-decorations .floating-icon { position: absolute; opacity: 0.12; color: white; animation: float-icon 4s ease-in-out infinite; } .visual-decorations .icon-1 { font-size: 5rem; top: 10%; right: 10%; } .visual-decorations .icon-2 { font-size: 4rem; bottom: 15%; left: 10%; animation-delay: 1.5s; } .visual-decorations .icon-3 { font-size: 3.5rem; top: 50%; right: 15%; animation-delay: 3s; } @keyframes float-icon { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(8deg); } } /* RESPONSIVIDADE DO SPLIT CARD */ @media (max-width: 900px) { .modal-card-split { max-width: 90%; } } @media (max-width: 768px) { .modal-card-split { flex-direction: column; max-width: 500px; } .modal-card-visual { display: none; /* Hide visual panel on mobile to optimize space */ } .modal-card-form { width: 100%; padding: 2.5rem 1.5rem; } .modal-card-form .modal-title { font-size: 1.5rem; } } @media (max-width: 480px) { .modal-form .flex-row { flex-direction: column; gap: 1.5rem; } } /* ========================================================================== SIMULADOR DE HORÁRIOS INTERATIVO - ORGANIZAEDU ========================================================================== */ .simulator { background: var(--off-white); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); } .simulator-wrapper { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: stretch; margin-top: 2rem; } @media (max-width: 992px) { .simulator-wrapper { grid-template-columns: 1fr; gap: 2rem; } } .teachers-panel { background: var(--white); padding: 2rem; border-radius: 16px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); display: flex; flex-direction: column; height: 100%; } .teachers-panel h3, .class-grid-container h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; color: var(--gray-900); } .teachers-panel h3 i, .class-grid-container h4 i { color: var(--primary-blue); } .panel-subtitle { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 1.5rem; } .teachers-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0; } .teacher-token { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 2px dashed var(--gray-200); border-radius: 12px; cursor: default; pointer-events: none; transition: var(--transition); min-height: 68px; box-sizing: border-box; } .teacher-token.active-simulation { border-style: solid; border-color: var(--teacher-color); background: var(--white); transform: scale(1.05) translateY(-2px); box-shadow: var(--shadow-lg), 0 0 12px var(--teacher-color); } .teacher-token .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--teacher-color); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .teacher-token .info { display: flex; flex-direction: column; } .teacher-token .info strong { font-size: 0.9rem; color: var(--gray-900); line-height: 1.2; } .teacher-token .info span { font-size: 0.75rem; color: var(--gray-600); } .simulator-actions { display: flex; flex-direction: column; gap: 0.75rem; } .simulator-actions button { width: 100%; justify-content: center; } /* Grids Panel */ .grids-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 768px) { .grids-panel { grid-template-columns: 1fr; } } .class-grid-container { background: var(--white); padding: 2rem; border-radius: 16px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); display: flex; flex-direction: column; height: 100%; } .timetable-grid { display: grid; grid-template-columns: 130px 1fr; gap: 0.75rem; align-items: center; } .grid-header { font-weight: 700; font-size: 0.85rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gray-200); } .time-slot-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-700); display: flex; align-items: center; min-height: 68px; } .grid-cell { background: var(--off-white); border: 2px dashed var(--gray-200); border-radius: 12px; min-height: 68px; display: flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; cursor: default; pointer-events: none; transition: var(--transition); position: relative; user-select: none; box-sizing: border-box; } .grid-cell .placeholder { font-size: 0.85rem; color: var(--gray-400); text-align: center; font-weight: 500; opacity: 0.8; } /* Cell Filled State */ .grid-cell.filled { border-style: solid; border-color: var(--filled-color); background: var(--white); box-shadow: var(--shadow-sm); } .grid-cell-content { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-width: 0; } .grid-cell-content .avatar-small { width: 36px; height: 36px; border-radius: 50%; background: var(--filled-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .grid-cell-content .cell-info { display: flex; flex-direction: column; overflow: hidden; } .grid-cell-content .cell-info strong { font-size: 0.9rem; color: var(--gray-900); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-cell-content .cell-info span { font-size: 0.75rem; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-cell .remove-btn { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gray-200); border: none; color: var(--gray-600); font-size: 0.65rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: var(--transition); } .grid-cell:hover .remove-btn { opacity: 1; } .grid-cell .remove-btn:hover { background: var(--red); color: white; } /* Conflict State */ .grid-cell.conflict { border-color: var(--red) !important; background: #fef2f2 !important; animation: pulse-red 2s infinite; } @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } /* Status Box */ .simulator-status-box { margin-top: 2rem; padding: 1.25rem; border-radius: 12px; background: var(--light-blue); border: 1px solid rgba(15, 118, 110, 0.2); display: flex; align-items: center; gap: 0.75rem; color: var(--primary-blue); font-size: 0.95rem; font-weight: 500; transition: var(--transition); } .simulator-status-box.status-conflict { background: #fef2f2; border-color: rgba(239, 68, 68, 0.2); color: var(--red); } .simulator-status-box.status-success { background: #ecfdf5; border-color: rgba(16, 185, 129, 0.2); color: var(--green); } .simulator-status-box i { font-size: 1.2rem; } /* Animações e Transições Premium do Simulador Automatizado */ @keyframes cellPop { 0% { transform: scale(0.85); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .grid-cell.animate-pop { animation: cellPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes cellFadeOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } } .grid-cell.animate-fade-out { animation: cellFadeOut 0.3s ease forwards; }