/* Cores base para o tema escuro (dark mode) - AGORA É O PADRÃO */ :root { /* Tema Escuro (Padrão) */ --bg-primary: #0a0a0a; --bg-secondary: #111111; --text-primary: #ffffff; /* Cores de Destaque (as mesmas) */ --accent-blue: #1e6bfb; --accent-green: #65a810; --accent-purple: #6d41a1; /* Tons de Cinza */ --gray-light: #28292b; --gray-dark: #d0d5dd; /* Cores de Status */ --status-success: #28a745; --status-warning: #ffc107; --status-error: #dc3545; } /* Cores para o tema claro (light mode) Serão ativadas via uma classe no body, ex: */ body.light-mode { /* Tema Claro */ --bg-primary: #ffffff; --bg-secondary: #fdfdfd; --text-primary: #000000; /* Cores de Destaque (as mesmas) */ --accent-blue: #1e6bfb; --accent-green: #65a810; --accent-purple: #6d41a1; /* Tons de Cinza - Corrigidos para melhor contraste */ --gray-light: #e6e9ed; --gray-dark: #374151; /* Cores de Status */ --status-success: #28a745; --status-warning: #ffc107; --status-error: #dc3545; } /* Estilos globais básicos */ body { background-color: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s; line-height: 1.6; } h1, h2, h3 { color: var(--text-primary); line-height: 1.2; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; text-align: center; margin-bottom: 40px; } h3 { font-size: 1.25rem; } p { color: var(--gray-dark); } a { color: var(--accent-blue); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--accent-purple); } main { max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 60px 0; border-bottom: 1px solid var(--gray-light); } section:last-of-type { border-bottom: none; } /* Header e Navegação */ header { background-color: var(--bg-primary); border-bottom: 1px solid var(--gray-light); position: sticky; top: 0; z-index: 10; } nav.desktop-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 10px 20px; } nav.desktop-nav .logo img { height: 40px; transition: content 0.3s; } nav.desktop-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; } nav.desktop-nav ul a { font-weight: 600; } nav.desktop-nav .actions { display: flex; align-items: center; gap: 15px; } .language-switcher { font-weight: bold; } #theme-switcher, #mobile-theme-switcher { background: var(--accent-blue); color: #fff; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; font-weight: 600; } /* Menu Mobile Fixo Inferior */ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background-color: var(--bg-primary); border-top: 1px solid var(--gray-light); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } .mobile-nav-container { display: flex; justify-content: space-around; align-items: center; padding: 8px 0; max-width: 100%; } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--gray-dark); padding: 8px 4px; border-radius: 8px; transition: all 0.3s ease; min-width: 60px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; } .nav-item:hover, .nav-item:focus { color: var(--accent-blue); background-color: var(--bg-secondary); } .nav-icon { font-size: 18px; margin-bottom: 2px; display: block; } .nav-label { font-size: 10px; font-weight: 500; text-align: center; line-height: 1; } /* Dropdown Invertido */ .mobile-dropdown { position: absolute; bottom: 100%; left: 0; right: 0; background-color: var(--bg-primary); border-top: 1px solid var(--gray-light); border-radius: 16px 16px 0 0; transform: translateY(100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); } .mobile-dropdown.active { transform: translateY(0); opacity: 1; visibility: visible; } .dropdown-content { padding: 20px; } .dropdown-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--gray-light); } .dropdown-header img { height: 30px; } .close-dropdown { background: none; border: none; font-size: 20px; color: var(--gray-dark); cursor: pointer; padding: 5px; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .close-dropdown:hover { background-color: var(--gray-light); color: var(--text-primary); } .dropdown-actions { display: flex; flex-direction: column; gap: 10px; } .dropdown-action { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: none; border: none; border-radius: 8px; text-decoration: none; color: var(--text-primary); font-weight: 500; transition: all 0.3s ease; cursor: pointer; font-family: inherit; font-size: inherit; } .dropdown-action:hover { background-color: var(--bg-secondary); color: var(--accent-blue); } .action-icon { font-size: 18px; } /* Dark mode adjustments for mobile nav */ body.light-mode .mobile-nav { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } body.light-mode .mobile-dropdown { box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); } /* Ajustes para logos no modo claro */ body.light-mode .dropdown-header img, body.light-mode #mobile-logo { content: url("assets/logo-dark.png"); } /* Logos de clientes - modo escuro (padrão) */ .logos-clientes img { height: 40px; transition: all 0.3s ease; filter: invert(1) grayscale(1) brightness(2) opacity(0.7); background: white; padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.05); } .logos-clientes a:hover img { filter: invert(1) grayscale(0) brightness(2) opacity(1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } /* Logos de clientes - modo claro */ body.light-mode .logos-clientes img { filter: grayscale(100%) opacity(0.6); background: white; padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.05); } body.light-mode .logos-clientes a:hover img { filter: grayscale(0%) opacity(1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } /* Partner badges - modo claro */ body.light-mode .partner-badges img { filter: brightness(1); } /* Hero Section - Estilos base consolidados para todas as páginas */ #hero { text-align: center; padding: 80px 20px; background: transparent; } #hero h1 { max-width: 700px; margin: 0 auto 20px; color: var(--text-primary); font-size: 2.5rem; font-weight: 700; line-height: 1.2; } #hero p { max-width: 600px; margin: 0 auto 30px; font-size: 1.1rem; color: var(--gray-dark); line-height: 1.6; } /* CTA Button - Estilos centralizados */ .cta-button { background-color: var(--accent-blue); color: #fff; padding: 15px 30px; border-radius: 5px; font-size: 1.1rem; font-weight: bold; transition: background-color 0.2s; text-decoration: none; display: inline-block; text-align: center; } .cta-button:hover { background-color: var(--accent-purple); color: #fff; } /* Garantir alinhamento central para páginas simples (index.html e en.html) */ #hero:not(.migration-hero):not(:has(.hero-content)) { text-align: center; } #hero:not(.migration-hero):not(:has(.hero-content)) h1, #hero:not(.migration-hero):not(:has(.hero-content)) p, #hero:not(.migration-hero):not(:has(.hero-content)) .cta-button { text-align: center; margin-left: auto; margin-right: auto; } /* Grids de Features e Diferenciais */ .features-grid, .diferenciais-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .feature-card, .diferencial-card { background-color: var(--bg-secondary); padding: 30px; border-radius: 8px; border: 1px solid var(--gray-light); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } body.light-mode .feature-card, body.light-mode .diferencial-card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } /* Seção E-commerce Benefits */ #ecommerce-benefits { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #fff; border-radius: 16px; margin: 40px 0; } #ecommerce-benefits h2, #ecommerce-benefits h3, #ecommerce-benefits h4 { color: #fff; } #ecommerce-benefits p { color: rgba(255, 255, 255, 0.9); } .benefits-container { max-width: 800px; margin: 0 auto; } .benefit-content { text-align: center; } .benefit-content h3 { font-size: 1.8rem; margin-bottom: 20px; } .benefit-content > p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 40px; } .benefit-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; } .highlight-item { display: flex; align-items: flex-start; gap: 15px; text-align: left; } .highlight-icon { font-size: 24px; background: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 50%; flex-shrink: 0; } .highlight-item h4 { margin: 0 0 8px 0; font-size: 1.1rem; } .highlight-item p { margin: 0; font-size: 0.95rem; opacity: 0.9; } /* Seção Clientes */ .logos-clientes { display: flex; justify-content: center; align-items: center; gap: 50px; flex-wrap: wrap; } .logos-clientes img { height: 40px; /* Adjusted for better consistency */ transition: all 0.3s ease; filter: grayscale(100%) opacity(0.6); background: white; padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.05); } .logos-clientes a:hover img { filter: grayscale(0%) opacity(1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } /* Hero com layout em duas colunas */ .hero-content { display: grid; grid-template-columns: 1fr 420px; gap: 32px; align-items: center; max-width: 1200px; margin: 0 auto; } .hero-text { text-align: left; } .hero-visual { display: flex; justify-content: center; } .hero-visual svg { width: 100%; max-width: 360px; height: auto; border-radius: 12px; } .hero-stats { display: flex; gap: 24px; justify-content: flex-start; margin-top: 18px; } .hero-stats .stat-item { background: var(--bg-secondary); padding: 14px 18px; border-radius: 10px; border: 1px solid var(--gray-light); display: flex; flex-direction: column; align-items: flex-start; } .stat-number { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); } .stat-label { font-size: 0.95rem; color: var(--gray-dark); } @media (max-width: 980px) { .hero-content { grid-template-columns: 1fr; } .hero-visual { margin-top: 20px; } } /* Seção Contato */ .contato-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .whatsapp-button { display: inline-block; background-color: var(--accent-green); color: #fff; padding: 15px 25px; border-radius: 50px; font-weight: bold; margin-top: 20px; } .whatsapp-button:hover { background-color: #558f0e; /* um pouco mais escuro */ color: #fff; } .contact-form { display: flex; flex-direction: column; gap: 15px; } .contact-form label { font-weight: bold; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid var(--gray-light); border-radius: 5px; background-color: var(--bg-primary); color: var(--text-primary); box-sizing: border-box; font-family: inherit; font-size: 14px; } .contact-form button { background-color: var(--accent-blue); color: #fff; padding: 15px; border: none; border-radius: 5px; font-size: 1rem; font-weight: bold; cursor: pointer; } /* Footer */ footer { background-color: var(--bg-secondary); color: var(--gray-dark); text-align: center; padding: 40px 20px 20px; border-top: 1px solid var(--gray-light); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 30px; text-align: left; max-width: 1200px; margin-left: auto; margin-right: auto; } .footer-section h4 { color: var(--text-primary); font-size: 1.1rem; margin-bottom: 15px; font-weight: 600; } .footer-section p { margin: 8px 0; font-size: 0.9rem; } .footer-section a { color: var(--accent-blue); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .footer-section a:hover { color: var(--accent-purple); } .partner-badges { text-align: center; margin: 30px 0; padding-top: 20px; border-top: 1px solid var(--gray-light); } .partner-badges h4 { margin-bottom: 20px; color: var(--gray-dark); font-weight: 600; } .partner-badges img { max-height: 100px; opacity: 0.9; margin: 0 15px; transition: filter 0.3s ease; filter: brightness(1.4); } .partners-grid { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; } /* Partner badges - modo claro */ body.light-mode .partner-badges img { filter: brightness(1); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding-top: 20px; border-top: 1px solid var(--gray-light); font-size: 0.9rem; } .footer-links { display: flex; align-items: center; gap: 10px; } .footer-links a { color: var(--gray-dark); text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--accent-blue); } .footer-links span { color: var(--gray-light); } /* Responsividade */ @media (max-width: 768px) { h1 { font-size: 2rem; } /* Ocultar navegação desktop */ header { display: none; } /* Mostrar navegação mobile */ .mobile-nav { display: block; } /* Adicionar padding inferior para compensar o menu fixo */ body { padding-bottom: 80px; } .contato-container { grid-template-columns: 1fr; gap: 30px; } /* Melhorias específicas para o formulário mobile */ .contact-form { padding: 0 10px; } .contact-form input, .contact-form textarea { font-size: 16px; /* Evita zoom no iOS */ padding: 15px 12px; } .contact-form button { padding: 18px 15px; font-size: 1.1rem; } /* Ajustes para o hero section */ #hero { padding: 60px 20px; } /* Ajustes para as grids */ .features-grid, .diferenciais-grid { grid-template-columns: 1fr; gap: 20px; } /* Ajustes para logos de clientes */ .logos-clientes { gap: 30px; } .logos-clientes img { height: 35px; } /* Footer responsivo */ .footer-content { grid-template-columns: 1fr; text-align: center; gap: 20px; } .footer-bottom { flex-direction: column; text-align: center; gap: 10px; } } @media (min-width: 769px) { /* Garantir que o menu mobile não apareça em desktop */ .mobile-nav { display: none !important; } } /* ========================= PÁGINA 404 ERROR ========================= */ #error-404 { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px 20px 40px; background: linear-gradient( 135deg, var(--bg-primary) 0%, var(--bg-secondary) 100% ); } .error-container { max-width: 800px; width: 100%; text-align: center; } .error-content { background: var(--card-bg); border-radius: 20px; padding: 60px 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); border: 1px solid var(--border-color); } .error-visual { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; } .error-number { font-size: 8rem; font-weight: 900; color: var(--accent-blue); text-shadow: 0 4px 20px rgba(30, 107, 251, 0.3); line-height: 1; } .error-icon { font-size: 4rem; opacity: 0.7; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .error-content h1 { font-size: 2.5rem; margin-bottom: 20px; color: var(--text-primary); font-weight: 700; } .error-description { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 40px; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .error-actions { display: flex; gap: 20px; justify-content: center; margin-bottom: 50px; flex-wrap: wrap; } .error-actions .cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .error-actions .cta-button.primary { background: linear-gradient(135deg, var(--accent-blue) 0%, #1557d1 100%); color: white; } .error-actions .cta-button.primary:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(30, 107, 251, 0.4); } .error-actions .cta-button.secondary { background: var(--card-bg); color: var(--text-primary); border: 2px solid var(--border-color); } .error-actions .cta-button.secondary:hover { border-color: var(--accent-blue); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .button-icon { font-size: 1.2rem; } .quick-links { padding-top: 30px; border-top: 1px solid var(--border-color); } .quick-links h3 { color: var(--text-primary); margin-bottom: 25px; font-size: 1.3rem; font-weight: 600; } .links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; max-width: 500px; margin: 0 auto; } .quick-link { display: flex; align-items: center; gap: 10px; padding: 15px 20px; background: var(--bg-secondary); border-radius: 12px; text-decoration: none; color: var(--text-primary); transition: all 0.3s ease; border: 1px solid var(--border-color); } .quick-link:hover { background: var(--accent-blue); color: white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(30, 107, 251, 0.3); } .link-icon { font-size: 1.3rem; opacity: 0.8; } /* Responsividade da página 404 */ @media (max-width: 768px) { #error-404 { padding: 40px 15px 20px; } .error-content { padding: 40px 25px; } .error-number { font-size: 5rem; } .error-icon { font-size: 2.5rem; } .error-content h1 { font-size: 1.8rem; } .error-description { font-size: 1rem; } .error-actions { flex-direction: column; align-items: center; } .error-actions .cta-button { width: 100%; max-width: 280px; justify-content: center; } .links-grid { grid-template-columns: 1fr; gap: 12px; } .quick-link { padding: 12px 16px; } } /* Split de Pedidos Section */ #split-pedidos { padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .split-explanation { margin-top: 40px; } .split-intro { text-align: center; margin-bottom: 60px; } .split-intro h3 { font-size: 2rem; margin-bottom: 20px; color: var(--accent-blue); } .split-methods h3 { text-align: center; font-size: 1.8rem; margin-bottom: 40px; } .split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .split-method { background: var(--card-bg); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); transition: transform 0.3s ease, box-shadow 0.3s ease; } .split-method:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(30, 107, 251, 0.1); } .split-method h4 { color: var(--accent-blue); margin-bottom: 15px; font-size: 1.2rem; } /* FAQ Section */ #faq-split { padding: 80px 20px; max-width: 1000px; margin: 0 auto; } .faq-container { margin-top: 40px; } .faq-item { background: var(--card-bg); margin-bottom: 20px; border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; } .faq-item h3 { background: var(--accent-blue); color: white; padding: 20px 30px; margin: 0; font-size: 1.1rem; } .faq-item p { padding: 25px 30px; margin: 0; line-height: 1.6; } @media (max-width: 768px) { .split-grid { grid-template-columns: 1fr; gap: 20px; } .split-method { padding: 20px; } .faq-item h3 { padding: 15px 20px; font-size: 1rem; } .faq-item p { padding: 20px; } } /* Loading animado para formulário de contato */ .loading { display: flex; width: 32px; height: 32px; margin-top: 5px; margin-bottom: 5px; border-radius: var(--radius, 8px); background-color: var(--lightColor, #fff); animation: loadingAnimated 5s infinite; justify-content: center; align-items: center; } @keyframes loadingAnimated { 0% { transform: rotate(0deg); border: 1px solid var(--selectColor, #1e6bfb); } 25% { transform: rotate(180deg); border: 1px solid var(--green, #1ecb81); } 50% { transform: rotate(360deg); border: 1px solid var(--lightColor, #fff); } 75% { transform: rotate(540deg); border: 1px solid var(--red, #e74c3c); } 100% { transform: rotate(0deg); border: 1px solid var(--selectColor, #1e6bfb); } } /* Estilos para input de telefone */ input[type="tel"] { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; position: relative; } /* Indicador visual para números internacionais */ input[type="tel"][data-international="true"] { border-left: 3px solid #4caf50; padding-left: 15px; } input[type="tel"][data-invalid="true"] { border-left: 3px solid #f44336; padding-left: 15px; } /* Security Block Modal Styles */ .security-block-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; display: flex; align-items: center; justify-content: center; } .security-block-overlay { background: rgba(139, 0, 0, 0.8); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); } .security-block-modal { background: var(--bg-primary); border-radius: 12px; padding: 40px 30px; max-width: 450px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(139, 0, 0, 0.4); border: 2px solid #dc3545; } .security-icon { font-size: 3rem; margin-bottom: 20px; display: block; } .security-block-modal h3 { color: #dc3545; margin-bottom: 15px; font-size: 1.3rem; font-weight: 700; } .security-block-modal p { color: var(--text-secondary); margin-bottom: 25px; line-height: 1.5; } .security-block-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .try-again-btn, .contact-direct-btn { padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .try-again-btn { background: var(--bg-secondary); color: var(--text-primary); } .try-again-btn:hover { background: var(--gray-light); } .contact-direct-btn { background: #25d366; color: white; } .contact-direct-btn:hover { background: #1da851; color: white; } /* reCAPTCHA v2 Modal Styles */ .recaptcha-v2-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; } .recaptcha-v2-overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; } .recaptcha-v2-modal { background: var(--bg-primary); border-radius: 12px; padding: 30px; max-width: 450px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); border: 1px solid var(--gray-light); } .recaptcha-v2-modal h3 { color: var(--text-primary); margin-bottom: 15px; font-size: 1.4rem; } .recaptcha-v2-modal p { color: var(--gray-dark); margin-bottom: 25px; } .recaptcha-v2-buttons { margin-top: 25px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } .recaptcha-v2-buttons button { padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; min-width: 120px; } .cancel-recaptcha { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--gray-light); } .cancel-recaptcha:hover { background: var(--gray-light); } .submit-recaptcha { background: var(--accent-blue); color: white; } .submit-recaptcha:hover:not(:disabled) { background: var(--accent-purple); transform: translateY(-2px); } .submit-recaptcha:disabled { background: var(--gray-light); color: var(--gray-dark); cursor: not-allowed; opacity: 0.6; } /* reCAPTCHA widget container */ #recaptcha-v2-widget { margin: 20px 0; display: flex; justify-content: center; } /* Form thanks message */ .form-thanks { background: var(--bg-secondary); padding: 40px 30px; border-radius: 12px; text-align: center; border: 1px solid var(--gray-light); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .form-thanks h3 { color: var(--accent-green); margin-bottom: 15px; font-size: 1.5rem; } .form-thanks p { color: var(--text-primary); font-size: 1.1rem; margin: 0; } /* Otimizações mobile para telefone e reCAPTCHA */ @media (max-width: 768px) { input[type="tel"] { font-size: 16px; /* Evita zoom no iOS */ padding: 15px 12px; } input[type="tel"][data-international="true"], input[type="tel"][data-invalid="true"] { padding-left: 18px; } .recaptcha-v2-modal { margin: 15px; padding: 25px 20px; max-width: none; width: calc(100% - 30px); } .recaptcha-v2-modal h3 { font-size: 1.2rem; } .recaptcha-v2-buttons { flex-direction: column; align-items: center; } .recaptcha-v2-buttons button { width: 100%; max-width: 200px; } .form-thanks { padding: 30px 20px; } .form-thanks h3 { font-size: 1.3rem; } .form-thanks p { font-size: 1rem; } } /* Dark mode adjustments para reCAPTCHA */ body.light-mode .recaptcha-v2-modal { background: var(--bg-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } body.light-mode .form-thanks { background: var(--bg-secondary); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } /* ===== PÁGINAS ESPECÍFICAS - ESTILOS ORGANIZADOS ===== */ /* Hero Section - Estilos base para index.html e en.html */ #hero { text-align: center; padding: 80px 20px; background: transparent; } #hero h1 { max-width: 700px; margin: 0 auto 20px; color: var(--text-primary); font-size: 2.5rem; font-weight: 700; line-height: 1.2; } #hero p { max-width: 600px; margin: 0 auto 30px; font-size: 1.1rem; color: var(--gray-dark); line-height: 1.6; } /* Hero Section - Páginas de migração (migration.html e migracao.html) */ #hero.migration-hero, #hero:has(.hero-content) { text-align: left; padding: 80px 20px; border-bottom: none; background: linear-gradient( 180deg, rgba(30, 107, 251, 0.12) 0%, rgba(0, 0, 0, 0) 100% ); } #hero.migration-hero h1, #hero:has(.hero-content) h1 { max-width: none; margin: 8px 0 16px 0; text-align: left; } #hero.migration-hero p, #hero:has(.hero-content) p { max-width: 780px; margin-bottom: 18px; text-align: left; } #hero .hero-badge { display: inline-block; background: rgba(30, 107, 251, 0.12); color: var(--accent-blue); padding: 8px 12px; border-radius: 999px; font-weight: 700; margin-bottom: 16px; } #hero h1 { font-size: 2.25rem; margin: 8px 0 16px 0; } #hero p { color: var(--gray-dark); max-width: 780px; margin-bottom: 18px; } .hero-features { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0 0 20px 0; flex-wrap: wrap; } .hero-features li { background: var(--bg-secondary); color: var(--text-primary); padding: 8px 12px; border-radius: 8px; font-weight: 600; } /* CTAs estilizados */ .cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; } .cta-button.primary { background: linear-gradient(90deg, var(--accent-blue), #00d4ff); color: #fff; } .cta-button.secondary { background: transparent; color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.06); } /* Plataformas */ .platform-list { display: flex; gap: 10px; flex-wrap: wrap; } .platform-tag { padding: 6px 10px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-weight: 600; } .platform-tag.featured { background: linear-gradient( 90deg, rgba(30, 107, 251, 0.12), rgba(0, 212, 255, 0.06) ); color: var(--accent-blue); box-shadow: 0 6px 18px rgba(30, 107, 251, 0.06); } .platform-note { color: var(--gray-dark); margin-top: 10px; font-size: 0.95rem; } @media (max-width: 720px) { #hero { padding: 40px 16px; } #hero h1 { font-size: 1.6rem; } .hero-features { flex-direction: column; } } /* Hero com background especial para páginas de migração */ #hero.migration-hero::before, #hero:has(.hero-content)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient( circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50% ), radial-gradient( circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50% ); pointer-events: none; } #hero.migration-hero *, #hero:has(.hero-content) * { position: relative; z-index: 2; } /* Estilos especiais para texto destacado nas páginas de migração */ #hero.migration-hero h1 strong, #hero:has(.hero-content) h1 strong { background: linear-gradient(45deg, var(--accent-blue), #00d4ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-ctas { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .cta-button { padding: 15px 35px; border-radius: 50px; font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: all 0.3s ease; border: 2px solid transparent; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .cta-button.primary { background: linear-gradient(45deg, #28a745, #20c997); color: #ffffff; } .cta-button.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4); } .cta-button.secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.5); } .cta-button.secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: translateY(-2px); } /* Grid de Problemas */ .problems-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 50px; } .problem-card { background: var(--bg-secondary); padding: 35px 25px; border-radius: 20px; text-align: center; border: 1px solid var(--gray-light); transition: all 0.3s ease; position: relative; overflow: hidden; } .problem-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .problem-card:hover::before { opacity: 0.05; } .problem-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); border-color: var(--accent-blue); } .problem-card > * { position: relative; z-index: 2; } .problem-icon { font-size: 3.5rem; margin-bottom: 20px; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } .problem-card h3 { color: var(--text-primary); margin-bottom: 15px; font-size: 1.3rem; font-weight: 600; } .problem-card p { color: var(--gray-dark); font-size: 1rem; line-height: 1.6; } /* Grid de Serviços */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 35px; margin-top: 50px; } .service-card { background: var(--bg-secondary); padding: 40px 30px; border-radius: 25px; border: 1px solid var(--gray-light); transition: all 0.4s ease; position: relative; overflow: hidden; } .service-card::after { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--accent-blue), var(--accent-green)); transform: scaleY(0); transition: transform 0.3s ease; transform-origin: top; } .service-card:hover::after { transform: scaleY(1); } .service-card:hover { transform: translateX(8px); box-shadow: -8px 10px 30px rgba(0, 0, 0, 0.15); } .service-icon { font-size: 3rem; margin-bottom: 25px; display: block; opacity: 0.9; } .service-card h3 { color: var(--text-primary); margin-bottom: 20px; font-size: 1.4rem; font-weight: 600; } .service-card ul { list-style: none; padding: 0; margin: 0; } .service-card li { color: var(--gray-dark); padding: 8px 0; border-bottom: 1px solid var(--gray-light); position: relative; padding-left: 25px; } .service-card li:last-child { border-bottom: none; } .service-card li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--accent-green); font-weight: bold; } /* Timeline do Processo */ .process-timeline { position: relative; max-width: 900px; margin: 50px auto 0; } .process-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple)); transform: translateX(-50%); } .process-step { display: flex; align-items: center; margin-bottom: 50px; position: relative; } .process-step:nth-child(even) { flex-direction: row-reverse; } .step-number { width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: bold; font-size: 1.5rem; z-index: 3; position: relative; box-shadow: 0 4px 15px rgba(30, 107, 251, 0.3); } .step-content { background: var(--bg-secondary); padding: 30px; border-radius: 20px; border: 1px solid var(--gray-light); margin-left: 30px; flex: 1; max-width: 400px; position: relative; } .process-step:nth-child(even) .step-content { margin-left: 0; margin-right: 30px; } .step-content::before { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 12px solid transparent; transform: translateY(-50%); } .step-content::before { left: -24px; border-right-color: var(--gray-light); } .process-step:nth-child(even) .step-content::before { left: auto; right: -24px; border-left-color: var(--gray-light); border-right-color: transparent; } .step-content h3 { color: var(--text-primary); margin-bottom: 15px; font-size: 1.3rem; } .step-content p { color: var(--gray-dark); margin: 0; line-height: 1.6; } /* Container de Plataformas */ .platforms-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 50px; } .platforms-from, .platforms-to { background: var(--bg-secondary); padding: 40px 30px; border-radius: 25px; border: 1px solid var(--gray-light); text-align: center; } .platforms-from h3, .platforms-to h3 { color: var(--text-primary); margin-bottom: 30px; font-size: 1.4rem; } .platform-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .platform-tag { background: var(--gray-light); color: var(--text-primary); padding: 12px 20px; border-radius: 25px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; border: 1px solid transparent; } .platform-tag:hover { background: var(--accent-blue); color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30, 107, 251, 0.3); } .platform-tag.featured { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #ffffff; font-weight: 600; box-shadow: 0 4px 15px rgba(30, 107, 251, 0.2); } .platform-tag.featured:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(30, 107, 251, 0.4); } /* Grid de Garantias */ .guarantees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 50px; } .guarantee-card { background: var(--bg-secondary); padding: 40px 30px; border-radius: 25px; text-align: center; border: 1px solid var(--gray-light); transition: all 0.4s ease; position: relative; overflow: hidden; } .guarantee-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( from 0deg, transparent, var(--accent-blue), transparent ); opacity: 0; transition: opacity 0.3s ease; animation: rotate 6s linear infinite; } @keyframes rotate { to { transform: rotate(360deg); } } .guarantee-card:hover::before { opacity: 0.1; } .guarantee-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); border-color: var(--accent-blue); } .guarantee-card > * { position: relative; z-index: 2; } .guarantee-icon { font-size: 4rem; margin-bottom: 25px; display: block; opacity: 0.9; } .guarantee-card h3 { color: var(--text-primary); margin-bottom: 20px; font-size: 1.4rem; font-weight: 600; } .guarantee-card p { color: var(--gray-dark); line-height: 1.7; margin: 0; } /* Grid de Depoimentos */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; margin-top: 50px; } .testimonial-card { background: var(--bg-secondary); padding: 40px; border-radius: 25px; border: 1px solid var(--gray-light); transition: all 0.3s ease; position: relative; } .testimonial-card::before { content: '"'; position: absolute; top: 20px; right: 30px; font-size: 4rem; color: var(--accent-blue); opacity: 0.2; font-family: serif; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); border-color: var(--accent-blue); } .testimonial-content { margin-bottom: 25px; } .testimonial-content p { color: var(--gray-dark); font-style: italic; line-height: 1.7; margin: 0; font-size: 1.1rem; } .testimonial-author { border-top: 1px solid var(--gray-light); padding-top: 20px; } .testimonial-author h4 { color: var(--text-primary); margin: 0 0 5px 0; font-size: 1.1rem; } .testimonial-author p { color: var(--gray-dark); margin: 0; font-size: 0.9rem; } /* Formulário da Migração */ .migration-form { background: var(--bg-secondary); padding: 50px 40px; border-radius: 25px; border: 1px solid var(--gray-light); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .migration-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; } .migration-form .form-group { margin-bottom: 25px; } .migration-form label { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 8px; font-size: 1rem; } .migration-form input, .migration-form select, .migration-form textarea { width: 100%; padding: 15px 20px; border: 2px solid var(--gray-light); border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; transition: all 0.3s ease; box-sizing: border-box; } .migration-form input:focus, .migration-form select:focus, .migration-form textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(30, 107, 251, 0.1); transform: translateY(-2px); } .migration-form .radio-group { display: flex; flex-direction: column; gap: 15px; } .migration-form .radio-label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 15px; border-radius: 12px; border: 2px solid var(--gray-light); transition: all 0.3s ease; } .migration-form .radio-label:hover { border-color: var(--accent-blue); background: rgba(30, 107, 251, 0.05); } .migration-form .radio-label input[type="radio"] { width: auto; margin: 0; } .submit-button { width: 100%; padding: 18px 30px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: #ffffff; border: none; border-radius: 50px; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 15px; box-shadow: 0 4px 20px rgba(30, 107, 251, 0.3); } .submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(30, 107, 251, 0.4); } .button-icon { font-size: 1.3rem; } /* Responsividade para Mobile */ @media (max-width: 768px) { #hero { padding: 60px 20px; } /* Para páginas de migração */ #hero.migration-hero { margin: 10px; border-radius: 15px; } #hero h1 { font-size: 2.2rem; } #hero p { font-size: 1rem; padding: 0 15px; } /* Garantir alinhamento central para index e en */ #hero:not(.migration-hero):not(:has(.hero-content)) h1, #hero:not(.migration-hero):not(:has(.hero-content)) p { text-align: center; margin-left: auto; margin-right: auto; } .hero-ctas { flex-direction: column; align-items: center; } .cta-button { width: 100%; max-width: 300px; text-align: center; } .problems-grid, .services-grid, .guarantees-grid { grid-template-columns: 1fr; gap: 20px; } .platforms-container { grid-template-columns: 1fr; gap: 30px; } .process-timeline::before { left: 30px; } .process-step, .process-step:nth-child(even) { flex-direction: row; } .step-number { margin-left: 0; margin-right: 20px; width: 50px; height: 50px; font-size: 1.2rem; } .step-content, .process-step:nth-child(even) .step-content { margin-left: 0; margin-right: 0; max-width: none; } .step-content::before, .process-step:nth-child(even) .step-content::before { display: none; } .testimonials-grid { grid-template-columns: 1fr; } .migration-form { padding: 30px 20px; } .migration-form .form-row { grid-template-columns: 1fr; gap: 20px; } } /* Estilos adicionais para novos elementos */ .hero-badge { display: inline-block; background: rgba(255, 255, 255, 0.2); color: #ffffff; padding: 8px 20px; border-radius: 25px; font-size: 0.9rem; font-weight: 600; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .hero-stats { display: flex; justify-content: center; gap: 40px; margin: 30px 0; flex-wrap: wrap; } .stat-item { text-align: center; color: #ffffff; } .stat-number { display: block; font-size: 2.5rem; font-weight: 700; background: linear-gradient(45deg, #ffd700, #ffed4e); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 5px; } .stat-label { font-size: 0.9rem; opacity: 0.9; font-weight: 500; } .section-header { text-align: center; margin-bottom: 50px; } .section-header h2 { color: var(--text-primary); font-size: 2.2rem; margin-bottom: 15px; font-weight: 700; } .section-subtitle { color: var(--gray-dark); font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.8; } /* Responsividade para novos elementos */ @media (max-width: 768px) { .hero-badge { font-size: 0.8rem; padding: 6px 16px; } .hero-stats { gap: 30px; } .stat-number { font-size: 2rem; } .stat-label { font-size: 0.8rem; } .section-header h2 { font-size: 1.8rem; } .section-subtitle { font-size: 1rem; padding: 0 20px; } } /* ===== FIM DOS ESTILOS DA PÁGINA DE MIGRAÇÃO ===== */ /* ===== ESTILOS PARA CARREGAMENTO DO RECAPTCHA ===== */ /* Estado de carregamento dos formulários */ form.recaptcha-loading { pointer-events: none; opacity: 0.7; filter: grayscale(0.3); } /* Overlay de carregamento do reCAPTCHA */ .recaptcha-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); background: linear-gradient( 135deg, var(--bg-primary) 0%, var(--bg-secondary) 100% ); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; border-radius: 8px; border: 2px solid var(--accent-blue); box-shadow: 0 4px 20px rgba(30, 107, 251, 0.1); } .loading-content { text-align: center; padding: 2rem; color: var(--text-primary); } .loading-content p { margin: 1rem 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; color: var(--accent-blue); } .loading-content small { color: var(--gray-dark); font-size: 0.9rem; opacity: 0.8; } /* Spinner de carregamento */ .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--gray-light); border-top: 3px solid var(--accent-blue); border-radius: 50%; animation: recaptcha-spin 1s linear infinite; margin: 0 auto 1rem auto; } @keyframes recaptcha-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Botões em estado de carregamento */ button[disabled]:contains("🔄"), input[disabled][value*="🔄"] { background: var(--gray-light) !important; color: var(--text-primary) !important; cursor: not-allowed !important; opacity: 0.8; animation: recaptcha-pulse 2s ease-in-out infinite; } @keyframes recaptcha-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } /* Estilos responsivos para o overlay */ @media (max-width: 768px) { .loading-content { padding: 1.5rem; } .loading-content p { font-size: 1rem; } .loading-spinner { width: 32px; height: 32px; border-width: 2px; } } /* Indicador visual para formulários aguardando reCAPTCHA */ form.recaptcha-loading::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--accent-blue), var(--accent-green)); border-radius: 10px; z-index: -1; animation: recaptcha-glow 3s ease-in-out infinite; } @keyframes recaptcha-glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } /* ===== FIM DOS ESTILOS DO RECAPTCHA ===== */ /* ===== AJUSTES DE CONTRASTE PARA MODO CLARO ===== */ /* Melhorar contraste do hero no modo claro */ body.light-mode #hero { background: linear-gradient( 180deg, rgba(30, 107, 251, 0.08) 0%, rgba(0, 0, 0, 0) 100% ); } body.light-mode #hero .hero-badge { background: rgba(30, 107, 251, 0.15); color: var(--accent-blue); border: 1px solid rgba(30, 107, 251, 0.2); } /* Garantir contraste adequado para textos no modo claro */ body.light-mode #hero h1 { color: var(--text-primary); } body.light-mode #hero p { color: var(--gray-dark); } /* Melhorar contraste dos cards no modo claro */ body.light-mode .hero-features li { background: var(--bg-secondary); border: 1px solid var(--gray-light); color: var(--text-primary); } /* Ajustar gradientes do hero das páginas de migração no modo claro */ body.light-mode #hero { background: linear-gradient( 135deg, rgba(30, 107, 251, 0.1) 0%, rgba(109, 65, 161, 0.08) 100% ); } /* Melhorar contraste dos títulos e textos da seção hero */ body.light-mode #hero h1 { color: #1a202c; text-shadow: none; } body.light-mode #hero p { color: var(--gray-dark); } /* Ajustar badges e elementos de destaque */ body.light-mode .platform-tag.featured { background: rgba(30, 107, 251, 0.1); color: var(--accent-blue); border: 1px solid rgba(30, 107, 251, 0.2); } /* Garantir contraste adequado para elementos de navegação */ body.light-mode header { background-color: var(--bg-primary); border-bottom: 1px solid var(--gray-light); } body.light-mode nav.desktop-nav ul a { color: var(--text-primary); } body.light-mode nav.desktop-nav .actions .language-switcher { color: var(--text-primary); } /* Melhorar contraste de botões CTA no modo claro */ body.light-mode .cta-button { background-color: var(--accent-blue); color: #ffffff; } body.light-mode .cta-button:hover { background-color: var(--accent-purple); color: #ffffff; } /* Garantir que textos secundários tenham contraste adequado */ body.light-mode .nav-label, body.light-mode .stat-label { color: var(--gray-dark); } /* Melhorar contraste dos cards de estatísticas */ body.light-mode .hero-stats .stat-item { background: var(--bg-secondary); border: 1px solid var(--gray-light); } body.light-mode .stat-number { color: var(--text-primary); } /* ===== PROTEÇÃO ADICIONAL CONTRA SCRIPTS EXTERNOS ===== */ /* Estilo para formulários protegidos contra interferências externas */ form[data-recaptcha-protected="true"] { position: relative; pointer-events: none; opacity: 0.7; } form[data-recaptcha-protected="true"]::before { content: "🔒 Carregando proteção..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-primary); color: var(--text-primary); padding: 10px 20px; border-radius: 8px; border: 2px solid var(--accent-blue); font-weight: 600; z-index: 1000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* Remover proteção quando reCAPTCHA estiver pronto */ form:not(.recaptcha-loading)[data-recaptcha-protected="false"] { pointer-events: auto; opacity: 1; } form:not(.recaptcha-loading)[data-recaptcha-protected="false"]::before { display: none; } /* ===== FIM DA PROTEÇÃO ADICIONAL ===== */ /* ===== ESTILOS PARA VALIDAÇÃO DE FORMULÁRIO ===== */ /* Campos com erro */ .field-error { border: 2px solid var(--status-error) !important; background-color: rgba(220, 53, 69, 0.1) !important; animation: shake 0.3s ease-in-out; } /* Animação de shake para campos com erro */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Remover erro ao focar no campo */ .field-error:focus { border-color: var(--accent-blue) !important; background-color: transparent !important; animation: none; } /* Estilo para mensagem de erro de validação */ .validation-error { animation: slideDown 0.3s ease-out; margin-bottom: 15px; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Melhorar estilo do botão durante validação */ button[disabled] { opacity: 0.7; cursor: not-allowed; position: relative; } /* Indicador visual de formulário protegido */ form[data-recaptcha-protected="true"] { position: relative; } form[data-recaptcha-protected="true"]::after { content: "🛡️"; position: absolute; top: 10px; right: 10px; opacity: 0.3; font-size: 12px; z-index: 1; pointer-events: none; } /* Spinner de loading personalizado */ .loading-spinner { width: 24px; height: 24px; border: 3px solid transparent; border-top: 3px solid var(--accent-blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Melhorar estilo do overlay de loading */ .loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; border-radius: inherit; } .loading-content { background: var(--bg-secondary); padding: 20px; border-radius: 8px; text-align: center; color: var(--text-primary); max-width: 300px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .loading-content p { margin: 0; font-size: 14px; } /* ===== FIM DOS ESTILOS DE VALIDAÇÃO ===== */ /* ===== CORREÇÕES FINAIS DE ALINHAMENTO HERO ===== */ /* Garantir que páginas simples (index.html e en.html) tenham alinhamento central */ #hero:not(.migration-hero) { text-align: center !important; } #hero:not(.migration-hero) h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #hero:not(.migration-hero) p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #hero:not(.migration-hero) .cta-button { text-align: center !important; margin-left: auto !important; margin-right: auto !important; display: inline-block !important; } /* Garantir que páginas de migração tenham alinhamento à esquerda */ #hero.migration-hero, #hero:has(.hero-content) { text-align: left !important; } #hero.migration-hero h1, #hero:has(.hero-content) h1 { text-align: left !important; margin-left: 0 !important; } #hero.migration-hero p, #hero:has(.hero-content) p { text-align: left !important; margin-left: 0 !important; } /* ===== FIM DAS CORREÇÕES DE ALINHAMENTO ===== */ /* ===== FIM DOS AJUSTES DE CONTRASTE ===== */