/* ========================================================================== AFA SISTEMAS — DESIGN SYSTEM (mesma DNA do site de engenharia) ========================================================================== */ /* Fonte Outfit carregada via no */ :root { /* Cores */ --color-bg: #0A0B0E; --color-bg-card: #121620; --color-primary: #00D2FF; /* ciano — destaque principal */ --color-primary-rgb: 0, 210, 255; --color-secondary: #0066FF; /* azul royal — gradientes/software */ --color-secondary-rgb: 0, 102, 255; --color-white: #FFFFFF; --color-gray: #A0AEC0; --color-dark-gray: #1E293B; --color-border: #1F2937; /* Fontes */ --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Transições */ --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s ease; } * { box-sizing: border-box; margin: 0; padding: 0; scroll-behavior: smooth; } body { font-family: var(--font-main); background-color: var(--color-bg); color: var(--color-white); line-height: 1.6; overflow-x: hidden; position: relative; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-dark-gray); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* Fundo com brilho e grade */ .glow-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; background-image: radial-gradient(circle at 10% 20%, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(var(--color-secondary-rgb), 0.06) 0%, transparent 45%); } .glow-bg::after { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.15; background-image: radial-gradient(var(--color-dark-gray) 1px, transparent 1px); background-size: 32px 32px; } /* ========================================================================== NAVEGAÇÃO ========================================================================== */ .main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(10, 11, 14, 0.75); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.03); transition: var(--transition-smooth); } .main-header.scrolled { background: rgba(10, 11, 14, 0.9); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); } .nav-container { height: 80px; display: flex; justify-content: space-between; align-items: center; } .logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .logo-link img { height: 36px; width: auto; } .logo-text { display: flex; flex-direction: column; } .logo-title { font-size: 20px; font-weight: 900; color: var(--color-white); letter-spacing: 2px; } .logo-subtitle { font-size: 9px; font-weight: 700; color: var(--color-primary); letter-spacing: 4px; } .nav-menu { display: flex; align-items: center; gap: 32px; } .nav-item { color: var(--color-gray); text-decoration: none; font-weight: 500; font-size: 15px; position: relative; transition: var(--transition-fast); padding: 6px 0; } .nav-item:hover, .nav-item.active { color: var(--color-white); } .nav-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: var(--transition-fast); } .nav-item:hover::after, .nav-item.active::after { width: 100%; } .btn-contact { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); color: var(--color-white) !important; padding: 8px 20px !important; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 210, 255, 0.2); } .btn-contact::after { display: none !important; } .btn-contact:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 210, 255, 0.35); } .mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .hamburger { display: block; width: 24px; height: 2px; background: var(--color-white); position: relative; transition: var(--transition-fast); } .hamburger::before, .hamburger::after { content: ''; width: 24px; height: 2px; background: var(--color-white); position: absolute; left: 0; transition: var(--transition-fast); } .hamburger::before { top: -8px; } .hamburger::after { bottom: -8px; } .mobile-nav-toggle.active .hamburger { background: transparent; } .mobile-nav-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; } .mobile-nav-toggle.active .hamburger::after { transform: rotate(-45deg); bottom: 0; } /* ========================================================================== BOTÕES & BADGES ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-weight: 600; font-size: 15px; border-radius: 8px; text-decoration: none; transition: var(--transition-smooth); cursor: pointer; gap: 8px; } .btn-primary { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); color: var(--color-white); border: none; box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15); } .btn-primary:hover { box-shadow: 0 6px 25px rgba(0, 210, 255, 0.3); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--color-white); border: 1px solid var(--color-border); } .btn-outline:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--color-primary); transform: translateY(-2px); } .btn-block { display: flex; width: 100%; } .btn svg { width: 18px; height: 18px; fill: currentColor; } .badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--color-primary); border: 1px solid rgba(0, 210, 255, 0.2); background: rgba(0, 210, 255, 0.05); padding: 6px 16px; border-radius: 30px; letter-spacing: 1px; margin-bottom: 24px; max-width: 100%; white-space: normal; word-break: break-word; line-height: 1.5; } /* ========================================================================== HERO ========================================================================== */ .hero-section { padding-top: 130px; padding-bottom: 90px; position: relative; } .hero-container { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; } .hero-content { max-width: 700px; } .hero-title { font-size: 52px; line-height: 1.1; font-weight: 900; color: var(--color-white); margin-bottom: 22px; letter-spacing: -1.5px; } .hero-title .accent { background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: 18px; color: var(--color-gray); margin-bottom: 34px; line-height: 1.65; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero-note { margin-top: 20px; font-size: 13px; color: var(--color-gray); display: flex; align-items: center; gap: 8px; } .hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px #22C55E; flex-shrink: 0; } /* Cartão visual do hero — "terminal / sistema" */ .hero-visual { display: flex; justify-content: center; align-items: center; } .app-window { width: 100%; max-width: 400px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 210, 255, 0.06); } .app-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,0.02); } .app-bar span { width: 11px; height: 11px; border-radius: 50%; background: #313947; } .app-bar span:nth-child(1) { background: #ff5f57; } .app-bar span:nth-child(2) { background: #febc2e; } .app-bar span:nth-child(3) { background: #28c840; } .app-bar .app-title { margin-left: 8px; font-size: 12px; color: var(--color-gray); letter-spacing: 0.5px; } .app-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .app-row { display: flex; align-items: center; gap: 12px; } .app-metric { flex: 1; background: rgba(255,255,255,0.02); border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 14px; } .app-metric .k { font-size: 10px; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .app-metric .v { font-size: 22px; font-weight: 900; margin-top: 4px; } .app-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; padding-top: 6px; } .app-bars i { flex: 1; background: linear-gradient(180deg, var(--color-primary), var(--color-secondary)); border-radius: 4px 4px 0 0; opacity: 0.85; animation: growBar 1.4s ease both; } @keyframes growBar { from { height: 0; opacity: 0; } to { opacity: 0.85; } } .app-line { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.05); } .app-line.short { width: 55%; } .app-line.mid { width: 78%; } /* ========================================================================== SEÇÕES COMUNS ========================================================================== */ section { padding: 90px 0; } .section-alt { background-color: rgba(18, 22, 32, 0.3); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section-header { max-width: 640px; margin-bottom: 54px; } .section-header.center { margin-left: auto; margin-right: auto; text-align: center; } .section-title { font-size: 38px; font-weight: 900; line-height: 1.2; color: var(--color-white); margin-bottom: 12px; letter-spacing: -0.5px; } .section-tagline { font-size: 15px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 2px; } .section-lead { font-size: 17px; color: var(--color-gray); margin-top: 16px; line-height: 1.7; } /* Faixa "dor" (problema) */ .pain-strip { background: linear-gradient(135deg, rgba(0,102,255,0.08), rgba(0,210,255,0.05)); border: 1px solid var(--color-border); border-radius: 16px; padding: 32px 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .pain-strip .pain-text { flex: 1; min-width: 260px; } .pain-strip h3 { font-size: 22px; margin-bottom: 8px; } .pain-strip p { color: var(--color-gray); font-size: 15.5px; } /* ========================================================================== CARDS DE SERVIÇO ========================================================================== */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } .service-card-item { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; transition: var(--transition-smooth); position: relative; overflow: hidden; } .service-card-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); opacity: 0; transition: var(--transition-fast); } .service-card-item:hover { transform: translateY(-8px); border-color: rgba(var(--color-primary-rgb), 0.3); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 210, 255, 0.05); } .service-card-item:hover::before { opacity: 1; } .card-icon-area { width: 48px; height: 48px; border-radius: 10px; background: rgba(0, 210, 255, 0.06); border: 1px solid rgba(0, 210, 255, 0.15); display: flex; justify-content: center; align-items: center; margin-bottom: 22px; transition: var(--transition-fast); } .service-card-item:hover .card-icon-area { background: var(--color-primary); border-color: var(--color-primary); } .card-icon { width: 24px; height: 24px; fill: var(--color-primary); transition: var(--transition-fast); } .service-card-item:hover .card-icon { fill: var(--color-bg); } .service-card-item h3 { font-size: 19px; font-weight: 700; margin-bottom: 14px; color: var(--color-white); } .service-card-item p { color: var(--color-gray); font-size: 14px; line-height: 1.6; margin-bottom: 20px; } .card-features { list-style: none; display: flex; flex-direction: column; gap: 9px; } .card-features li { font-size: 13.5px; color: var(--color-white); display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; } .card-features li::before { content: ''; flex-shrink: 0; margin-top: 6px; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary); } /* ========================================================================== COMO FUNCIONA (passos) ========================================================================== */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .step-card { position: relative; background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 14px; padding: 30px 26px; } .step-num { font-size: 13px; font-weight: 900; color: var(--color-bg); background: var(--color-primary); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .step-card h3 { font-size: 17px; margin-bottom: 8px; } .step-card p { color: var(--color-gray); font-size: 14px; line-height: 1.55; } /* ========================================================================== CASE / PROVA (EletricoPro) ========================================================================== */ .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .case-text h3 { font-size: 26px; margin-bottom: 16px; } .case-text p { color: var(--color-gray); font-size: 16px; margin-bottom: 18px; line-height: 1.7; } .case-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .case-tag { font-size: 12.5px; font-weight: 600; color: var(--color-primary); border: 1px solid rgba(0,210,255,0.2); background: rgba(0,210,255,0.05); padding: 6px 12px; border-radius: 20px; } .case-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .case-stat { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 14px; padding: 26px 22px; text-align: center; transition: var(--transition-smooth); } .case-stat:hover { border-color: var(--color-primary); transform: translateY(-4px); } .case-stat .num { display: block; font-size: 30px; font-weight: 900; color: var(--color-primary); margin-bottom: 6px; } .case-stat .lbl { font-size: 12px; color: var(--color-gray); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } /* ========================================================================== EQUIPE (time) ========================================================================== */ /* .team-card reuses .service-card-item's surface (background, border, hover lift, accent bar) and .team-badge reuses .badge's pill (color, border, background) — only the layout/sizing differences that are actually unique to the team section are declared here. */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; } .team-card { display: flex; flex-direction: column; gap: 16px; } .team-card-head { display: flex; align-items: center; gap: 16px; } .team-avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; color: var(--color-bg); } .team-card-head h3 { font-size: 18px; margin-bottom: 2px; } .team-role { font-size: 12.5px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 1px; } .team-card p { color: var(--color-gray); font-size: 14.5px; line-height: 1.6; margin-bottom: 0; } .team-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .team-badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 16px; margin-bottom: 0; } /* ========================================================================== CONTATO ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: flex-start; } .contact-details h3 { font-size: 24px; margin-bottom: 16px; } .contact-intro-text { color: var(--color-gray); margin-bottom: 30px; font-size: 15.5px; line-height: 1.65; } .contact-channels { display: flex; flex-direction: column; gap: 18px; } .channel-card { display: flex; align-items: center; gap: 18px; background-color: var(--color-bg-card); border: 1px solid var(--color-border); padding: 18px 20px; border-radius: 12px; text-decoration: none; transition: var(--transition-smooth); } .channel-card:hover { border-color: var(--color-primary); transform: translateX(4px); background-color: rgba(0, 210, 255, 0.02); } .channel-icon { width: 44px; height: 44px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.03); display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .channel-card:hover .channel-icon { background-color: rgba(0, 210, 255, 0.1); } .channel-icon svg { width: 20px; height: 20px; fill: var(--color-gray); transition: var(--transition-fast); } .channel-card:hover .channel-icon svg { fill: var(--color-primary); } .channel-info { display: flex; flex-direction: column; gap: 3px; } .channel-label { font-size: 11px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 1px; } .channel-value { font-size: 15px; font-weight: 500; color: var(--color-white); } .contact-form-container { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 38px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .contact-form { display: flex; flex-direction: column; gap: 18px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-size: 13.5px; font-weight: 500; color: var(--color-white); } .form-group input, .form-group select, .form-group textarea { background-color: var(--color-bg); border: 1px solid var(--color-border); padding: 12px 16px; border-radius: 8px; color: var(--color-white); font-family: var(--font-main); font-size: 14.5px; transition: var(--transition-fast); width: 100%; } .form-group input::placeholder, .form-group textarea::placeholder { color: #8B95A5; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 10px rgba(0, 210, 255, 0.15); } .form-group select option { background-color: var(--color-bg-card); color: var(--color-white); } /* ========================================================================== BOTÃO FLUTUANTE WHATSAPP ========================================================================== */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 210, 255, 0.35); transition: var(--transition-smooth); } .whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(0, 210, 255, 0.5); } .whatsapp-float svg { width: 26px; height: 26px; fill: var(--color-white); } /* ========================================================================== RODAPÉ ========================================================================== */ .main-footer { border-top: 1px solid var(--color-border); padding: 40px 0; background-color: rgba(10, 11, 14, 0.9); } .footer-container { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-gray); gap: 20px; flex-wrap: wrap; } .footer-links { display: flex; gap: 24px; align-items: center; } .footer-links a { color: var(--color-primary); text-decoration: none; font-weight: 500; } .footer-links a:hover { text-decoration: underline; } /* ========================================================================== RESPONSIVO ========================================================================== */ @media (max-width: 991px) { .hero-container { grid-template-columns: 1fr; gap: 44px; } .hero-visual { order: -1; } .hero-title { font-size: 42px; } .case-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { section { padding: 64px 0; } .section-title { font-size: 28px; } .hero-section { padding-top: 110px; padding-bottom: 56px; } .hero-title { font-size: 32px; letter-spacing: -0.5px; } .hero-subtitle { font-size: 15.5px; } .hero-buttons { flex-direction: column; align-items: stretch; } .hero-buttons .btn { width: 100%; } .pain-strip { padding: 26px 24px; } .contact-form-container { padding: 24px 18px; } .footer-container { flex-direction: column; text-align: center; } .mobile-nav-toggle { display: block; } .nav-menu { position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); background-color: var(--color-bg); flex-direction: column; padding: 40px 24px; gap: 24px; transform: translateX(100%); transition: var(--transition-smooth); box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); border-top: 1px solid var(--color-border); } .nav-menu.active { transform: translateX(0); } .nav-item { font-size: 20px; width: 100%; text-align: center; } .btn-contact { width: 80%; padding: 12px 0 !important; } .logo-title { font-size: 17px; } .logo-subtitle { font-size: 8px; letter-spacing: 3px; } .case-stats { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================================================== SELETOR DE IDIOMA / LANGUAGE SWITCHER ========================================================================== */ .nav-right { display: flex; align-items: center; gap: 28px; } .lang-switch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 30px; border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.02); color: var(--color-gray); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; line-height: 1; white-space: nowrap; flex-shrink: 0; transition: var(--transition-fast); } .lang-switch svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.85; } .lang-switch:hover, .lang-switch:focus-visible { color: var(--color-white); border-color: rgba(var(--color-primary-rgb), 0.45); background: rgba(var(--color-primary-rgb), 0.07); } .footer-links .lang-link { display: inline-flex; align-items: center; gap: 6px; } .footer-links .lang-link svg { width: 14px; height: 14px; fill: currentColor; } @media (max-width: 768px) { .nav-right { gap: 12px; } .lang-switch { font-size: 11px; padding: 5px 9px; } } .nav-right .lang-switch { order: 1; } .nav-right .mobile-nav-toggle { order: 2; } /* o seletor .app-bar span tambem alcanca o titulo; anula o estilo de "bolinha" */ .app-bar .app-title { width: auto; height: auto; border-radius: 0; background: none; white-space: nowrap; } .contact-float { /* mesmo estilo do botao flutuante, semantica de e-mail */ } /* ========================================================================== EMBLEMA ANIMADO — engrenagem girando + chip pulsando Usado na tela de abertura (preloader) e no topo do hero. ========================================================================== */ .afa-emblem { display: block; width: 100%; height: 100%; overflow: visible; } .afa-emblem .gear-part { stroke: var(--color-white); stroke-width: 12; stroke-linecap: round; fill: none; } .afa-emblem .gear-inner { stroke: var(--color-secondary); stroke-width: 4; fill: none; } .afa-emblem .chip-fill { fill: var(--color-primary); } .afa-emblem .chip-bolt { fill: var(--color-white); stroke: var(--color-white); stroke-width: 2; stroke-linejoin: round; } .afa-emblem .chip-node { fill: var(--color-bg); } .afa-emblem .afa-gear { transform-box: fill-box; transform-origin: 50% 50%; animation: afaGearSpin 18s linear infinite; } .afa-emblem .afa-chip { transform-box: fill-box; transform-origin: 50% 50%; animation: afaChipPulse 2.8s ease-in-out infinite; } @keyframes afaGearSpin { to { transform: rotate(360deg); } } @keyframes afaChipPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--color-primary-rgb), 0)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(var(--color-primary-rgb), 0.75)); } } /* --- Emblema no hero ---------------------------------------------------- */ .hero-emblem { width: 96px; height: 96px; margin-bottom: 22px; } /* animation-delay matches the preloader's on-screen time (afaPreloaderOut fires at 1.7s) so the hero emblem doesn't spend cycles animating while fully hidden behind the opaque preloader */ .hero-emblem .afa-gear { animation-duration: 26s; animation-delay: 1.7s; } .hero-emblem .afa-chip { animation-delay: 1.7s; } /* --- Tela de abertura --------------------------------------------------- */ .afa-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: var(--color-bg); animation: afaPreloaderOut 0.7s ease 1.7s forwards; } .afa-preloader .afa-emblem-wrap { width: 150px; height: 150px; animation: afaEmblemIn 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .afa-preloader .afa-gear { animation-duration: 3.4s; } .afa-preloader .afa-chip { animation-duration: 1.6s; } .afa-preloader-text { text-align: center; animation: afaEmblemIn 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s both; } .afa-preloader-title { display: block; font-size: 30px; font-weight: 900; color: var(--color-white); letter-spacing: 8px; line-height: 1; } .afa-preloader-subtitle { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--color-primary); letter-spacing: 9px; } @keyframes afaEmblemIn { from { opacity: 0; transform: translateY(14px) scale(0.9); } to { opacity: 1; transform: none; } } @keyframes afaPreloaderOut { to { opacity: 0; visibility: hidden; pointer-events: none; } } @media (max-width: 768px) { .hero-emblem { width: 72px; height: 72px; margin-bottom: 18px; } .afa-preloader .afa-emblem-wrap { width: 112px; height: 112px; } .afa-preloader-title { font-size: 24px; letter-spacing: 6px; } .afa-preloader-subtitle { font-size: 10px; letter-spacing: 6px; } } /* Respeita quem pediu menos movimento: sem giro, sem pulso, abertura instantanea */ @media (prefers-reduced-motion: reduce) { .afa-emblem .afa-gear, .afa-emblem .afa-chip { animation: none !important; } .afa-preloader { animation: afaPreloaderOut 0.001ms linear 0.001ms forwards !important; } } /* Tela de abertura ja vista nesta sessao: nao exibe de novo */ .afa-intro-seen .afa-preloader { display: none; }