@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); :where(html.page-index) .project-hero{ background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); padding: 60px 0; text-align: center; color: white; position: relative; overflow: hidden; } :where(html.page-index) .project-hero::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat; opacity: 0.3; } :where(html.page-index) .project-hero-content{ position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 0 20px; } :where(html.page-index) .project-title{ font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); animation: index-fadeInUp 1s ease-out; } :where(html.page-index) .project-subtitle{ font-size: 1.3rem; color: #ffffff; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; word-break: normal; overflow-wrap: break-word; animation: index-fadeInUp 1s ease-out 0.2s both; } :where(html.page-index) .tech-badges{ display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 30px 0; animation: index-fadeInUp 1s ease-out 0.4s both; } :where(html.page-index) .tech-badge{ background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); transition: transform 0.3s ease; } :where(html.page-index) .tech-badge:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.3); } :where(html.page-index) .action-buttons{ display: flex; justify-content: center; gap: 20px; margin-top: 40px; animation: index-fadeInUp 1s ease-out 0.6s both; } :where(html.page-index) #rotating-title{ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out; display: block; min-height: 1.2em; font-size: clamp(24px, 6vw, 40px); line-height: 1.25; text-align: center; margin: 6px auto 12px; filter: blur(0px); will-change: opacity, transform, filter; } @media (max-width: 480px) {:where(html.page-index) #rotating-title{ font-size: clamp(20px, 6.2vw, 26px); margin: 4px auto 8px; } } @media (max-width: 360px) {:where(html.page-index) #rotating-title{ font-size: 18px; } } :where(html.page-index) .btn-primary, :where(html.page-index) .btn-secondary{ padding: 14px 28px; border-radius: 30px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; } :where(html.page-index) .btn-primary{ background: white; color: #056bf6; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } :where(html.page-index) .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } :where(html.page-index) .btn-secondary{ background: transparent; color: white; border: 2px solid white; } :where(html.page-index) .btn-secondary:hover{ background: white; color: #056bf6; transform: translateY(-3px); } :where(html.page-index) .feature-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 50px 0; } :where(html.page-index) .feature-card{ background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } :where(html.page-index) .feature-card:hover{ transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); } :where(html.page-index) .feature-icon{ font-size: 2.5rem; color: #056bf6; margin-bottom: 20px; } :where(html.page-index) .feature-title{ font-size: 1.4rem; margin-bottom: 15px; color: #333; } :where(html.page-index) .feature-description{ color: #666; font-size: 1.0rem; line-height: 1.6; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; word-break: normal; overflow-wrap: break-word; } :where(html.page-index) .tech-highlighted{ transform: scale(1.05) !important; box-shadow: 0 0 30px rgba(27, 199, 251, 0.6) !important; z-index: 10 !important; position: relative !important; } :where(html.page-index) .ripple-effect{ position: absolute; border-radius: 50%; background: rgba(27, 199, 251, 0.3); pointer-events: none; transition: transform 0.6s ease-out, opacity 0.6s ease-out; } :where(html.page-index) .burst-effect{ position: fixed; pointer-events: none; z-index: 1000; } :where(html.page-index) .burst-particle{ position: absolute; width: 4px; height: 4px; background: #1bc7fb; border-radius: 50%; animation: index-burstParticle 0.8s ease-out forwards; } @keyframes index-burstParticle { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } :where(html.page-index) #tech-modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } :where(html.page-index) #tech-modal.active{ opacity: 1; visibility: visible; } :where(html.page-index) .modal-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; padding: 20px; } :where(html.page-index) .modal-content{ background: white; border-radius: 15px; max-width: 500px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; transform: scale(0.7); transition: transform 0.3s ease; } :where(html.page-index) #tech-modal.active .modal-content{ transform: scale(1); } :where(html.page-index) .modal-close{ position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; z-index: 1; } :where(html.page-index) .modal-close:hover{ color: #333; } :where(html.page-index) .modal-header{ padding: 30px 30px 20px; border-bottom: 3px solid #1bc7fb; display: flex; align-items: center; gap: 15px; } :where(html.page-index) .modal-icon{ font-size: 2.5rem; color: #1bc7fb; } :where(html.page-index) .modal-title{ font-size: 1.8rem; margin: 0; color: #333; } :where(html.page-index) .modal-body{ padding: 30px; } :where(html.page-index) .modal-description{ font-size: 1.1rem; line-height: 1.6; color: #555; margin-bottom: 25px; text-align: left; } :where(html.page-index) .modal-features h4{ color: #333; margin-bottom: 15px; font-size: 1.2rem; } :where(html.page-index) .features-list{ list-style: none; padding: 0; margin: 0; } :where(html.page-index) .features-list li{ padding: 8px 0; padding-left: 25px; position: relative; color: #555; } :where(html.page-index) .features-list li:before{ content: '✓'; position: absolute; left: 0; color: #1bc7fb; font-weight: bold; } :where(html.page-index) .demo-section{ background: #f8f9fa; padding: 60px 0; margin: 50px 0; } :where(html.page-index) .demo-container{ max-width: 1000px; margin: 0 auto; padding: 0 20px; } :where(html.page-index) .demo-video{ width: 100%; max-width: 800px; margin: 0 auto; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } :where(html.page-index) .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 50px 0; text-align: center; } :where(html.page-index) .stat-item{ padding: 20px; } :where(html.page-index) .stat-number{ font-size: 3rem; font-weight: bold; background: linear-gradient(135deg, #056bf6, #1bc7fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; } :where(html.page-index) .stat-label{ color: #666; font-size: 1.1rem; } @keyframes index-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } :where(html.page-index) .integrations-showcase{ position: relative; background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); border-radius: 15px; padding: 20px 15px; margin: 20px 10px; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.3s ease; animation: index-fadeInUp 0.6s ease-out; } :where(html.page-index.dark) .integrations-showcase{ background: rgba(4, 8, 14, 0.94) !important; border: 1px solid rgba(96, 165, 250, 0.09) !important; box-shadow: 0 20px 40px rgba(0, 2, 6, 0.62) !important; } :where(html.page-index) .integration-canvas{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; border-radius: 15px; } :where(html.page-index) .integrations-showcase::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06)); z-index: 1; border-radius: 15px; } :where(html.page-index.dark) .integrations-showcase::before{ background: none !important; } :where(html.page-index) .showcase-title{ font-size: 1.4rem; color: #ffffff; text-align: center; margin-bottom: 8px; position: relative; z-index: 2; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); font-weight: 600; } :where(html.page-index) .showcase-subtitle{ font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 25px; position: relative; z-index: 2; line-height: 1.4; } :where(html.page-index) .tech-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; position: relative; z-index: 2; } :where(html.page-index) .tech-card{ background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 15px 10px; text-align: center; transition: all 0.3s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: relative; overflow: hidden; } :where(html.page-index) .tech-card::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s ease; } :where(html.page-index) .tech-card:hover::before{ left: 100%; } :where(html.page-index) .tech-card:hover{ transform: translateY(-3px); border-color: rgba(27, 199, 251, 0.4); box-shadow: 0 8px 25px rgba(5, 107, 246, 0.2); } :where(html.page-index) .tech-icon{ font-size: 2rem; margin-bottom: 8px; display: block; color: white !important; filter: brightness(0) invert(1); } :where(html.page-index) .tech-icon i{ color: white !important; } :where(html.page-index) .tech-card h3{ color: #ffffff; font-size: 0.9rem; margin: 0 0 8px 0; font-weight: 600; } :where(html.page-index) .tech-card.active{ animation: index-cardPulse 3s ease-in-out infinite; } :where(html.page-index) .tech-card.processing{ animation: index-cardProcessing 2s ease-in-out infinite; } @keyframes index-cardPulse { 0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 136, 0.1); } 50% { box-shadow: 0 0 25px rgba(0, 255, 136, 0.2); } } @keyframes index-cardProcessing { 0%, 100% { box-shadow: 0 0 15px rgba(255, 170, 0, 0.1); } 50% { box-shadow: 0 0 25px rgba(255, 170, 0, 0.2); } } @media (min-width: 481px) and (max-width: 768px) {:where(html.page-index) .integrations-showcase{ padding: 25px 20px; margin: 25px 15px; border-radius: 18px; } :where(html.page-index) .showcase-title{ font-size: 1.6rem; margin-bottom: 10px; } :where(html.page-index) .showcase-subtitle{ font-size: 0.9rem; margin-bottom: 25px; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(3, 1fr); gap: 15px; } :where(html.page-index) .tech-card{ padding: 18px 12px; } :where(html.page-index) .tech-icon{ font-size: 2.2rem; } :where(html.page-index) .tech-card h3{ font-size: 1rem; } } @media (min-width: 769px) {:where(html.page-index) .integrations-showcase{ padding: 40px 30px; margin: 40px 20px; border-radius: 20px; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } :where(html.page-index) .integrations-showcase:hover{ transform: translateY(-5px); box-shadow: 0 15px 45px rgba(5, 107, 246, 0.2); border: 1px solid rgba(27, 199, 251, 0.3); } :where(html.page-index.dark) .integrations-showcase:hover{ box-shadow: 0 18px 46px rgba(0, 2, 6, 0.68); border: 1px solid rgba(96, 165, 250, 0.14); } :where(html.page-index) .showcase-title{ font-size: 2.2rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } :where(html.page-index) .showcase-subtitle{ font-size: 1.1rem; margin-bottom: 30px; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(5, 1fr); gap: 20px; } :where(html.page-index) .tech-card{ padding: 25px 15px; } :where(html.page-index) .tech-icon{ font-size: 2.5rem; margin-bottom: 12px; } :where(html.page-index) .tech-card h3{ font-size: 1.1rem; margin-bottom: 10px; } } @media (max-width: 768px) {:where(html.page-index) .project-title{ font-size: 2.5rem; } :where(html.page-index) .project-subtitle{ font-size: 1.0rem; color: #ffffff; font-size: 1.0rem; line-height: 1.6; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; animation: index-fadeInUp 1s ease-out 0.2s both; } :where(html.page-index) .feature-description{ color: #666; font-size: 1.0rem; line-height: 1.6; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; } :where(html.page-index) .action-buttons{ flex-direction: column; align-items: center; } :where(html.page-index) .tech-badges{ justify-content: center; } :where(html.page-index) .feature-grid{ grid-template-columns: 1fr; } :where(html.page-index) .integrations-showcase{ padding: 25px 15px; margin: 20px 10px; } :where(html.page-index) .showcase-title{ font-size: 1.6rem; } :where(html.page-index) .showcase-subtitle{ font-size: 0.9rem; line-height: 1.4; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; } :where(html.page-index) .tech-card{ padding: 12px 8px; } :where(html.page-index) .tech-icon{ font-size: 1.8rem; } :where(html.page-index) .tech-card h3{ font-size: 0.85rem; } } @media (max-width: 480px) {:where(html.page-index) .integrations-showcase{ padding: 12px 6px; margin: 8px 4px; } :where(html.page-index) .showcase-title{ font-size: 1.4rem; margin-bottom: 8px; } :where(html.page-index) .showcase-subtitle{ font-size: 0.85rem; line-height: 1.3; margin-bottom: 15px; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; } :where(html.page-index) .tech-card{ padding: 10px 6px; } :where(html.page-index) .tech-icon{ font-size: 1.6rem; margin-bottom: 6px; } :where(html.page-index) .tech-card h3{ font-size: 0.8rem; margin-bottom: 6px; } } @media (max-width: 375px) {:where(html.page-index) .integrations-showcase{ padding: 10px 5px; margin: 6px 2px; } :where(html.page-index) .showcase-title{ font-size: 1.2rem; } :where(html.page-index) .showcase-subtitle{ font-size: 0.8rem; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(2, 1fr); gap: 6px; } :where(html.page-index) .tech-card{ padding: 8px 4px; } :where(html.page-index) .tech-icon{ font-size: 1.4rem; margin-bottom: 4px; } :where(html.page-index) .tech-card h3{ font-size: 0.75rem; margin-bottom: 4px; } } :where(html.page-index) .automation-card{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px 30px; margin: 40px 0; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; position: relative; overflow: hidden; transition: all 0.3s ease; } :where(html.page-index) .automation-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #007bff, #0056b3, #007bff); background-size: 200% 100%; animation: index-shimmer 3s ease-in-out infinite; } @keyframes index-shimmer { 0%, 100% { background-position: -200% 0; } 50% { background-position: 200% 0; } } :where(html.page-index) .automation-card:hover{ transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); } :where(html.page-index) .card-icon{ display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3); transition: all 0.3s ease; } :where(html.page-index) .card-icon i{ font-size: 2.5rem; color: white; } :where(html.page-index) .automation-card:hover .card-icon{ transform: scale(1.1) rotate(5deg); box-shadow: 0 15px 40px rgba(0, 123, 255, 0.4); } :where(html.page-index) .card-title{ font-size: 2.2rem; font-weight: 700; color: #2c3e50; margin-bottom: 20px; background: linear-gradient(135deg, #007bff, #0056b3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } :where(html.page-index) .card-divider{ width: 80px; height: 4px; background: linear-gradient(90deg, #007bff, #0056b3); border-radius: 2px; margin: 0 auto 25px; transition: all 0.3s ease; } :where(html.page-index) .automation-card:hover .card-divider{ width: 120px; } :where(html.page-index) .card-description{ font-size: 1.1rem; line-height: 1.7; color: #5a6c7d; max-width: 600px; margin: 0 auto; font-weight: 400; } @media (max-width: 768px) {:where(html.page-index) .automation-card{ padding: 30px 20px; margin: 30px 0; } :where(html.page-index) .card-icon{ width: 60px; height: 60px; margin-bottom: 20px; } :where(html.page-index) .card-icon i{ font-size: 2rem; } :where(html.page-index) .card-title{ font-size: 1.8rem; margin-bottom: 15px; } :where(html.page-index) .card-description{ font-size: 1rem; line-height: 1.6; } } @media (max-width: 480px) {:where(html.page-index) .automation-card{ padding: 25px 15px; border-radius: 15px; } :where(html.page-index) .card-title{ font-size: 1.5rem; } :where(html.page-index) .card-description{ font-size: 0.95rem; } } :where(html.page-index) .modern-cta-card{ position: relative; background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 86, 179, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(20px); border-radius: 25px; padding: 0; margin: 60px 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 25px 50px rgba(0, 123, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } :where(html.page-index) .modern-cta-card:hover{ transform: translateY(-8px); box-shadow: 0 35px 70px rgba(0, 123, 255, 0.15), 0 15px 40px rgba(0, 0, 0, 0.15); } :where(html.page-index) .card-background{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } :where(html.page-index) .floating-shapes{ position: absolute; width: 100%; height: 100%; } :where(html.page-index) .shape{ position: absolute; border-radius: 50%; background: linear-gradient(45deg, rgba(0, 123, 255, 0.1), rgba(0, 86, 179, 0.05)); animation: index-float 6s ease-in-out infinite; } :where(html.page-index) .shape-1{ width: 120px; height: 120px; top: 10%; left: 5%; animation-delay: 0s; } :where(html.page-index) .shape-2{ width: 80px; height: 80px; top: 60%; right: 10%; animation-delay: 2s; } :where(html.page-index) .shape-3{ width: 60px; height: 60px; bottom: 20%; left: 15%; animation-delay: 4s; } @keyframes index-float { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; } } :where(html.page-index) .card-content{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px; gap: 30px; } :where(html.page-index) .content-left{ display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; max-width: 800px; } :where(html.page-index) .cta-title{ font-size: 2.5rem; font-weight: 700; color: #2c3e50; line-height: 1.2; margin: 0; background: linear-gradient(135deg, #007bff, #0056b3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: index-titlePulse 3s ease-in-out infinite; } @keyframes index-titlePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } :where(html.page-index) .cta-subtitle{ font-size: 1.2rem; color: #5a6c7d; line-height: 1.6; margin: 0; font-weight: 400; } :where(html.page-index) .cta-features{ display: flex; flex-direction: column; gap: 15px; } :where(html.page-index) .feature-item{ display: flex; align-items: center; gap: 12px; padding: 12px 0; transition: all 0.3s ease; } :where(html.page-index) .feature-item:hover{ transform: translateX(10px); } :where(html.page-index) .feature-item i{ font-size: 1.2rem; color: #007bff; width: 20px; text-align: center; } :where(html.page-index) .feature-item span{ font-size: 1rem; color: #2c3e50; font-weight: 500; } :where(html.page-index) .cta-button{ position: relative; display: inline-flex; align-items: center; gap: 15px; padding: 18px 35px; background: linear-gradient(135deg, #007bff, #0056b3); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3); align-self: center; } :where(html.page-index) .cta-button:hover{ transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 123, 255, 0.4); } :where(html.page-index) .button-text{ position: relative; z-index: 2; } :where(html.page-index) .button-icon{ position: relative; z-index: 2; transition: transform 0.3s ease; } :where(html.page-index) .cta-button:hover .button-icon{ transform: translateX(5px); } :where(html.page-index) .button-ripple{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.6s ease; } :where(html.page-index) .cta-button:hover .button-ripple{ width: 300px; height: 300px; } :where(html.page-index) .content-right{ display: flex; justify-content: center; align-items: center; } :where(html.page-index) .animation-container{ position: relative; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; } :where(html.page-index) .lottie-animation{ width: 100%; height: 100%; border: none; border-radius: 20px; position: relative; z-index: 2; } :where(html.page-index) .animation-glow{ position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; background: radial-gradient(circle, rgba(0, 123, 255, 0.2) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); animation: index-glow 4s ease-in-out infinite; z-index: 1; } @keyframes index-glow { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } } @media (max-width: 1024px) {:where(html.page-index) .card-content{ gap: 25px; padding: 40px; } :where(html.page-index) .cta-title{ font-size: 2.2rem; } :where(html.page-index) .content-left{ max-width: 700px; } } @media (max-width: 768px) {:where(html.page-index) .card-content{ gap: 25px; padding: 30px; } :where(html.page-index) .cta-title{ font-size: 2rem; } :where(html.page-index) .cta-subtitle{ font-size: 1.1rem; } :where(html.page-index) .content-left{ max-width: 600px; } :where(html.page-index) .shape-1{ width: 80px; height: 80px; } :where(html.page-index) .shape-2{ width: 60px; height: 60px; } :where(html.page-index) .shape-3{ width: 40px; height: 40px; } } @media (max-width: 480px) {:where(html.page-index) .modern-cta-card{ margin: 40px 0; border-radius: 20px; } :where(html.page-index) .card-content{ padding: 25px 20px; gap: 30px; } :where(html.page-index) .cta-title{ font-size: 1.8rem; } :where(html.page-index) .cta-subtitle{ font-size: 1rem; } :where(html.page-index) .cta-button{ padding: 15px 25px; font-size: 1rem; } :where(html.page-index) .animation-container{ width: 180px; height: 180px; } } :where(html.page-index) #gallery-lightbox{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } :where(html.page-index) #gallery-lightbox.active{ opacity: 1; visibility: visible; } :where(html.page-index) #gallery-lightbox .overlay{ position: absolute; inset: 0; background: rgba(0,0,0,0.85); } :where(html.page-index) #gallery-lightbox .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1000px, calc(100% - 40px)); max-height: 86vh; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.35); overflow: hidden; } :where(html.page-index) #gallery-lightbox img{ max-width: 100%; max-height: 86vh; display: block; } :where(html.page-index) #gallery-lightbox .close, :where(html.page-index) #gallery-lightbox .prev, :where(html.page-index) #gallery-lightbox .next{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #ffffff; border: none; border-radius: 9999px; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; } :where(html.page-index) #gallery-lightbox .close{ top: 14px; right: 14px; transform: none; background: rgba(0,0,0,0.65); } :where(html.page-index) #gallery-lightbox .prev{ left: 14px; } :where(html.page-index) #gallery-lightbox .next{ right: 14px; } :where(html.page-index.dark) #gallery-lightbox .content{ background: rgba(4, 8, 14, 0.94); border: 1px solid rgba(96,165,250,0.09); box-shadow: 0 22px 54px rgba(0,2,6,0.62); } :where(html.page-index.dark) body.home-page .fundo{ background: transparent !important; } :where(html.page-github-dashboard-avancado) .dashboard-body{ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: #0d1117; color: #f0f6fc; line-height: 1.6; min-height: 100vh; padding-top: 100px; } :where(html.page-github-dashboard-avancado) .dashboard-container{ max-width: 1440px; margin: 0 auto; padding: 20px; } :where(html.page-github-dashboard-avancado) .dashboard-header{ background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 8px 32px rgba(5, 107, 246, 0.3); } :where(html.page-github-dashboard-avancado) .dashboard-header h1{ font-size: 2.5rem; font-weight: 700; color: #ffffff; margin-bottom: 10px; display: flex; align-items: center; gap: 15px; } :where(html.page-github-dashboard-avancado) .dashboard-header p{ color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; } :where(html.page-github-dashboard-avancado) .user-info{ display: flex; align-items: center; gap: 20px; margin-top: 20px; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); } :where(html.page-github-dashboard-avancado) .user-avatar{ width: 60px; height: 60px; border-radius: 50%; border: 3px solid #ffffff; } :where(html.page-github-dashboard-avancado) .user-details h3{ color: #f0f6fc; font-size: 1.3rem; margin-bottom: 5px; } :where(html.page-github-dashboard-avancado) .user-details p{ color: #7d8590; } :where(html.page-github-dashboard-avancado) .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } :where(html.page-github-dashboard-avancado) .stat-card{ background: linear-gradient(135deg, #21262d 0%, #161b22 100%); padding: 25px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border: 1px solid #30363d; transition: all 0.3s ease; position: relative; overflow: hidden; } :where(html.page-github-dashboard-avancado) .stat-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 32px rgba(5, 107, 246, 0.2); border-color: #056bf6; } :where(html.page-github-dashboard-avancado) .stat-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #056bf6, #1bc7fb); } :where(html.page-github-dashboard-avancado) .stat-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } :where(html.page-github-dashboard-avancado) .stat-icon{ width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #056bf6, #1bc7fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } :where(html.page-github-dashboard-avancado) .stat-value{ font-size: 2.5rem; font-weight: 700; color: #f0f6fc; margin-bottom: 5px; } :where(html.page-github-dashboard-avancado) .stat-label{ color: #7d8590; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } :where(html.page-github-dashboard-avancado) .charts-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 30px; } :where(html.page-github-dashboard-avancado) .chart-container{ background: linear-gradient(135deg, #21262d 0%, #161b22 100%); padding: 25px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .chart-title{ display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 600; color: #f0f6fc; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .chart-title i{ color: #58a6ff; } :where(html.page-github-dashboard-avancado) .timeline-container, :where(html.page-github-dashboard-avancado) .commits-feed{ background: linear-gradient(135deg, #21262d 0%, #161b22 100%); padding: 25px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border: 1px solid #30363d; margin-bottom: 30px; } :where(html.page-github-dashboard-avancado) .timeline-item{ display: flex; align-items: flex-start; gap: 15px; padding: 15px 0; border-bottom: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .timeline-item:last-child{ border-bottom: none; } :where(html.page-github-dashboard-avancado) .timeline-icon{ width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg, #056bf6, #1bc7fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; flex-shrink: 0; } :where(html.page-github-dashboard-avancado) .timeline-content{ flex: 1; } :where(html.page-github-dashboard-avancado) .timeline-content h4{ color: #f0f6fc; margin-bottom: 5px; font-size: 1.1rem; } :where(html.page-github-dashboard-avancado) .timeline-content p{ color: #7d8590; font-size: 0.9rem; margin-bottom: 8px; } :where(html.page-github-dashboard-avancado) .language-badge{ background: #21262d; color: #58a6ff; padding: 2px 8px; border-radius: 12px; font-size: 0.8rem; border: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .timeline-meta{ text-align: right; color: #7d8590; font-size: 0.8rem; } :where(html.page-github-dashboard-avancado) .timeline-date{ margin-bottom: 5px; } :where(html.page-github-dashboard-avancado) .commit-item{ display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .commit-item:last-child{ border-bottom: none; } :where(html.page-github-dashboard-avancado) .commit-avatar{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid #30363d; } :where(html.page-github-dashboard-avancado) .commit-content{ flex: 1; } :where(html.page-github-dashboard-avancado) .commit-message{ color: #f0f6fc; font-size: 0.95rem; margin-bottom: 3px; } :where(html.page-github-dashboard-avancado) .commit-meta{ color: #7d8590; font-size: 0.8rem; } :where(html.page-github-dashboard-avancado) .commit-repo{ color: #58a6ff; text-decoration: none; } :where(html.page-github-dashboard-avancado) .commit-repo:hover{ text-decoration: underline; } :where(html.page-github-dashboard-avancado) .last-updated{ text-align: center; color: #7d8590; font-size: 0.9rem; padding: 20px; background: #21262d; border-radius: 8px; border: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .last-updated i{ margin-right: 8px; color: #58a6ff; } :where(html.page-github-dashboard-avancado) .loading{ text-align: center; color: #7d8590; padding: 40px; font-size: 1.1rem; } :where(html.page-github-dashboard-avancado) .loading i{ animation: github-dashboard-avancado-spin 1s linear infinite; margin-right: 10px; color: #58a6ff; } @keyframes github-dashboard-avancado-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :where(html.page-github-dashboard-avancado) .error{ background: linear-gradient(135deg, #f85149 0%, #da3633 100%); color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } :where(html.page-github-dashboard-avancado) .error i{ font-size: 1.2rem; } :where(html.page-github-dashboard-avancado) .clock-container{ display: flex; justify-content: center; align-items: center; padding: 40px 20px; min-height: 200px; } :where(html.page-github-dashboard-avancado) .digital-clock{ text-align: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); border-radius: 20px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } :where(html.page-github-dashboard-avancado) .time-display{ font-family: 'Courier New', monospace; font-size: 3.5rem; font-weight: bold; color: #00d4ff; text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); margin-bottom: 15px; letter-spacing: 2px; } :where(html.page-github-dashboard-avancado) .separator{ animation: github-dashboard-avancado-blink 1s infinite; color: #00d4ff; } @keyframes github-dashboard-avancado-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } :where(html.page-github-dashboard-avancado) .date-display{ font-size: 1.2rem; color: #8b949e; font-weight: 300; letter-spacing: 1px; } @media (max-width: 768px) {:where(html.page-github-dashboard-avancado) .dashboard-container{ padding: 10px; } :where(html.page-github-dashboard-avancado) .dashboard-header{ padding: 20px; } :where(html.page-github-dashboard-avancado) .dashboard-header h1{ font-size: 2rem; } :where(html.page-github-dashboard-avancado) .stats-grid{ grid-template-columns: 1fr; } :where(html.page-github-dashboard-avancado) .charts-grid{ grid-template-columns: 1fr; } :where(html.page-github-dashboard-avancado) .user-info{ flex-direction: column; text-align: center; } :where(html.page-github-dashboard-avancado) .timeline-item{ flex-direction: column; align-items: flex-start; } :where(html.page-github-dashboard-avancado) .timeline-meta{ text-align: left; margin-top: 10px; } :where(html.page-github-dashboard-avancado) .time-display{ font-size: 2.5rem; } :where(html.page-github-dashboard-avancado) .date-display{ font-size: 1rem; } :where(html.page-github-dashboard-avancado) .digital-clock{ padding: 20px; } } :where(html.page-github-dashboard-avancado) .loading-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0.5s ease; } :where(html.page-github-dashboard-avancado) .loading-overlay.hidden{ opacity: 0; visibility: hidden; } :where(html.page-github-dashboard-avancado) .loading-content{ text-align: center; color: #f0f6fc; } :where(html.page-github-dashboard-avancado) .loading-spinner{ position: relative; width: 80px; height: 80px; margin: 0 auto 30px; } :where(html.page-github-dashboard-avancado) .spinner-ring{ position: absolute; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid #056bf6; border-radius: 50%; animation: github-dashboard-avancado-spin 1.5s linear infinite; } :where(html.page-github-dashboard-avancado) .spinner-ring:nth-child(2){ width: 60px; height: 60px; top: 10px; left: 10px; border-top-color: #1bc7fb; animation-duration: 1.2s; animation-direction: reverse; } :where(html.page-github-dashboard-avancado) .spinner-ring:nth-child(3){ width: 40px; height: 40px; top: 20px; left: 20px; border-top-color: #7c3aed; animation-duration: 0.9s; } @keyframes github-dashboard-avancado-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :where(html.page-github-dashboard-avancado) .loading-text h3{ font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; background: linear-gradient(135deg, #056bf6, #1bc7fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } :where(html.page-github-dashboard-avancado) .loading-text p{ color: #7d8590; font-size: 1rem; margin: 0; animation: github-dashboard-avancado-pulse 2s ease-in-out infinite; } @keyframes github-dashboard-avancado-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } :where(html.page-github-dashboard-avancado) .skeleton{ background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%); background-size: 200% 100%; animation: github-dashboard-avancado-skeleton-loading 1.5s infinite; } @keyframes github-dashboard-avancado-skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } :where(html.page-github-dashboard-avancado) .stat-card.loading .stat-value, :where(html.page-github-dashboard-avancado) .stat-card.loading .stat-label{ background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%); background-size: 200% 100%; animation: github-dashboard-avancado-skeleton-loading 1.5s infinite; color: transparent; border-radius: 4px; height: 1.2em; } :where(html.page-github-dashboard-avancado) .stat-card.loading .stat-value{ height: 2.5rem; margin-bottom: 10px; } :where(html.page-github-dashboard-avancado) .chart-container.loading{ position: relative; overflow: hidden; } :where(html.page-github-dashboard-avancado) .chart-container.loading::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 25%, rgba(48, 54, 61, 0.5) 50%, transparent 75%); background-size: 200% 100%; animation: github-dashboard-avancado-skeleton-loading 1.5s infinite; z-index: 1; } :where(html.page-github-dashboard-avancado) .stat-card{ transition: all 0.3s ease; } :where(html.page-github-dashboard-avancado) .chart-container{ transition: all 0.3s ease; } :where(html.page-github-dashboard-avancado) .stat-card.loading{ transform: scale(0.98); opacity: 0.7; } :where(html.page-github-dashboard-avancado) .chart-container.loading{ transform: scale(0.98); opacity: 0.7; } :where(html.page-github-dashboard-avancado) .fade-in{ animation: github-dashboard-avancado-fadeIn 0.5s ease-in; } @keyframes github-dashboard-avancado-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } :where(html.page-github-dashboard-avancado) #loadingOverlay{ transition: opacity 0.5s ease; } @media (max-width: 480px) {:where(html.page-github-dashboard-avancado) .time-display{ font-size: 2rem; } :where(html.page-github-dashboard-avancado) .clock-container{ padding: 20px 10px; min-height: 150px; } } :where(html.page-sobre) .about-page{ position: relative; overflow-x: hidden; } :where(html.page-sobre) .about-page::before{ content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 14%, rgba(5, 107, 246, 0.12), transparent 24%), radial-gradient(circle at 86% 18%, rgba(27, 199, 251, 0.12), transparent 22%), radial-gradient(circle at 72% 72%, rgba(56, 189, 248, 0.08), transparent 28%); z-index: -2; } :where(html.page-sobre.dark) .about-page::before{ display: none; } :where(html.page-sobre) .about-page::after{ content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.26), transparent 85%); opacity: 0.35; z-index: -1; } :where(html.page-sobre.dark) .about-page::after{ display: none; } :where(html.page-sobre) .reveal{ opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } :where(html.page-sobre) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } :where(html.page-sobre) .about-hero.reveal{ transform: translate3d(0, 30px, 0) scale(0.988); } :where(html.page-sobre) .about-section.reveal, :where(html.page-sobre) .about-story.reveal, :where(html.page-sobre) .about-sidecard.reveal, :where(html.page-sobre) .about-card.reveal, :where(html.page-sobre) .about-gallery.reveal, :where(html.page-sobre) .about-gallery__item.reveal{ transform: translate3d(0, 22px, 0) scale(0.99); } :where(html.page-sobre) .about-shell{ width: min(1120px, calc(100% - 24px)); margin: 76px auto 40px; display: grid; gap: 18px; } :where(html.page-sobre) .about-surface{ position: relative; overflow: hidden; border-radius: 30px; border: 1px solid rgba(148, 163, 184, 0.18); background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.9)); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-sobre) .about-surface::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%); pointer-events: none; } :where(html.page-sobre.dark) .about-surface{ background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: 0 28px 70px rgba(0, 2, 6, 0.54); } :where(html.page-sobre.dark) .about-surface::before{ background: linear-gradient(135deg, rgba(96, 165, 250, 0.025), transparent 44%); } :where(html.page-sobre) .about-hero{ padding: 28px; } :where(html.page-sobre) .about-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: 24px; align-items: center; } :where(html.page-sobre) body.page-intro-ready .about-hero{ animation: sobre-aboutHeroLiftIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both 0.04s; } :where(html.page-sobre) body.page-intro-ready .about-hero__content{ animation: sobre-aboutCopyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.14s; } :where(html.page-sobre) body.page-intro-ready .about-profile{ animation: sobre-aboutProfileIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both 0.18s; } :where(html.page-sobre) body.page-intro-ready .about-stat, :where(html.page-sobre) body.page-intro-ready .about-btn{ animation: sobre-aboutRiseIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--intro-delay, 0ms); } :where(html.page-sobre) .about-eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(5, 107, 246, 0.08); border: 1px solid rgba(5, 107, 246, 0.14); color: #056bf6; font-size: 0.85rem; font-weight: 700; } :where(html.page-sobre.dark) .about-eyebrow{ background: rgba(5, 107, 246, 0.12); border-color: rgba(56, 189, 248, 0.18); color: #7dd3fc; } :where(html.page-sobre) .about-title{ margin: 16px 0 12px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; color: #0f172a; } :where(html.page-sobre.dark) .about-title{ color: #e5eefc; } :where(html.page-sobre) .about-subtitle{ margin: 0 0 16px; padding: 0; color: #1d4ed8; font-size: clamp(1rem, 2vw, 1.28rem); font-weight: 700; line-height: 1.45; text-align: left; } :where(html.page-sobre.dark) .about-subtitle{ color: #7dd3fc; } :where(html.page-sobre) .about-copy, :where(html.page-sobre) .about-section__text, :where(html.page-sobre) .about-card__text, :where(html.page-sobre) .about-gallery__text{ margin: 0; padding: 0; color: #475569; font-size: 1rem; line-height: 1.72; text-align: left; text-wrap: pretty; } :where(html.page-sobre.dark) .about-copy, :where(html.page-sobre.dark) .about-section__text, :where(html.page-sobre.dark) .about-card__text, :where(html.page-sobre.dark) .about-gallery__text{ color: #cbd5e1; } :where(html.page-sobre) .about-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; } :where(html.page-sobre) .about-stat{ padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.68); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); } :where(html.page-sobre.dark) .about-stat{ background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: none; } :where(html.page-sobre) .about-stat strong{ display: block; margin-bottom: 4px; color: #0f172a; font-size: 1.4rem; line-height: 1; } :where(html.page-sobre.dark) .about-stat strong{ color: #e5eefc; } :where(html.page-sobre) .about-stat span{ display: block; color: #64748b; font-size: 0.9rem; line-height: 1.45; } :where(html.page-sobre.dark) .about-stat span{ color: #94a3b8; } :where(html.page-sobre) .about-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } :where(html.page-sobre) .about-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } :where(html.page-sobre) .about-btn:hover{ transform: translateY(-2px); } :where(html.page-sobre) .about-btn--primary{ color: #ffffff; background: linear-gradient(135deg, #056bf6, #1bc7fb); box-shadow: 0 16px 30px rgba(5, 107, 246, 0.24); } :where(html.page-sobre) .about-btn--secondary{ color: #0f172a; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); } :where(html.page-sobre.dark) .about-btn--secondary{ color: #e5eefc; background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: none; } :where(html.page-sobre) .about-profile{ display: grid; place-items: center; } :where(html.page-sobre) .about-profile__wrap{ position: relative; width: min(100%, 290px); aspect-ratio: 1; padding: 8px; border-radius: 36px; background: linear-gradient(135deg, #056bf6, #1bc7fb, #8b5cf6); box-shadow: 0 22px 44px rgba(5, 107, 246, 0.2); } :where(html.page-sobre) .about-profile__wrap::before{ content: ""; position: absolute; inset: -16px; border-radius: 44px; border: 1px solid rgba(5, 107, 246, 0.16); opacity: 0.6; } :where(html.page-sobre) .about-profile__image{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; } :where(html.page-sobre) .about-section{ padding: 26px; } :where(html.page-sobre) .about-section__head{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 18px; } :where(html.page-sobre) .about-section__title{ margin: 0; color: #0f172a; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; } :where(html.page-sobre.dark) .about-section__title{ color: #e5eefc; } :where(html.page-sobre) .about-section__icon{ width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; color: #ffffff; background: linear-gradient(135deg, #056bf6, #1bc7fb); box-shadow: 0 16px 30px rgba(5, 107, 246, 0.22); } :where(html.page-sobre) .about-split{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); gap: 18px; } :where(html.page-sobre) .about-story, :where(html.page-sobre) .about-sidecard, :where(html.page-sobre) .about-card, :where(html.page-sobre) .about-gallery{ padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); } :where(html.page-sobre.dark) .about-story, :where(html.page-sobre.dark) .about-sidecard, :where(html.page-sobre.dark) .about-card, :where(html.page-sobre.dark) .about-gallery{ background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: none; } :where(html.page-sobre) .about-story{ display: grid; gap: 14px; } :where(html.page-sobre) .about-sidecard{ display: grid; gap: 12px; align-content: start; } :where(html.page-sobre) .about-list{ display: grid; gap: 12px; } :where(html.page-sobre) .about-list__item{ display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; } :where(html.page-sobre) .about-list__item i{ width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #056bf6, #1bc7fb); color: #ffffff; } :where(html.page-sobre) .about-list__item strong, :where(html.page-sobre) .about-card__title, :where(html.page-sobre) .about-gallery__title{ display: block; margin: 0 0 6px; color: #0f172a; font-size: 1.05rem; line-height: 1.35; } :where(html.page-sobre.dark) .about-list__item strong, :where(html.page-sobre.dark) .about-card__title, :where(html.page-sobre.dark) .about-gallery__title{ color: #e5eefc; } :where(html.page-sobre) .about-cards{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } :where(html.page-sobre) .about-card{ display: grid; gap: 14px; } :where(html.page-sobre) .about-card__top{ display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; } :where(html.page-sobre) .about-card__icon{ width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #ffffff; background: linear-gradient(135deg, #056bf6, #1bc7fb); box-shadow: 0 14px 26px rgba(5, 107, 246, 0.22); } :where(html.page-sobre) .about-card--python .about-card__icon{ background: linear-gradient(135deg, #3776ab, #ffd43b); } :where(html.page-sobre) .about-card--linux .about-card__icon{ background: linear-gradient(135deg, #111827, #4b5563); } :where(html.page-sobre) .about-card--observability .about-card__icon{ background: linear-gradient(135deg, #0f766e, #22c55e); } :where(html.page-sobre) .about-card--automation .about-card__icon{ background: linear-gradient(135deg, #7c3aed, #22d3ee); } :where(html.page-sobre) .about-card--ml .about-card__icon{ background: linear-gradient(135deg, #ec4899, #8b5cf6); } :where(html.page-sobre) .about-card--data .about-card__icon{ background: linear-gradient(135deg, #0ea5e9, #2563eb); } :where(html.page-sobre) .about-card--regex .about-card__icon{ background: linear-gradient(135deg, #f97316, #f59e0b); } :where(html.page-sobre) .about-card--rust .about-card__icon{ background: linear-gradient(135deg, #111827, #b45309); } :where(html.page-sobre) .about-gallery{ display: grid; gap: 16px; } :where(html.page-sobre) .about-gallery__header{ display: grid; gap: 8px; } :where(html.page-sobre) .about-gallery__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } :where(html.page-sobre) .about-gallery__item{ display: block; overflow: hidden; border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); background: #e2e8f0; } :where(html.page-sobre.dark) .about-gallery__item{ border-color: rgba(148, 163, 184, 0.14); box-shadow: none; } :where(html.page-sobre) .about-gallery__item img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.28s ease, filter 0.28s ease; } :where(html.page-sobre) .about-gallery__item:hover img{ transform: scale(1.04); filter: saturate(1.06); } @keyframes sobre-aboutHeroLiftIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.988); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sobre-aboutCopyIn { from { opacity: 0; transform: translate3d(-18px, 20px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sobre-aboutProfileIn { from { opacity: 0; transform: translate3d(18px, 20px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sobre-aboutRiseIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (max-width: 960px) {:where(html.page-sobre) .about-hero__grid, :where(html.page-sobre) .about-split{ grid-template-columns: 1fr; } :where(html.page-sobre) .about-profile{ order: -1; } } @media (max-width: 768px) {:where(html.page-sobre) .about-shell{ width: calc(100% - 20px); margin-top: 70px; gap: 14px; } :where(html.page-sobre) .about-hero, :where(html.page-sobre) .about-section{ padding: 20px 18px; } :where(html.page-sobre) .about-section__head{ grid-template-columns: 1fr; } :where(html.page-sobre) .about-stats, :where(html.page-sobre) .about-cards, :where(html.page-sobre) .about-gallery__grid{ grid-template-columns: 1fr; } :where(html.page-sobre) .about-actions{ display: grid; grid-template-columns: 1fr; } :where(html.page-sobre) .about-btn{ width: 100%; } :where(html.page-sobre) .about-profile__wrap{ width: min(100%, 220px); } } @media (max-width: 480px) {:where(html.page-sobre) .about-title{ font-size: 1.95rem; } :where(html.page-sobre) .about-subtitle, :where(html.page-sobre) .about-copy, :where(html.page-sobre) .about-section__text, :where(html.page-sobre) .about-card__text, :where(html.page-sobre) .about-gallery__text{ font-size: 0.96rem; } :where(html.page-sobre) .about-hero, :where(html.page-sobre) .about-section{ padding: 18px 16px; } :where(html.page-sobre) .about-story, :where(html.page-sobre) .about-sidecard, :where(html.page-sobre) .about-card, :where(html.page-sobre) .about-gallery{ padding: 16px; border-radius: 20px; } } @media (prefers-reduced-motion: reduce) {:where(html.page-sobre) .reveal, :where(html.page-sobre) .reveal.is-visible, :where(html.page-sobre) body.page-intro-ready .about-hero, :where(html.page-sobre) body.page-intro-ready .about-hero__content, :where(html.page-sobre) body.page-intro-ready .about-profile, :where(html.page-sobre) body.page-intro-ready .about-stat, :where(html.page-sobre) body.page-intro-ready .about-btn, :where(html.page-sobre) .about-gallery__item img, :where(html.page-sobre) .about-btn{ transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } }

/* Arquivo consolidado com os estilos especificos das paginas de primeiro nivel. */

:where(html.page-index) .project-hero{ background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); padding: 60px 0; text-align: center; color: white; position: relative; overflow: hidden; } :where(html.page-index) .project-hero::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat; opacity: 0.3; } :where(html.page-index) .project-hero-content{ position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 0 20px; } :where(html.page-index) .project-title{ font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); animation: index-fadeInUp 1s ease-out; } :where(html.page-index) .project-subtitle{ font-size: 1.3rem; color: #ffffff; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; word-break: normal; overflow-wrap: break-word; animation: index-fadeInUp 1s ease-out 0.2s both; } :where(html.page-index) .tech-badges{ display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 30px 0; animation: index-fadeInUp 1s ease-out 0.4s both; } :where(html.page-index) .tech-badge{ background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); transition: transform 0.3s ease; } :where(html.page-index) .tech-badge:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.3); } :where(html.page-index) .action-buttons{ display: flex; justify-content: center; gap: 20px; margin-top: 40px; animation: index-fadeInUp 1s ease-out 0.6s both; } :where(html.page-index) #rotating-title{ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out; display: block; min-height: 1.2em; font-size: clamp(24px, 6vw, 40px); line-height: 1.25; text-align: center; margin: 6px auto 12px; filter: blur(0px); will-change: opacity, transform, filter; } @media (max-width: 480px) {:where(html.page-index) #rotating-title{ font-size: clamp(20px, 6.2vw, 26px); margin: 4px auto 8px; } } @media (max-width: 360px) {:where(html.page-index) #rotating-title{ font-size: 18px; } } :where(html.page-index) .btn-primary, :where(html.page-index) .btn-secondary{ padding: 14px 28px; border-radius: 30px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; } :where(html.page-index) .btn-primary{ background: white; color: #056bf6; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } :where(html.page-index) .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } :where(html.page-index) .btn-secondary{ background: transparent; color: white; border: 2px solid white; } :where(html.page-index) .btn-secondary:hover{ background: white; color: #056bf6; transform: translateY(-3px); } :where(html.page-index) .feature-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 50px 0; } :where(html.page-index) .feature-card{ background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } :where(html.page-index) .feature-card:hover{ transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); } :where(html.page-index) .feature-icon{ font-size: 2.5rem; color: #056bf6; margin-bottom: 20px; } :where(html.page-index) .feature-title{ font-size: 1.4rem; margin-bottom: 15px; color: #333; } :where(html.page-index) .feature-description{ color: #666; font-size: 1.0rem; line-height: 1.6; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; word-break: normal; overflow-wrap: break-word; } :where(html.page-index) .tech-highlighted{ transform: scale(1.05) !important; box-shadow: 0 0 30px rgba(27, 199, 251, 0.6) !important; z-index: 10 !important; position: relative !important; } :where(html.page-index) .ripple-effect{ position: absolute; border-radius: 50%; background: rgba(27, 199, 251, 0.3); pointer-events: none; transition: transform 0.6s ease-out, opacity 0.6s ease-out; } :where(html.page-index) .burst-effect{ position: fixed; pointer-events: none; z-index: 1000; } :where(html.page-index) .burst-particle{ position: absolute; width: 4px; height: 4px; background: #1bc7fb; border-radius: 50%; animation: index-burstParticle 0.8s ease-out forwards; } @keyframes index-burstParticle { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } :where(html.page-index) #tech-modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } :where(html.page-index) #tech-modal.active{ opacity: 1; visibility: visible; } :where(html.page-index) .modal-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; padding: 20px; } :where(html.page-index) .modal-content{ background: white; border-radius: 15px; max-width: 500px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; transform: scale(0.7); transition: transform 0.3s ease; } :where(html.page-index) #tech-modal.active .modal-content{ transform: scale(1); } :where(html.page-index) .modal-close{ position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; z-index: 1; } :where(html.page-index) .modal-close:hover{ color: #333; } :where(html.page-index) .modal-header{ padding: 30px 30px 20px; border-bottom: 3px solid #1bc7fb; display: flex; align-items: center; gap: 15px; } :where(html.page-index) .modal-icon{ font-size: 2.5rem; color: #1bc7fb; } :where(html.page-index) .modal-title{ font-size: 1.8rem; margin: 0; color: #333; } :where(html.page-index) .modal-body{ padding: 30px; } :where(html.page-index) .modal-description{ font-size: 1.1rem; line-height: 1.6; color: #555; margin-bottom: 25px; text-align: left; } :where(html.page-index) .modal-features h4{ color: #333; margin-bottom: 15px; font-size: 1.2rem; } :where(html.page-index) .features-list{ list-style: none; padding: 0; margin: 0; } :where(html.page-index) .features-list li{ padding: 8px 0; padding-left: 25px; position: relative; color: #555; } :where(html.page-index) .features-list li:before{ content: '✓'; position: absolute; left: 0; color: #1bc7fb; font-weight: bold; } :where(html.page-index) .demo-section{ background: #f8f9fa; padding: 60px 0; margin: 50px 0; } :where(html.page-index) .demo-container{ max-width: 1000px; margin: 0 auto; padding: 0 20px; } :where(html.page-index) .demo-video{ width: 100%; max-width: 800px; margin: 0 auto; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } :where(html.page-index) .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 50px 0; text-align: center; } :where(html.page-index) .stat-item{ padding: 20px; } :where(html.page-index) .stat-number{ font-size: 3rem; font-weight: bold; background: linear-gradient(135deg, #056bf6, #1bc7fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; } :where(html.page-index) .stat-label{ color: #666; font-size: 1.1rem; } @keyframes index-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } :where(html.page-index) .integrations-showcase{ position: relative; background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); border-radius: 15px; padding: 20px 15px; margin: 20px 10px; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.3s ease; animation: index-fadeInUp 0.6s ease-out; } :where(html.page-index.dark) .integrations-showcase{ background: rgba(4, 8, 14, 0.94) !important; border: 1px solid rgba(96, 165, 250, 0.09) !important; box-shadow: 0 20px 40px rgba(0, 2, 6, 0.62) !important; } :where(html.page-index) .integration-canvas{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; border-radius: 15px; } :where(html.page-index) .integrations-showcase::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06)); z-index: 1; border-radius: 15px; } :where(html.page-index.dark) .integrations-showcase::before{ background: none !important; } :where(html.page-index) .showcase-title{ font-size: 1.4rem; color: #ffffff; text-align: center; margin-bottom: 8px; position: relative; z-index: 2; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); font-weight: 600; } :where(html.page-index) .showcase-subtitle{ font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 25px; position: relative; z-index: 2; line-height: 1.4; } :where(html.page-index) .tech-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; position: relative; z-index: 2; } :where(html.page-index) .tech-card{ background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 15px 10px; text-align: center; transition: all 0.3s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: relative; overflow: hidden; } :where(html.page-index) .tech-card::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s ease; } :where(html.page-index) .tech-card:hover::before{ left: 100%; } :where(html.page-index) .tech-card:hover{ transform: translateY(-3px); border-color: rgba(27, 199, 251, 0.4); box-shadow: 0 8px 25px rgba(5, 107, 246, 0.2); } :where(html.page-index) .tech-icon{ font-size: 2rem; margin-bottom: 8px; display: block; color: white !important; filter: brightness(0) invert(1); } :where(html.page-index) .tech-icon i{ color: white !important; } :where(html.page-index) .tech-card h3{ color: #ffffff; font-size: 0.9rem; margin: 0 0 8px 0; font-weight: 600; } :where(html.page-index) .tech-card.active{ animation: index-cardPulse 3s ease-in-out infinite; } :where(html.page-index) .tech-card.processing{ animation: index-cardProcessing 2s ease-in-out infinite; } @keyframes index-cardPulse { 0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 136, 0.1); } 50% { box-shadow: 0 0 25px rgba(0, 255, 136, 0.2); } } @keyframes index-cardProcessing { 0%, 100% { box-shadow: 0 0 15px rgba(255, 170, 0, 0.1); } 50% { box-shadow: 0 0 25px rgba(255, 170, 0, 0.2); } } @media (min-width: 481px) and (max-width: 768px) {:where(html.page-index) .integrations-showcase{ padding: 25px 20px; margin: 25px 15px; border-radius: 18px; } :where(html.page-index) .showcase-title{ font-size: 1.6rem; margin-bottom: 10px; } :where(html.page-index) .showcase-subtitle{ font-size: 0.9rem; margin-bottom: 25px; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(3, 1fr); gap: 15px; } :where(html.page-index) .tech-card{ padding: 18px 12px; } :where(html.page-index) .tech-icon{ font-size: 2.2rem; } :where(html.page-index) .tech-card h3{ font-size: 1rem; } } @media (min-width: 769px) {:where(html.page-index) .integrations-showcase{ padding: 40px 30px; margin: 40px 20px; border-radius: 20px; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } :where(html.page-index) .integrations-showcase:hover{ transform: translateY(-5px); box-shadow: 0 15px 45px rgba(5, 107, 246, 0.2); border: 1px solid rgba(27, 199, 251, 0.3); } :where(html.page-index.dark) .integrations-showcase:hover{ box-shadow: 0 18px 46px rgba(0, 2, 6, 0.68); border: 1px solid rgba(96, 165, 250, 0.14); } :where(html.page-index) .showcase-title{ font-size: 2.2rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } :where(html.page-index) .showcase-subtitle{ font-size: 1.1rem; margin-bottom: 30px; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(5, 1fr); gap: 20px; } :where(html.page-index) .tech-card{ padding: 25px 15px; } :where(html.page-index) .tech-icon{ font-size: 2.5rem; margin-bottom: 12px; } :where(html.page-index) .tech-card h3{ font-size: 1.1rem; margin-bottom: 10px; } } @media (max-width: 768px) {:where(html.page-index) .project-title{ font-size: 2.5rem; } :where(html.page-index) .project-subtitle{ font-size: 1.0rem; color: #ffffff; font-size: 1.0rem; line-height: 1.6; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; animation: index-fadeInUp 1s ease-out 0.2s both; } :where(html.page-index) .feature-description{ color: #666; font-size: 1.0rem; line-height: 1.6; text-align: left; margin: 0 auto; padding: 5px; margin-top: 10px; white-space: normal; word-spacing: normal; letter-spacing: normal; } :where(html.page-index) .action-buttons{ flex-direction: column; align-items: center; } :where(html.page-index) .tech-badges{ justify-content: center; } :where(html.page-index) .feature-grid{ grid-template-columns: 1fr; } :where(html.page-index) .integrations-showcase{ padding: 25px 15px; margin: 20px 10px; } :where(html.page-index) .showcase-title{ font-size: 1.6rem; } :where(html.page-index) .showcase-subtitle{ font-size: 0.9rem; line-height: 1.4; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; } :where(html.page-index) .tech-card{ padding: 12px 8px; } :where(html.page-index) .tech-icon{ font-size: 1.8rem; } :where(html.page-index) .tech-card h3{ font-size: 0.85rem; } } @media (max-width: 480px) {:where(html.page-index) .integrations-showcase{ padding: 12px 6px; margin: 8px 4px; } :where(html.page-index) .showcase-title{ font-size: 1.4rem; margin-bottom: 8px; } :where(html.page-index) .showcase-subtitle{ font-size: 0.85rem; line-height: 1.3; margin-bottom: 15px; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; } :where(html.page-index) .tech-card{ padding: 10px 6px; } :where(html.page-index) .tech-icon{ font-size: 1.6rem; margin-bottom: 6px; } :where(html.page-index) .tech-card h3{ font-size: 0.8rem; margin-bottom: 6px; } } @media (max-width: 375px) {:where(html.page-index) .integrations-showcase{ padding: 10px 5px; margin: 6px 2px; } :where(html.page-index) .showcase-title{ font-size: 1.2rem; } :where(html.page-index) .showcase-subtitle{ font-size: 0.8rem; } :where(html.page-index) .tech-grid{ grid-template-columns: repeat(2, 1fr); gap: 6px; } :where(html.page-index) .tech-card{ padding: 8px 4px; } :where(html.page-index) .tech-icon{ font-size: 1.4rem; margin-bottom: 4px; } :where(html.page-index) .tech-card h3{ font-size: 0.75rem; margin-bottom: 4px; } } :where(html.page-index) .automation-card{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px 30px; margin: 40px 0; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; position: relative; overflow: hidden; transition: all 0.3s ease; } :where(html.page-index) .automation-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #007bff, #0056b3, #007bff); background-size: 200% 100%; animation: index-shimmer 3s ease-in-out infinite; } @keyframes index-shimmer { 0%, 100% { background-position: -200% 0; } 50% { background-position: 200% 0; } } :where(html.page-index) .automation-card:hover{ transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); } :where(html.page-index) .card-icon{ display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3); transition: all 0.3s ease; } :where(html.page-index) .card-icon i{ font-size: 2.5rem; color: white; } :where(html.page-index) .automation-card:hover .card-icon{ transform: scale(1.1) rotate(5deg); box-shadow: 0 15px 40px rgba(0, 123, 255, 0.4); } :where(html.page-index) .card-title{ font-size: 2.2rem; font-weight: 700; color: #2c3e50; margin-bottom: 20px; background: linear-gradient(135deg, #007bff, #0056b3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } :where(html.page-index) .card-divider{ width: 80px; height: 4px; background: linear-gradient(90deg, #007bff, #0056b3); border-radius: 2px; margin: 0 auto 25px; transition: all 0.3s ease; } :where(html.page-index) .automation-card:hover .card-divider{ width: 120px; } :where(html.page-index) .card-description{ font-size: 1.1rem; line-height: 1.7; color: #5a6c7d; max-width: 600px; margin: 0 auto; font-weight: 400; } @media (max-width: 768px) {:where(html.page-index) .automation-card{ padding: 30px 20px; margin: 30px 0; } :where(html.page-index) .card-icon{ width: 60px; height: 60px; margin-bottom: 20px; } :where(html.page-index) .card-icon i{ font-size: 2rem; } :where(html.page-index) .card-title{ font-size: 1.8rem; margin-bottom: 15px; } :where(html.page-index) .card-description{ font-size: 1rem; line-height: 1.6; } } @media (max-width: 480px) {:where(html.page-index) .automation-card{ padding: 25px 15px; border-radius: 15px; } :where(html.page-index) .card-title{ font-size: 1.5rem; } :where(html.page-index) .card-description{ font-size: 0.95rem; } } :where(html.page-index) .modern-cta-card{ position: relative; background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 86, 179, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(20px); border-radius: 25px; padding: 0; margin: 60px 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 25px 50px rgba(0, 123, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } :where(html.page-index) .modern-cta-card:hover{ transform: translateY(-8px); box-shadow: 0 35px 70px rgba(0, 123, 255, 0.15), 0 15px 40px rgba(0, 0, 0, 0.15); } :where(html.page-index) .card-background{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } :where(html.page-index) .floating-shapes{ position: absolute; width: 100%; height: 100%; } :where(html.page-index) .shape{ position: absolute; border-radius: 50%; background: linear-gradient(45deg, rgba(0, 123, 255, 0.1), rgba(0, 86, 179, 0.05)); animation: index-float 6s ease-in-out infinite; } :where(html.page-index) .shape-1{ width: 120px; height: 120px; top: 10%; left: 5%; animation-delay: 0s; } :where(html.page-index) .shape-2{ width: 80px; height: 80px; top: 60%; right: 10%; animation-delay: 2s; } :where(html.page-index) .shape-3{ width: 60px; height: 60px; bottom: 20%; left: 15%; animation-delay: 4s; } @keyframes index-float { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; } } :where(html.page-index) .card-content{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px; gap: 30px; } :where(html.page-index) .content-left{ display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; max-width: 800px; } :where(html.page-index) .cta-title{ font-size: 2.5rem; font-weight: 700; color: #2c3e50; line-height: 1.2; margin: 0; background: linear-gradient(135deg, #007bff, #0056b3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: index-titlePulse 3s ease-in-out infinite; } @keyframes index-titlePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } :where(html.page-index) .cta-subtitle{ font-size: 1.2rem; color: #5a6c7d; line-height: 1.6; margin: 0; font-weight: 400; } :where(html.page-index) .cta-features{ display: flex; flex-direction: column; gap: 15px; } :where(html.page-index) .feature-item{ display: flex; align-items: center; gap: 12px; padding: 12px 0; transition: all 0.3s ease; } :where(html.page-index) .feature-item:hover{ transform: translateX(10px); } :where(html.page-index) .feature-item i{ font-size: 1.2rem; color: #007bff; width: 20px; text-align: center; } :where(html.page-index) .feature-item span{ font-size: 1rem; color: #2c3e50; font-weight: 500; } :where(html.page-index) .cta-button{ position: relative; display: inline-flex; align-items: center; gap: 15px; padding: 18px 35px; background: linear-gradient(135deg, #007bff, #0056b3); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3); align-self: center; } :where(html.page-index) .cta-button:hover{ transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 123, 255, 0.4); } :where(html.page-index) .button-text{ position: relative; z-index: 2; } :where(html.page-index) .button-icon{ position: relative; z-index: 2; transition: transform 0.3s ease; } :where(html.page-index) .cta-button:hover .button-icon{ transform: translateX(5px); } :where(html.page-index) .button-ripple{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.6s ease; } :where(html.page-index) .cta-button:hover .button-ripple{ width: 300px; height: 300px; } :where(html.page-index) .content-right{ display: flex; justify-content: center; align-items: center; } :where(html.page-index) .animation-container{ position: relative; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; } :where(html.page-index) .lottie-animation{ width: 100%; height: 100%; border: none; border-radius: 20px; position: relative; z-index: 2; } :where(html.page-index) .animation-glow{ position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; background: radial-gradient(circle, rgba(0, 123, 255, 0.2) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); animation: index-glow 4s ease-in-out infinite; z-index: 1; } @keyframes index-glow { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } } @media (max-width: 1024px) {:where(html.page-index) .card-content{ gap: 25px; padding: 40px; } :where(html.page-index) .cta-title{ font-size: 2.2rem; } :where(html.page-index) .content-left{ max-width: 700px; } } @media (max-width: 768px) {:where(html.page-index) .card-content{ gap: 25px; padding: 30px; } :where(html.page-index) .cta-title{ font-size: 2rem; } :where(html.page-index) .cta-subtitle{ font-size: 1.1rem; } :where(html.page-index) .content-left{ max-width: 600px; } :where(html.page-index) .shape-1{ width: 80px; height: 80px; } :where(html.page-index) .shape-2{ width: 60px; height: 60px; } :where(html.page-index) .shape-3{ width: 40px; height: 40px; } } @media (max-width: 480px) {:where(html.page-index) .modern-cta-card{ margin: 40px 0; border-radius: 20px; } :where(html.page-index) .card-content{ padding: 25px 20px; gap: 30px; } :where(html.page-index) .cta-title{ font-size: 1.8rem; } :where(html.page-index) .cta-subtitle{ font-size: 1rem; } :where(html.page-index) .cta-button{ padding: 15px 25px; font-size: 1rem; } :where(html.page-index) .animation-container{ width: 180px; height: 180px; } } :where(html.page-index) #gallery-lightbox{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } :where(html.page-index) #gallery-lightbox.active{ opacity: 1; visibility: visible; } :where(html.page-index) #gallery-lightbox .overlay{ position: absolute; inset: 0; background: rgba(0,0,0,0.85); } :where(html.page-index) #gallery-lightbox .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1000px, calc(100% - 40px)); max-height: 86vh; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.35); overflow: hidden; } :where(html.page-index) #gallery-lightbox img{ max-width: 100%; max-height: 86vh; display: block; } :where(html.page-index) #gallery-lightbox .close, :where(html.page-index) #gallery-lightbox .prev, :where(html.page-index) #gallery-lightbox .next{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #ffffff; border: none; border-radius: 9999px; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; } :where(html.page-index) #gallery-lightbox .close{ top: 14px; right: 14px; transform: none; background: rgba(0,0,0,0.65); } :where(html.page-index) #gallery-lightbox .prev{ left: 14px; } :where(html.page-index) #gallery-lightbox .next{ right: 14px; } :where(html.page-index.dark) #gallery-lightbox .content{ background: rgba(4, 8, 14, 0.94); border: 1px solid rgba(96,165,250,0.09); box-shadow: 0 22px 54px rgba(0,2,6,0.62); } :where(html.page-index.dark) body.home-page .fundo{ background: transparent !important; } :where(html.page-github-dashboard-avancado) .dashboard-body{ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: #0d1117; color: #f0f6fc; line-height: 1.6; min-height: 100vh; padding-top: 100px; } :where(html.page-github-dashboard-avancado) .dashboard-container{ max-width: 1440px; margin: 0 auto; padding: 20px; } :where(html.page-github-dashboard-avancado) .dashboard-header{ background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 8px 32px rgba(5, 107, 246, 0.3); } :where(html.page-github-dashboard-avancado) .dashboard-header h1{ font-size: 2.5rem; font-weight: 700; color: #ffffff; margin-bottom: 10px; display: flex; align-items: center; gap: 15px; } :where(html.page-github-dashboard-avancado) .dashboard-header p{ color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; } :where(html.page-github-dashboard-avancado) .user-info{ display: flex; align-items: center; gap: 20px; margin-top: 20px; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); } :where(html.page-github-dashboard-avancado) .user-avatar{ width: 60px; height: 60px; border-radius: 50%; border: 3px solid #ffffff; } :where(html.page-github-dashboard-avancado) .user-details h3{ color: #f0f6fc; font-size: 1.3rem; margin-bottom: 5px; } :where(html.page-github-dashboard-avancado) .user-details p{ color: #7d8590; } :where(html.page-github-dashboard-avancado) .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } :where(html.page-github-dashboard-avancado) .stat-card{ background: linear-gradient(135deg, #21262d 0%, #161b22 100%); padding: 25px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border: 1px solid #30363d; transition: all 0.3s ease; position: relative; overflow: hidden; } :where(html.page-github-dashboard-avancado) .stat-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 32px rgba(5, 107, 246, 0.2); border-color: #056bf6; } :where(html.page-github-dashboard-avancado) .stat-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #056bf6, #1bc7fb); } :where(html.page-github-dashboard-avancado) .stat-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } :where(html.page-github-dashboard-avancado) .stat-icon{ width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #056bf6, #1bc7fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } :where(html.page-github-dashboard-avancado) .stat-value{ font-size: 2.5rem; font-weight: 700; color: #f0f6fc; margin-bottom: 5px; } :where(html.page-github-dashboard-avancado) .stat-label{ color: #7d8590; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } :where(html.page-github-dashboard-avancado) .charts-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 30px; } :where(html.page-github-dashboard-avancado) .chart-container{ background: linear-gradient(135deg, #21262d 0%, #161b22 100%); padding: 25px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .chart-title{ display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 600; color: #f0f6fc; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .chart-title i{ color: #58a6ff; } :where(html.page-github-dashboard-avancado) .timeline-container, :where(html.page-github-dashboard-avancado) .commits-feed{ background: linear-gradient(135deg, #21262d 0%, #161b22 100%); padding: 25px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border: 1px solid #30363d; margin-bottom: 30px; } :where(html.page-github-dashboard-avancado) .timeline-item{ display: flex; align-items: flex-start; gap: 15px; padding: 15px 0; border-bottom: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .timeline-item:last-child{ border-bottom: none; } :where(html.page-github-dashboard-avancado) .timeline-icon{ width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg, #056bf6, #1bc7fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; flex-shrink: 0; } :where(html.page-github-dashboard-avancado) .timeline-content{ flex: 1; } :where(html.page-github-dashboard-avancado) .timeline-content h4{ color: #f0f6fc; margin-bottom: 5px; font-size: 1.1rem; } :where(html.page-github-dashboard-avancado) .timeline-content p{ color: #7d8590; font-size: 0.9rem; margin-bottom: 8px; } :where(html.page-github-dashboard-avancado) .language-badge{ background: #21262d; color: #58a6ff; padding: 2px 8px; border-radius: 12px; font-size: 0.8rem; border: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .timeline-meta{ text-align: right; color: #7d8590; font-size: 0.8rem; } :where(html.page-github-dashboard-avancado) .timeline-date{ margin-bottom: 5px; } :where(html.page-github-dashboard-avancado) .commit-item{ display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .commit-item:last-child{ border-bottom: none; } :where(html.page-github-dashboard-avancado) .commit-avatar{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid #30363d; } :where(html.page-github-dashboard-avancado) .commit-content{ flex: 1; } :where(html.page-github-dashboard-avancado) .commit-message{ color: #f0f6fc; font-size: 0.95rem; margin-bottom: 3px; } :where(html.page-github-dashboard-avancado) .commit-meta{ color: #7d8590; font-size: 0.8rem; } :where(html.page-github-dashboard-avancado) .commit-repo{ color: #58a6ff; text-decoration: none; } :where(html.page-github-dashboard-avancado) .commit-repo:hover{ text-decoration: underline; } :where(html.page-github-dashboard-avancado) .last-updated{ text-align: center; color: #7d8590; font-size: 0.9rem; padding: 20px; background: #21262d; border-radius: 8px; border: 1px solid #30363d; } :where(html.page-github-dashboard-avancado) .last-updated i{ margin-right: 8px; color: #58a6ff; } :where(html.page-github-dashboard-avancado) .loading{ text-align: center; color: #7d8590; padding: 40px; font-size: 1.1rem; } :where(html.page-github-dashboard-avancado) .loading i{ animation: github-dashboard-avancado-spin 1s linear infinite; margin-right: 10px; color: #58a6ff; } @keyframes github-dashboard-avancado-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :where(html.page-github-dashboard-avancado) .error{ background: linear-gradient(135deg, #f85149 0%, #da3633 100%); color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } :where(html.page-github-dashboard-avancado) .error i{ font-size: 1.2rem; } :where(html.page-github-dashboard-avancado) .clock-container{ display: flex; justify-content: center; align-items: center; padding: 40px 20px; min-height: 200px; } :where(html.page-github-dashboard-avancado) .digital-clock{ text-align: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); border-radius: 20px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } :where(html.page-github-dashboard-avancado) .time-display{ font-family: 'Courier New', monospace; font-size: 3.5rem; font-weight: bold; color: #00d4ff; text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); margin-bottom: 15px; letter-spacing: 2px; } :where(html.page-github-dashboard-avancado) .separator{ animation: github-dashboard-avancado-blink 1s infinite; color: #00d4ff; } @keyframes github-dashboard-avancado-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } :where(html.page-github-dashboard-avancado) .date-display{ font-size: 1.2rem; color: #8b949e; font-weight: 300; letter-spacing: 1px; } @media (max-width: 768px) {:where(html.page-github-dashboard-avancado) .dashboard-container{ padding: 10px; } :where(html.page-github-dashboard-avancado) .dashboard-header{ padding: 20px; } :where(html.page-github-dashboard-avancado) .dashboard-header h1{ font-size: 2rem; } :where(html.page-github-dashboard-avancado) .stats-grid{ grid-template-columns: 1fr; } :where(html.page-github-dashboard-avancado) .charts-grid{ grid-template-columns: 1fr; } :where(html.page-github-dashboard-avancado) .user-info{ flex-direction: column; text-align: center; } :where(html.page-github-dashboard-avancado) .timeline-item{ flex-direction: column; align-items: flex-start; } :where(html.page-github-dashboard-avancado) .timeline-meta{ text-align: left; margin-top: 10px; } :where(html.page-github-dashboard-avancado) .time-display{ font-size: 2.5rem; } :where(html.page-github-dashboard-avancado) .date-display{ font-size: 1rem; } :where(html.page-github-dashboard-avancado) .digital-clock{ padding: 20px; } } :where(html.page-github-dashboard-avancado) .loading-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0.5s ease; } :where(html.page-github-dashboard-avancado) .loading-overlay.hidden{ opacity: 0; visibility: hidden; } :where(html.page-github-dashboard-avancado) .loading-content{ text-align: center; color: #f0f6fc; } :where(html.page-github-dashboard-avancado) .loading-spinner{ position: relative; width: 80px; height: 80px; margin: 0 auto 30px; } :where(html.page-github-dashboard-avancado) .spinner-ring{ position: absolute; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid #056bf6; border-radius: 50%; animation: github-dashboard-avancado-spin 1.5s linear infinite; } :where(html.page-github-dashboard-avancado) .spinner-ring:nth-child(2){ width: 60px; height: 60px; top: 10px; left: 10px; border-top-color: #1bc7fb; animation-duration: 1.2s; animation-direction: reverse; } :where(html.page-github-dashboard-avancado) .spinner-ring:nth-child(3){ width: 40px; height: 40px; top: 20px; left: 20px; border-top-color: #7c3aed; animation-duration: 0.9s; } @keyframes github-dashboard-avancado-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } :where(html.page-github-dashboard-avancado) .loading-text h3{ font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; background: linear-gradient(135deg, #056bf6, #1bc7fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } :where(html.page-github-dashboard-avancado) .loading-text p{ color: #7d8590; font-size: 1rem; margin: 0; animation: github-dashboard-avancado-pulse 2s ease-in-out infinite; } @keyframes github-dashboard-avancado-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } :where(html.page-github-dashboard-avancado) .skeleton{ background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%); background-size: 200% 100%; animation: github-dashboard-avancado-skeleton-loading 1.5s infinite; } @keyframes github-dashboard-avancado-skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } :where(html.page-github-dashboard-avancado) .stat-card.loading .stat-value, :where(html.page-github-dashboard-avancado) .stat-card.loading .stat-label{ background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%); background-size: 200% 100%; animation: github-dashboard-avancado-skeleton-loading 1.5s infinite; color: transparent; border-radius: 4px; height: 1.2em; } :where(html.page-github-dashboard-avancado) .stat-card.loading .stat-value{ height: 2.5rem; margin-bottom: 10px; } :where(html.page-github-dashboard-avancado) .chart-container.loading{ position: relative; overflow: hidden; } :where(html.page-github-dashboard-avancado) .chart-container.loading::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 25%, rgba(48, 54, 61, 0.5) 50%, transparent 75%); background-size: 200% 100%; animation: github-dashboard-avancado-skeleton-loading 1.5s infinite; z-index: 1; } :where(html.page-github-dashboard-avancado) .stat-card{ transition: all 0.3s ease; } :where(html.page-github-dashboard-avancado) .chart-container{ transition: all 0.3s ease; } :where(html.page-github-dashboard-avancado) .stat-card.loading{ transform: scale(0.98); opacity: 0.7; } :where(html.page-github-dashboard-avancado) .chart-container.loading{ transform: scale(0.98); opacity: 0.7; } :where(html.page-github-dashboard-avancado) .fade-in{ animation: github-dashboard-avancado-fadeIn 0.5s ease-in; } @keyframes github-dashboard-avancado-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } :where(html.page-github-dashboard-avancado) #loadingOverlay{ transition: opacity 0.5s ease; } @media (max-width: 480px) {:where(html.page-github-dashboard-avancado) .time-display{ font-size: 2rem; } :where(html.page-github-dashboard-avancado) .clock-container{ padding: 20px 10px; min-height: 150px; } } :where(html.page-sobre) .about-page{ position: relative; overflow-x: hidden; } :where(html.page-sobre) .about-page::before{ content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 14%, rgba(5, 107, 246, 0.12), transparent 24%), radial-gradient(circle at 86% 18%, rgba(27, 199, 251, 0.12), transparent 22%), radial-gradient(circle at 72% 72%, rgba(56, 189, 248, 0.08), transparent 28%); z-index: -2; } :where(html.page-sobre.dark) .about-page::before{ display: none; } :where(html.page-sobre) .about-page::after{ content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.26), transparent 85%); opacity: 0.35; z-index: -1; } :where(html.page-sobre.dark) .about-page::after{ display: none; } :where(html.page-sobre) .reveal{ opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } :where(html.page-sobre) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } :where(html.page-sobre) .about-hero.reveal{ transform: translate3d(0, 30px, 0) scale(0.988); } :where(html.page-sobre) .about-section.reveal, :where(html.page-sobre) .about-story.reveal, :where(html.page-sobre) .about-sidecard.reveal, :where(html.page-sobre) .about-card.reveal, :where(html.page-sobre) .about-gallery.reveal, :where(html.page-sobre) .about-gallery__item.reveal{ transform: translate3d(0, 22px, 0) scale(0.99); } :where(html.page-sobre) .about-shell{ width: min(1120px, calc(100% - 24px)); margin: 76px auto 40px; display: grid; gap: 18px; } :where(html.page-sobre) .about-surface{ position: relative; overflow: hidden; border-radius: 30px; border: 1px solid rgba(148, 163, 184, 0.18); background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.9)); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-sobre) .about-surface::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%); pointer-events: none; } :where(html.page-sobre.dark) .about-surface{ background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: 0 28px 70px rgba(0, 2, 6, 0.54); } :where(html.page-sobre.dark) .about-surface::before{ background: linear-gradient(135deg, rgba(96, 165, 250, 0.025), transparent 44%); } :where(html.page-sobre) .about-hero{ padding: 28px; } :where(html.page-sobre) .about-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: 24px; align-items: center; } :where(html.page-sobre) body.page-intro-ready .about-hero{ animation: sobre-aboutHeroLiftIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both 0.04s; } :where(html.page-sobre) body.page-intro-ready .about-hero__content{ animation: sobre-aboutCopyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.14s; } :where(html.page-sobre) body.page-intro-ready .about-profile{ animation: sobre-aboutProfileIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both 0.18s; } :where(html.page-sobre) body.page-intro-ready .about-stat, :where(html.page-sobre) body.page-intro-ready .about-btn{ animation: sobre-aboutRiseIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--intro-delay, 0ms); } :where(html.page-sobre) .about-eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(5, 107, 246, 0.08); border: 1px solid rgba(5, 107, 246, 0.14); color: #056bf6; font-size: 0.85rem; font-weight: 700; } :where(html.page-sobre.dark) .about-eyebrow{ background: rgba(5, 107, 246, 0.12); border-color: rgba(56, 189, 248, 0.18); color: #7dd3fc; } :where(html.page-sobre) .about-title{ margin: 16px 0 12px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; color: #0f172a; } :where(html.page-sobre.dark) .about-title{ color: #e5eefc; } :where(html.page-sobre) .about-subtitle{ margin: 0 0 16px; padding: 0; color: #1d4ed8; font-size: clamp(1rem, 2vw, 1.28rem); font-weight: 700; line-height: 1.45; text-align: left; } :where(html.page-sobre.dark) .about-subtitle{ color: #7dd3fc; } :where(html.page-sobre) .about-copy, :where(html.page-sobre) .about-section__text, :where(html.page-sobre) .about-card__text, :where(html.page-sobre) .about-gallery__text{ margin: 0; padding: 0; color: #475569; font-size: 1rem; line-height: 1.72; text-align: left; text-wrap: pretty; } :where(html.page-sobre.dark) .about-copy, :where(html.page-sobre.dark) .about-section__text, :where(html.page-sobre.dark) .about-card__text, :where(html.page-sobre.dark) .about-gallery__text{ color: #cbd5e1; } :where(html.page-sobre) .about-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; } :where(html.page-sobre) .about-stat{ padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.68); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); } :where(html.page-sobre.dark) .about-stat{ background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: none; } :where(html.page-sobre) .about-stat strong{ display: block; margin-bottom: 4px; color: #0f172a; font-size: 1.4rem; line-height: 1; } :where(html.page-sobre.dark) .about-stat strong{ color: #e5eefc; } :where(html.page-sobre) .about-stat span{ display: block; color: #64748b; font-size: 0.9rem; line-height: 1.45; } :where(html.page-sobre.dark) .about-stat span{ color: #94a3b8; } :where(html.page-sobre) .about-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } :where(html.page-sobre) .about-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } :where(html.page-sobre) .about-btn:hover{ transform: translateY(-2px); } :where(html.page-sobre) .about-btn--primary{ color: #ffffff; background: linear-gradient(135deg, #056bf6, #1bc7fb); box-shadow: 0 16px 30px rgba(5, 107, 246, 0.24); } :where(html.page-sobre) .about-btn--secondary{ color: #0f172a; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); } :where(html.page-sobre.dark) .about-btn--secondary{ color: #e5eefc; background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: none; } :where(html.page-sobre) .about-profile{ display: grid; place-items: center; } :where(html.page-sobre) .about-profile__wrap{ position: relative; width: min(100%, 290px); aspect-ratio: 1; padding: 8px; border-radius: 36px; background: linear-gradient(135deg, #056bf6, #1bc7fb, #8b5cf6); box-shadow: 0 22px 44px rgba(5, 107, 246, 0.2); } :where(html.page-sobre) .about-profile__wrap::before{ content: ""; position: absolute; inset: -16px; border-radius: 44px; border: 1px solid rgba(5, 107, 246, 0.16); opacity: 0.6; } :where(html.page-sobre) .about-profile__image{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; } :where(html.page-sobre) .about-section{ padding: 26px; } :where(html.page-sobre) .about-section__head{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 18px; } :where(html.page-sobre) .about-section__title{ margin: 0; color: #0f172a; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; } :where(html.page-sobre.dark) .about-section__title{ color: #e5eefc; } :where(html.page-sobre) .about-section__icon{ width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; color: #ffffff; background: linear-gradient(135deg, #056bf6, #1bc7fb); box-shadow: 0 16px 30px rgba(5, 107, 246, 0.22); } :where(html.page-sobre) .about-split{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); gap: 18px; } :where(html.page-sobre) .about-story, :where(html.page-sobre) .about-sidecard, :where(html.page-sobre) .about-card, :where(html.page-sobre) .about-gallery{ padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); } :where(html.page-sobre.dark) .about-story, :where(html.page-sobre.dark) .about-sidecard, :where(html.page-sobre.dark) .about-card, :where(html.page-sobre.dark) .about-gallery{ background: rgba(4, 8, 14, 0.94); border-color: rgba(96, 165, 250, 0.09); box-shadow: none; } :where(html.page-sobre) .about-story{ display: grid; gap: 14px; } :where(html.page-sobre) .about-sidecard{ display: grid; gap: 12px; align-content: start; } :where(html.page-sobre) .about-list{ display: grid; gap: 12px; } :where(html.page-sobre) .about-list__item{ display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; } :where(html.page-sobre) .about-list__item i{ width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #056bf6, #1bc7fb); color: #ffffff; } :where(html.page-sobre) .about-list__item strong, :where(html.page-sobre) .about-card__title, :where(html.page-sobre) .about-gallery__title{ display: block; margin: 0 0 6px; color: #0f172a; font-size: 1.05rem; line-height: 1.35; } :where(html.page-sobre.dark) .about-list__item strong, :where(html.page-sobre.dark) .about-card__title, :where(html.page-sobre.dark) .about-gallery__title{ color: #e5eefc; } :where(html.page-sobre) .about-cards{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } :where(html.page-sobre) .about-card{ display: grid; gap: 14px; } :where(html.page-sobre) .about-card__top{ display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; } :where(html.page-sobre) .about-card__icon{ width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #ffffff; background: linear-gradient(135deg, #056bf6, #1bc7fb); box-shadow: 0 14px 26px rgba(5, 107, 246, 0.22); } :where(html.page-sobre) .about-card--python .about-card__icon{ background: linear-gradient(135deg, #3776ab, #ffd43b); } :where(html.page-sobre) .about-card--linux .about-card__icon{ background: linear-gradient(135deg, #111827, #4b5563); } :where(html.page-sobre) .about-card--observability .about-card__icon{ background: linear-gradient(135deg, #0f766e, #22c55e); } :where(html.page-sobre) .about-card--automation .about-card__icon{ background: linear-gradient(135deg, #7c3aed, #22d3ee); } :where(html.page-sobre) .about-card--ml .about-card__icon{ background: linear-gradient(135deg, #ec4899, #8b5cf6); } :where(html.page-sobre) .about-card--data .about-card__icon{ background: linear-gradient(135deg, #0ea5e9, #2563eb); } :where(html.page-sobre) .about-card--regex .about-card__icon{ background: linear-gradient(135deg, #f97316, #f59e0b); } :where(html.page-sobre) .about-card--rust .about-card__icon{ background: linear-gradient(135deg, #111827, #b45309); } :where(html.page-sobre) .about-gallery{ display: grid; gap: 16px; } :where(html.page-sobre) .about-gallery__header{ display: grid; gap: 8px; } :where(html.page-sobre) .about-gallery__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } :where(html.page-sobre) .about-gallery__item{ display: block; overflow: hidden; border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); background: #e2e8f0; } :where(html.page-sobre.dark) .about-gallery__item{ border-color: rgba(148, 163, 184, 0.14); box-shadow: none; } :where(html.page-sobre) .about-gallery__item img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.28s ease, filter 0.28s ease; } :where(html.page-sobre) .about-gallery__item:hover img{ transform: scale(1.04); filter: saturate(1.06); } @keyframes sobre-aboutHeroLiftIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.988); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sobre-aboutCopyIn { from { opacity: 0; transform: translate3d(-18px, 20px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sobre-aboutProfileIn { from { opacity: 0; transform: translate3d(18px, 20px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sobre-aboutRiseIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (max-width: 960px) {:where(html.page-sobre) .about-hero__grid, :where(html.page-sobre) .about-split{ grid-template-columns: 1fr; } :where(html.page-sobre) .about-profile{ order: -1; } } @media (max-width: 768px) {:where(html.page-sobre) .about-shell{ width: calc(100% - 20px); margin-top: 70px; gap: 14px; } :where(html.page-sobre) .about-hero, :where(html.page-sobre) .about-section{ padding: 20px 18px; } :where(html.page-sobre) .about-section__head{ grid-template-columns: 1fr; } :where(html.page-sobre) .about-stats, :where(html.page-sobre) .about-cards, :where(html.page-sobre) .about-gallery__grid{ grid-template-columns: 1fr; } :where(html.page-sobre) .about-actions{ display: grid; grid-template-columns: 1fr; } :where(html.page-sobre) .about-btn{ width: 100%; } :where(html.page-sobre) .about-profile__wrap{ width: min(100%, 220px); } } @media (max-width: 480px) {:where(html.page-sobre) .about-title{ font-size: 1.95rem; } :where(html.page-sobre) .about-subtitle, :where(html.page-sobre) .about-copy, :where(html.page-sobre) .about-section__text, :where(html.page-sobre) .about-card__text, :where(html.page-sobre) .about-gallery__text{ font-size: 0.96rem; } :where(html.page-sobre) .about-hero, :where(html.page-sobre) .about-section{ padding: 18px 16px; } :where(html.page-sobre) .about-story, :where(html.page-sobre) .about-sidecard, :where(html.page-sobre) .about-card, :where(html.page-sobre) .about-gallery{ padding: 16px; border-radius: 20px; } } @media (prefers-reduced-motion: reduce) {:where(html.page-sobre) .reveal, :where(html.page-sobre) .reveal.is-visible, :where(html.page-sobre) body.page-intro-ready .about-hero, :where(html.page-sobre) body.page-intro-ready .about-hero__content, :where(html.page-sobre) body.page-intro-ready .about-profile, :where(html.page-sobre) body.page-intro-ready .about-stat, :where(html.page-sobre) body.page-intro-ready .about-btn, :where(html.page-sobre) .about-gallery__item img, :where(html.page-sobre) .about-btn{ transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } }

:where(html.page-trabalhos){ --bg: #f6f9ff; --bg-soft: rgba(255, 255, 255, 0.72); --card: rgba(255, 255, 255, 0.82); --text: #0f172a; --muted: #475569; --border: rgba(148, 163, 184, 0.25); --primary: #056bf6; --secondary: #1bc7fb; --shadow: 0 20px 50px rgba(5, 107, 246, 0.12); --modal-overlay: rgba(15, 23, 42, 0.46); --modal-bg: rgba(255, 255, 255, 0.96); --modal-media-bg: #eef4ff; --case-panel-bg: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95) ), radial-gradient( circle at top right, rgba(5, 107, 246, 0.1), transparent 32% ); --case-text: #0f172a; --case-muted: #334155; --case-heading: #0f172a; --case-kicker-bg: rgba(5, 107, 246, 0.09); --case-kicker-text: #075fd6; --case-feature-bg: rgba(5, 107, 246, 0.08); --case-feature-border: rgba(5, 107, 246, 0.14); --case-feature-text: #1e293b; --modal-control-bg: rgba(15, 23, 42, 0.72); --modal-control-text: #fff; --modal-scroll-track: rgba(148, 163, 184, 0.16); --modal-scroll-thumb: rgba(5, 107, 246, 0.64); --modal-scroll-thumb-hover: rgba(5, 107, 246, 0.82); } :where(html.page-trabalhos.dark){ --bg: #020202; --bg-soft: rgba(4, 8, 14, 0.94); --card: rgba(4, 8, 14, 0.94); --text: #e5eefc; --muted: #cbd5e1; --border: rgba(96, 165, 250, 0.09); --shadow: 0 24px 60px rgba(0, 2, 6, 0.6); --modal-overlay: rgba(0, 2, 6, 0.9); --modal-bg: #04080e; --modal-media-bg: #020811; --case-panel-bg: linear-gradient( 180deg, rgba(4, 8, 14, 0.94), rgba(4, 8, 14, 0.94) ); --case-text: #e5eefc; --case-muted: #cbd5e1; --case-heading: #f8fafc; --case-kicker-bg: rgba(59, 130, 246, 0.08); --case-kicker-text: #93e6ff; --case-feature-bg: rgba(4, 8, 14, 0.94); --case-feature-border: rgba(96, 165, 250, 0.09); --case-feature-text: #e2e8f0; --modal-control-bg: rgba(4, 8, 14, 0.94); --modal-control-text: #fff; --modal-scroll-track: rgba(15, 23, 42, 0.88); --modal-scroll-thumb: rgba(37, 99, 235, 0.72); --modal-scroll-thumb-hover: rgba(96, 165, 250, 0.88); } :where(html.page-trabalhos) *{ box-sizing: border-box; margin: 0; padding: 0; font-family: "Inter", system-ui, sans-serif; } :where(html.page-trabalhos) body{ background: radial-gradient( circle at top left, rgba(27, 199, 251, 0.16), transparent 30% ), radial-gradient( circle at top right, rgba(5, 107, 246, 0.18), transparent 28% ), var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; } :where(html.page-trabalhos.dark) body{ background: #020202; } :where(html.page-trabalhos) a{ color: inherit; text-decoration: none; } :where(html.page-trabalhos) .page-shell{ width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 48px; } :where(html.page-trabalhos) .topbar{ display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); position: sticky; top: 16px; z-index: 10; } :where(html.page-trabalhos) .brand{ font-weight: 800; letter-spacing: -0.02em; background: linear-gradient( 90deg, var(--primary), var(--secondary) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } :where(html.page-trabalhos) .topbar-links{ display: flex; gap: 12px; flex-wrap: wrap; } :where(html.page-trabalhos) .pill-link{ padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.08); font-weight: 600; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } :where(html.page-trabalhos) .pill-link:hover{ transform: translateY(-2px); border-color: rgba(27, 199, 251, 0.45); background: rgba(27, 199, 251, 0.1); } :where(html.page-trabalhos) .hero{ position: relative; overflow: hidden; border-radius: 32px; padding: 56px 28px; background: linear-gradient(135deg, #056bf6 0%, #1bc7fb 100%); box-shadow: 0 30px 80px rgba(5, 107, 246, 0.28); color: #fff; margin-bottom: 28px; } :where(html.page-trabalhos) .hero::before{ content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 25% ), radial-gradient( circle at 85% 30%, rgba(255, 255, 255, 0.16), transparent 20% ), radial-gradient( circle at 50% 100%, rgba(255, 255, 255, 0.12), transparent 25% ); pointer-events: none; } :where(html.page-trabalhos) .hero-content{ position: relative; z-index: 1; max-width: 860px; } :where(html.page-trabalhos) .eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); margin-bottom: 18px; font-weight: 600; } :where(html.page-trabalhos) .hero h1{ font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02; margin-bottom: 18px; letter-spacing: -0.04em; } :where(html.page-trabalhos) .hero p{ font-size: 1.08rem; line-height: 1.7; max-width: 720px; color: rgba(255, 255, 255, 0.95); } :where(html.page-trabalhos) .stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; } :where(html.page-trabalhos) .stat{ padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); } :where(html.page-trabalhos) .stat strong{ display: block; font-size: 1.8rem; margin-bottom: 6px; } :where(html.page-trabalhos) .section-card{ border: 1px solid var(--border); border-radius: 28px; padding: 24px; background: var(--card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); } :where(html.page-trabalhos) .section-head{ display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; } :where(html.page-trabalhos) .section-head h2{ font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; margin-bottom: 8px; } :where(html.page-trabalhos) .section-head p{ color: var(--muted); line-height: 1.6; max-width: 760px; } :where(html.page-trabalhos) .gallery-filters{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; } :where(html.page-trabalhos) .filter-btn{ padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--text); cursor: pointer; font-weight: 700; transition: 0.2s ease; } :where(html.page-trabalhos) .filter-btn:hover, :where(html.page-trabalhos) .filter-btn.active{ background: linear-gradient( 135deg, var(--primary), var(--secondary) ); color: #fff; border-color: transparent; transform: translateY(-1px); } :where(html.page-trabalhos) .gallery{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } :where(html.page-trabalhos) .gallery-item{ margin: 0; border-radius: 22px; overflow: hidden; position: relative; cursor: pointer; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); box-shadow: 0 12px 35px rgba(2, 6, 23, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; aspect-ratio: 4 / 3; min-height: 250px; } :where(html.page-trabalhos) .gallery-item:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(5, 107, 246, 0.16); border-color: rgba(27, 199, 251, 0.35); } :where(html.page-trabalhos) .gallery-item img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; } :where(html.page-trabalhos) .gallery-caption{ position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; border-radius: 18px; color: #fff; background: linear-gradient( 180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.82) ); backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; } :where(html.page-trabalhos) .gallery-item:hover .gallery-caption{ opacity: 1; transform: translateY(0); } :where(html.page-trabalhos) .gallery-caption strong{ display: block; font-size: 1rem; margin-bottom: 4px; } :where(html.page-trabalhos) .gallery-caption span{ font-size: 0.9rem; color: rgba(255, 255, 255, 0.86); } :where(html.page-trabalhos) .gallery-count{ position: absolute; top: 14px; right: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 0.82rem; font-weight: 700; backdrop-filter: blur(10px); z-index: 2; } :where(html.page-trabalhos) .lightbox-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: none; border-radius: 999px; background: var(--modal-control-bg); color: var(--modal-control-text); cursor: pointer; z-index: 2; } :where(html.page-trabalhos) .lightbox-prev{ left: 14px; } :where(html.page-trabalhos) .lightbox-next{ right: 14px; } :where(html.page-trabalhos) .lightbox-counter{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--modal-control-bg); color: var(--modal-control-text); font-size: 0.85rem; z-index: 2; } :where(html.page-trabalhos) .footer-note{ margin-top: 22px; text-align: center; color: var(--muted); line-height: 1.7; } :where(html.page-trabalhos) .lightbox{ position: fixed; inset: 0; background: var(--modal-overlay); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 1000; } :where(html.page-trabalhos) .lightbox.active{ opacity: 1; visibility: visible; } :where(html.page-trabalhos) .lightbox-content{ position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); width: min(1180px, 100%); max-height: 90vh; border-radius: 24px; overflow: hidden; background: var(--modal-bg); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); align-items: stretch; } :where(html.page-trabalhos) .lightbox-media{ position: relative; display: flex; align-items: center; justify-content: center; min-height: min(72vh, 680px); min-width: 0; min-height: 0; background: var(--modal-media-bg); } :where(html.page-trabalhos) .lightbox img{ display: block; width: 100%; height: 100%; max-height: 90vh; object-fit: contain; background: var(--modal-media-bg); } :where(html.page-trabalhos) .case-panel{ padding: 34px 28px; min-width: 0; min-height: 0; height: 100%; max-height: 90vh; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: var(--modal-scroll-thumb) var(--modal-scroll-track); background: var(--case-panel-bg); color: var(--case-text); } :where(html.page-trabalhos) .case-panel::-webkit-scrollbar{ width: 12px; } :where(html.page-trabalhos) .case-panel::-webkit-scrollbar-track{ background: var(--modal-scroll-track); border-radius: 999px; } :where(html.page-trabalhos) .case-panel::-webkit-scrollbar-thumb{ background: var(--modal-scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } :where(html.page-trabalhos) .case-panel::-webkit-scrollbar-thumb:hover{ background: var(--modal-scroll-thumb-hover); background-clip: padding-box; } :where(html.page-trabalhos) .case-kicker{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 14px; border-radius: 999px; background: var(--case-kicker-bg); color: var(--case-kicker-text); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } :where(html.page-trabalhos) .case-panel h3{ margin-bottom: 12px; color: var(--case-heading); font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -0.04em; } :where(html.page-trabalhos) .case-summary{ margin-bottom: 22px; color: var(--case-muted); line-height: 1.7; } :where(html.page-trabalhos) .case-detail{ margin-top: 20px; } :where(html.page-trabalhos) .case-detail h4{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--case-heading); font-size: 0.95rem; } :where(html.page-trabalhos) .case-detail p{ color: var(--case-muted); line-height: 1.65; } :where(html.page-trabalhos) .case-features{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; list-style: none; } :where(html.page-trabalhos) .case-features li{ padding: 8px 10px; border-radius: 999px; background: var(--case-feature-bg); border: 1px solid var(--case-feature-border); color: var(--case-feature-text); font-size: 0.84rem; font-weight: 700; } :where(html.page-trabalhos) .lightbox-close{ position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; color: var(--modal-control-text); background: var(--modal-control-bg); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800; line-height: 1; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24); z-index: 4; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } :where(html.page-trabalhos) .lightbox-close:hover{ transform: scale(1.04); border-color: rgba(255, 255, 255, 0.22); } :where(html.page-trabalhos) .lightbox-close span{ display: inline-block; transform: translateY(-1px); } @media (max-width: 1100px) {:where(html.page-trabalhos) .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) {:where(html.page-trabalhos) .lightbox-content{ grid-template-columns: 1fr; overflow-y: auto; } :where(html.page-trabalhos) .lightbox-media{ min-height: 52vh; } :where(html.page-trabalhos) .case-panel{ height: auto; max-height: none; overflow-y: visible; padding: 26px 20px; scrollbar-gutter: auto; } } @media (max-width: 768px) {:where(html.page-trabalhos) .page-shell{ width: min(100% - 20px, 1280px); padding-top: 14px; } :where(html.page-trabalhos) .topbar{ border-radius: 24px; padding: 14px; align-items: flex-start; flex-direction: column; } :where(html.page-trabalhos) .hero{ padding: 34px 20px; border-radius: 24px; } :where(html.page-trabalhos) .stats{ grid-template-columns: 1fr; } :where(html.page-trabalhos) .section-card{ padding: 18px; } :where(html.page-trabalhos) .section-head{ flex-direction: column; align-items: flex-start; } :where(html.page-trabalhos) .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } :where(html.page-trabalhos) .gallery-item{ border-radius: 18px; min-height: 180px; } :where(html.page-trabalhos) .gallery-caption{ opacity: 1; transform: none; } } @media (max-width: 480px) {:where(html.page-trabalhos) .gallery{ grid-template-columns: 1fr; } :where(html.page-trabalhos) .hero p, :where(html.page-trabalhos) .section-head p, :where(html.page-trabalhos) .footer-note{ font-size: 0.96rem; } } :where(html.page-orcamento){ --bg: #f4f8ff; --panel: rgba(255, 255, 255, 0.78); --panel-strong: rgba(255, 255, 255, 0.92); --border: rgba(148, 163, 184, 0.2); --text: #0f172a; --muted: #475569; --primary: #056bf6; --secondary: #1bc7fb; --shadow: 0 30px 70px rgba(15, 23, 42, 0.12); } :where(html.page-orcamento.dark){ --bg: #020202; --panel: rgba(4, 8, 14, 0.94); --panel-strong: rgba(4, 8, 14, 0.94); --border: rgba(96, 165, 250, 0.09); --text: #e5eefc; --muted: #cbd5e1; --shadow: 0 30px 70px rgba(0, 2, 6, 0.6); } :where(html.page-orcamento) *{ box-sizing: border-box; margin: 0; padding: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } :where(html.page-orcamento) body{ min-height: 100vh; color: var(--text); background: radial-gradient(circle at top left, rgba(27, 199, 251, 0.22), transparent 30%), radial-gradient(circle at top right, rgba(5, 107, 246, 0.18), transparent 26%), linear-gradient(180deg, rgba(5, 107, 246, 0.04), transparent 18%), var(--bg); overflow-x: hidden; } :where(html.page-orcamento.dark) body{ background: #020202; } :where(html.page-orcamento) .reveal{ opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } :where(html.page-orcamento) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } :where(html.page-orcamento) .hero-copy.reveal{ transform: translate3d(-18px, 28px, 0) scale(0.985); } :where(html.page-orcamento) .hero-form-card.reveal{ transform: translate3d(18px, 28px, 0) scale(0.985); } :where(html.page-orcamento) .hero-point.reveal, :where(html.page-orcamento) .info-item.reveal{ transform: translate3d(0, 20px, 0) scale(0.99); } :where(html.page-orcamento) body.page-intro-ready .navbar{ animation: orcamento-navFloatIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } :where(html.page-orcamento) body.page-intro-ready .hero-copy{ animation: orcamento-heroLeftIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; } :where(html.page-orcamento) body.page-intro-ready .hero-form-card{ animation: orcamento-heroRightIn 1s cubic-bezier(0.22, 1, 0.36, 1) both 0.08s; } :where(html.page-orcamento) body.page-intro-ready .hero-point{ animation: orcamento-riseIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--intro-delay, 0ms); } @keyframes orcamento-navFloatIn { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes orcamento-heroLeftIn { from { opacity: 0; transform: translate3d(-28px, 34px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes orcamento-heroRightIn { from { opacity: 0; transform: translate3d(28px, 34px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes orcamento-riseIn { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } :where(html.page-orcamento) a{ color: inherit; text-decoration: none; } :where(html.page-orcamento) .navbar{ position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1180px, calc(100% - 24px)); margin: 16px auto 0; padding: 14px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-orcamento) .logo{ background: url(../img/logo.png) no-repeat 50% 50%; background-size: contain; width: 130px; height: 64px; flex-shrink: 0; } :where(html.page-orcamento) .menu{ display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } :where(html.page-orcamento) .menu a{ padding: 10px 14px; border-radius: 999px; color: var(--text); font-weight: 700; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } :where(html.page-orcamento) .menu a:hover, :where(html.page-orcamento) .menu a.is-active{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; transform: translateY(-1px); } :where(html.page-orcamento) .nav-actions{ display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } :where(html.page-orcamento) .theme-toggle{ position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 96px; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-strong); color: var(--text); cursor: pointer; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } :where(html.page-orcamento) .theme-toggle:hover{ transform: translateY(-1px); border-color: rgba(5, 107, 246, 0.28); } :where(html.page-orcamento) .theme-toggle .icon{ position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 0.95rem; opacity: 0.82; transition: color 0.2s ease, opacity 0.2s ease; } :where(html.page-orcamento) .theme-toggle .thumb{ position: absolute; top: 4px; left: 4px; width: 38px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 12px 22px rgba(5, 107, 246, 0.24); transition: left 0.22s ease, right 0.22s ease; } :where(html.page-orcamento) .theme-toggle.mode-dark .thumb{ left: calc(100% - 42px); } :where(html.page-orcamento) .theme-toggle.mode-light .icon-sun, :where(html.page-orcamento) .theme-toggle.mode-dark .icon-moon{ color: #fff; opacity: 1; } :where(html.page-orcamento) .btn{ display: none; cursor: pointer; } :where(html.page-orcamento) .btn span{ display: block; width: 28px; height: 3px; margin: 5px 0; border-radius: 999px; background: var(--text); } :where(html.page-orcamento) .page-shell{ width: min(1180px, calc(100% - 24px)); margin: 20px auto 48px; } :where(html.page-orcamento) .hero{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: stretch; margin-bottom: 26px; } :where(html.page-orcamento) .hero-copy, :where(html.page-orcamento) .hero-form-card{ position: relative; overflow: hidden; border-radius: 32px; border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-orcamento) .hero-copy{ padding: 38px; background: linear-gradient(135deg, rgba(5, 107, 246, 0.92), rgba(27, 199, 251, 0.88)); color: #fff; } :where(html.page-orcamento) .hero-copy::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 24%), radial-gradient(circle at 80% 0%, rgba(255,255,255,0.12), transparent 24%); pointer-events: none; } :where(html.page-orcamento) .hero-copy > *{ position: relative; z-index: 1; } :where(html.page-orcamento) .eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.2); font-size: 0.95rem; font-weight: 700; margin-bottom: 18px; } :where(html.page-orcamento) .hero-title{ font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; margin-bottom: 18px; letter-spacing: -0.04em; } :where(html.page-orcamento) .hero-description{ font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.94); margin-bottom: 24px; max-width: 640px; } :where(html.page-orcamento) .hero-points{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } :where(html.page-orcamento) .hero-point{ padding: 16px; border-radius: 20px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16); } :where(html.page-orcamento) .hero-point strong{ display: block; font-size: 1rem; margin-bottom: 6px; } :where(html.page-orcamento) .hero-point span{ display: block; line-height: 1.55; color: rgba(255,255,255,0.9); font-size: 0.94rem; } :where(html.page-orcamento) .hero-form-card{ padding: 28px; background: var(--panel); } :where(html.page-orcamento) .hero-form-card::before{ content: ""; position: absolute; inset: auto -60px -80px auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(27,199,251,0.16), transparent 65%); pointer-events: none; } :where(html.page-orcamento) .form-card-head{ position: relative; z-index: 1; margin-bottom: 24px; } :where(html.page-orcamento) .form-card-head h2{ font-size: clamp(1.6rem, 2.5vw, 2.2rem); letter-spacing: -0.03em; margin-bottom: 10px; } :where(html.page-orcamento) .form-card-head p{ color: var(--muted); line-height: 1.65; } :where(html.page-orcamento) .trust-strip{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } :where(html.page-orcamento) .trust-strip span{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--panel-strong); border: 1px solid var(--border); color: var(--muted); font-size: 0.92rem; font-weight: 600; } :where(html.page-orcamento) .layout-grid{ display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px; align-items: start; } :where(html.page-orcamento) .info-card, :where(html.page-orcamento) .form-panel{ background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-orcamento) .info-card{ padding: 28px; } :where(html.page-orcamento) .info-card h3{ font-size: 1.5rem; margin-bottom: 16px; letter-spacing: -0.02em; } :where(html.page-orcamento) .info-card p{ color: var(--muted); line-height: 1.7; margin-bottom: 24px; } :where(html.page-orcamento) .info-list{ display: grid; gap: 14px; margin-bottom: 24px; } :where(html.page-orcamento) .info-item{ display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 18px; background: var(--panel-strong); border: 1px solid var(--border); } :where(html.page-orcamento) .info-item i{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); } :where(html.page-orcamento) .info-item strong{ display: block; margin-bottom: 4px; } :where(html.page-orcamento) .info-item span{ color: var(--muted); line-height: 1.55; font-size: 0.95rem; } :where(html.page-orcamento) .mini-note{ padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(5,107,246,0.08), rgba(27,199,251,0.08)); border: 1px solid rgba(5,107,246,0.14); color: var(--muted); line-height: 1.65; } :where(html.page-orcamento) .form-panel{ padding: 28px; } :where(html.page-orcamento) .form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } :where(html.page-orcamento) .form-group{ display: flex; flex-direction: column; gap: 8px; min-width: 0; } :where(html.page-orcamento) .form-group.is-full{ grid-column: 1 / -1; } :where(html.page-orcamento) .date-input-wrap{ width: 100%; min-width: 0; } :where(html.page-orcamento) .date-input-display{ display: none; } :where(html.page-orcamento) .date-input-native{ width: 100%; min-width: 0; margin: 0; display: block; } :where(html.page-orcamento) label{ font-weight: 700; font-size: 0.95rem; } :where(html.page-orcamento) input, :where(html.page-orcamento) select, :where(html.page-orcamento) textarea{ width: 100%; max-width: 100%; min-width: 0; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-strong); color: var(--text); font-size: 0.98rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; outline: none; } :where(html.page-orcamento) textarea{ min-height: 150px; resize: vertical; } :where(html.page-orcamento) .date-input-native::-webkit-date-and-time-value, :where(html.page-orcamento) .date-input-native::-webkit-datetime-edit, :where(html.page-orcamento) .date-input-native::-webkit-datetime-edit-fields-wrapper, :where(html.page-orcamento) .date-input-native::-webkit-datetime-edit-text, :where(html.page-orcamento) .date-input-native::-webkit-datetime-edit-month-field, :where(html.page-orcamento) .date-input-native::-webkit-datetime-edit-day-field, :where(html.page-orcamento) .date-input-native::-webkit-datetime-edit-year-field{ min-width: 0; padding: 0; } :where(html.page-orcamento) input:focus, :where(html.page-orcamento) select:focus, :where(html.page-orcamento) textarea:focus{ border-color: rgba(5,107,246,0.5); box-shadow: 0 0 0 4px rgba(5,107,246,0.10); transform: translateY(-1px); } :where(html.page-orcamento) .form-actions{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; } :where(html.page-orcamento) .helper-text{ color: var(--muted); line-height: 1.6; font-size: 0.92rem; flex: 1; min-width: 240px; } :where(html.page-orcamento) .btn-submit{ display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 800; box-shadow: 0 16px 35px rgba(5, 107, 246, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } :where(html.page-orcamento) .btn-submit:hover{ transform: translateY(-2px); box-shadow: 0 20px 40px rgba(5, 107, 246, 0.34); } :where(html.page-orcamento) .btn-submit.loading{ opacity: 0.8; cursor: not-allowed; } :where(html.page-orcamento) .error{ border-color: #ef4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important; } :where(html.page-orcamento) .error-message{ color: #ef4444; font-size: 0.88rem; font-weight: 600; } :where(html.page-orcamento) footer{ width: min(1180px, calc(100% - 24px)); margin: 0 auto 24px; padding: 18px 0; color: var(--muted); text-align: center; } @media (max-width: 1024px) {:where(html.page-orcamento) .hero, :where(html.page-orcamento) .layout-grid{ grid-template-columns: 1fr; } } @media (max-width: 768px) {:where(html.page-orcamento) .navbar{ width: calc(100% - 20px); border-radius: 24px; padding: 14px 16px; } :where(html.page-orcamento) .btn{ display: block; } :where(html.page-orcamento) .menu{ position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 14px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: 0.2s ease; } :where(html.page-orcamento) .menu.show{ opacity: 1; visibility: visible; transform: translateY(0); } :where(html.page-orcamento) .menu a{ text-align: center; } :where(html.page-orcamento) .page-shell{ width: calc(100% - 20px); margin-top: 16px; } :where(html.page-orcamento) .nav-actions{ gap: 10px; } :where(html.page-orcamento) .theme-toggle{ width: 88px; height: 42px; padding: 0 12px; } :where(html.page-orcamento) .theme-toggle .thumb{ width: 34px; height: 32px; } :where(html.page-orcamento) .theme-toggle.mode-dark .thumb{ left: calc(100% - 38px); } :where(html.page-orcamento) .hero-copy, :where(html.page-orcamento) .hero-form-card, :where(html.page-orcamento) .info-card, :where(html.page-orcamento) .form-panel{ border-radius: 24px; padding: 22px 18px; } :where(html.page-orcamento) .hero-points, :where(html.page-orcamento) .form-grid{ grid-template-columns: 1fr; } :where(html.page-orcamento) .date-input-wrap{ position: relative; } :where(html.page-orcamento) .date-input-display{ display: block; pointer-events: none; } :where(html.page-orcamento) .date-input-native{ position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; min-width: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } } @media (max-width: 480px) {:where(html.page-orcamento) .hero-title{ font-size: 2rem; } :where(html.page-orcamento) .hero-description, :where(html.page-orcamento) .helper-text, :where(html.page-orcamento) .mini-note, :where(html.page-orcamento) .info-card p, :where(html.page-orcamento) .info-item span, :where(html.page-orcamento) .form-card-head p{ font-size: 0.94rem; } } @media (prefers-reduced-motion: reduce) {:where(html.page-orcamento) .reveal, :where(html.page-orcamento) .reveal.is-visible, :where(html.page-orcamento) body.page-intro-ready .navbar, :where(html.page-orcamento) body.page-intro-ready .hero-copy, :where(html.page-orcamento) body.page-intro-ready .hero-form-card, :where(html.page-orcamento) body.page-intro-ready .hero-point{ animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } :where(html.page-reconhecimentos){ --bg: #f4f8ff; --panel: rgba(255, 255, 255, 0.78); --panel-strong: rgba(255, 255, 255, 0.92); --border: rgba(148, 163, 184, 0.2); --text: #0f172a; --muted: #475569; --primary: #056bf6; --secondary: #1bc7fb; --shadow: 0 30px 70px rgba(15, 23, 42, 0.12); --gold: #f59e0b; } :where(html.page-reconhecimentos.dark){ --bg: #020202; --panel: rgba(4, 8, 14, 0.94); --panel-strong: rgba(4, 8, 14, 0.94); --border: rgba(96, 165, 250, 0.09); --text: #e5eefc; --muted: #cbd5e1; --shadow: 0 30px 70px rgba(0, 2, 6, 0.6); } :where(html.page-reconhecimentos) *{ box-sizing: border-box; margin: 0; padding: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } :where(html.page-reconhecimentos) body{ min-height: 100vh; color: var(--text); background: radial-gradient(circle at top left, rgba(27, 199, 251, 0.2), transparent 30%), radial-gradient(circle at top right, rgba(5, 107, 246, 0.16), transparent 26%), linear-gradient(180deg, rgba(5, 107, 246, 0.04), transparent 18%), var(--bg); overflow-x: hidden; } :where(html.page-reconhecimentos.dark) body{ background: #020202; } :where(html.page-reconhecimentos) .reveal{ opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } :where(html.page-reconhecimentos) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } :where(html.page-reconhecimentos) .hero.reveal{ transform: translate3d(0, 28px, 0) scale(0.988); } :where(html.page-reconhecimentos) .section-card.reveal, :where(html.page-reconhecimentos) .recognition-card.reveal, :where(html.page-reconhecimentos) .timeline-item.reveal, :where(html.page-reconhecimentos) .cta-panel.reveal{ transform: translate3d(0, 22px, 0) scale(0.99); } :where(html.page-reconhecimentos) body.page-intro-ready .navbar{ animation: reconhecimentos-navFloatIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } :where(html.page-reconhecimentos) body.page-intro-ready .hero{ animation: reconhecimentos-heroLiftIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both 0.04s; } :where(html.page-reconhecimentos) body.page-intro-ready .hero-stat{ animation: reconhecimentos-riseIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--intro-delay, 0ms); } :where(html.page-reconhecimentos) a{ color: inherit; text-decoration: none; } :where(html.page-reconhecimentos) .navbar{ position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1180px, calc(100% - 24px)); margin: 16px auto 0; padding: 14px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-reconhecimentos) .logo{ background: url(../img/logo.png) no-repeat 50% 50%; background-size: contain; width: 130px; height: 64px; flex-shrink: 0; } :where(html.page-reconhecimentos) .menu{ display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } :where(html.page-reconhecimentos) .menu a{ padding: 10px 14px; border-radius: 999px; color: var(--text); font-weight: 700; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } :where(html.page-reconhecimentos) .menu a:hover, :where(html.page-reconhecimentos) .menu a.is-active{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; transform: translateY(-1px); } :where(html.page-reconhecimentos) .nav-actions{ display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } :where(html.page-reconhecimentos) .theme-toggle{ position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 96px; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-strong); color: var(--text); cursor: pointer; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } :where(html.page-reconhecimentos) .theme-toggle:hover{ transform: translateY(-1px); border-color: rgba(5, 107, 246, 0.28); } :where(html.page-reconhecimentos) .theme-toggle .icon{ position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 0.95rem; opacity: 0.82; transition: color 0.2s ease, opacity 0.2s ease; } :where(html.page-reconhecimentos) .theme-toggle .thumb{ position: absolute; top: 4px; left: 4px; width: 38px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 12px 22px rgba(5, 107, 246, 0.24); transition: left 0.22s ease, right 0.22s ease; } :where(html.page-reconhecimentos) .theme-toggle.mode-dark .thumb{ left: calc(100% - 42px); } :where(html.page-reconhecimentos) .theme-toggle.mode-light .icon-sun, :where(html.page-reconhecimentos) .theme-toggle.mode-dark .icon-moon{ color: #fff; opacity: 1; } :where(html.page-reconhecimentos) .btn{ display: none; cursor: pointer; } :where(html.page-reconhecimentos) .btn span{ display: block; width: 28px; height: 3px; margin: 5px 0; border-radius: 999px; background: var(--text); } :where(html.page-reconhecimentos) .page-shell{ width: min(1180px, calc(100% - 24px)); margin: 20px auto 48px; } :where(html.page-reconhecimentos) .hero{ position: relative; overflow: hidden; border-radius: 32px; padding: 42px 34px; margin-bottom: 24px; background: linear-gradient(135deg, rgba(5, 107, 246, 0.96), rgba(27, 199, 251, 0.9)); color: #fff; box-shadow: 0 30px 80px rgba(5, 107, 246, 0.26); } :where(html.page-reconhecimentos) .hero::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.18), transparent 24%), radial-gradient(circle at 82% 10%, rgba(255,255,255,0.12), transparent 24%); pointer-events: none; } :where(html.page-reconhecimentos) .hero > *{ position: relative; z-index: 1; } @keyframes reconhecimentos-navFloatIn { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes reconhecimentos-heroLiftIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.988); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes reconhecimentos-riseIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } :where(html.page-reconhecimentos) .eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.2); font-size: 0.95rem; font-weight: 700; margin-bottom: 18px; } :where(html.page-reconhecimentos) .hero h1{ font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; margin-bottom: 16px; letter-spacing: -0.04em; max-width: 860px; } :where(html.page-reconhecimentos) .hero p{ font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.94); max-width: 760px; } :where(html.page-reconhecimentos) .hero-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } :where(html.page-reconhecimentos) .hero-stat{ padding: 18px; border-radius: 22px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); } :where(html.page-reconhecimentos) .hero-stat strong{ display: block; font-size: 1.7rem; margin-bottom: 6px; } :where(html.page-reconhecimentos) .section-card{ border: 1px solid var(--border); border-radius: 28px; padding: 24px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); margin-bottom: 22px; } :where(html.page-reconhecimentos) .section-head{ display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 22px; } :where(html.page-reconhecimentos) .section-head h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.03em; margin-bottom: 8px; } :where(html.page-reconhecimentos) .section-head p{ color: var(--muted); line-height: 1.7; max-width: 760px; } :where(html.page-reconhecimentos) .recognition-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } :where(html.page-reconhecimentos) .recognition-card{ position: relative; overflow: hidden; border-radius: 28px; padding: 26px; background: var(--panel-strong); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } :where(html.page-reconhecimentos) .recognition-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--gold), var(--secondary)); opacity: 0.9; } :where(html.page-reconhecimentos) .recognition-top{ display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 22px; } :where(html.page-reconhecimentos) .recognition-badge{ display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 20px; color: #fff; font-size: 1.3rem; background: linear-gradient(135deg, var(--gold), #f97316); box-shadow: 0 16px 30px rgba(245, 158, 11, 0.28); flex-shrink: 0; } :where(html.page-reconhecimentos) .recognition-meta{ display: flex; flex-direction: column; align-items: end; gap: 8px; } :where(html.page-reconhecimentos) .recognition-year{ padding: 8px 14px; border-radius: 999px; background: rgba(5,107,246,0.08); border: 1px solid rgba(5,107,246,0.12); color: var(--primary); font-weight: 800; } :where(html.page-reconhecimentos) .recognition-company{ color: var(--muted); font-weight: 700; } :where(html.page-reconhecimentos) .recognition-card h3{ font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 8px; } :where(html.page-reconhecimentos) .recognition-subtitle{ color: var(--primary); font-weight: 700; line-height: 1.5; margin-bottom: 16px; } :where(html.page-reconhecimentos) .recognition-description{ color: var(--muted); line-height: 1.75; margin-bottom: 18px; } :where(html.page-reconhecimentos) .recognition-tags{ display: flex; flex-wrap: wrap; gap: 10px; } :where(html.page-reconhecimentos) .recognition-tags span{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(5,107,246,0.08); border: 1px solid rgba(5,107,246,0.12); color: var(--primary); font-weight: 700; font-size: 0.92rem; } :where(html.page-reconhecimentos) .timeline{ display: grid; gap: 16px; } :where(html.page-reconhecimentos) .timeline-item{ display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 22px; background: var(--panel-strong); border: 1px solid var(--border); } :where(html.page-reconhecimentos) .timeline-icon{ width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 1.1rem; box-shadow: 0 14px 26px rgba(5, 107, 246, 0.24); } :where(html.page-reconhecimentos) .timeline-item strong{ display: block; margin-bottom: 6px; font-size: 1.05rem; } :where(html.page-reconhecimentos) .timeline-item p{ color: var(--muted); line-height: 1.65; } :where(html.page-reconhecimentos) .cta-panel{ display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 26px 28px; border-radius: 28px; background: linear-gradient(135deg, rgba(5,107,246,0.1), rgba(27,199,251,0.1)); border: 1px solid rgba(5,107,246,0.14); } :where(html.page-reconhecimentos) .cta-panel h3{ font-size: 1.45rem; margin-bottom: 8px; } :where(html.page-reconhecimentos) .cta-panel p{ color: var(--muted); line-height: 1.65; max-width: 720px; } :where(html.page-reconhecimentos) .cta-links{ display: flex; gap: 12px; flex-wrap: wrap; } :where(html.page-reconhecimentos) .cta-link, :where(html.page-reconhecimentos) .cta-link-secondary{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease; } :where(html.page-reconhecimentos) .cta-link{ color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 16px 34px rgba(5, 107, 246, 0.24); } :where(html.page-reconhecimentos) .cta-link-secondary{ background: var(--panel-strong); border: 1px solid var(--border); } :where(html.page-reconhecimentos) .cta-link:hover, :where(html.page-reconhecimentos) .cta-link-secondary:hover{ transform: translateY(-2px); } :where(html.page-reconhecimentos) footer{ width: min(1180px, calc(100% - 24px)); margin: 0 auto 24px; padding: 18px 0; color: var(--muted); text-align: center; } @media (max-width: 1024px) {:where(html.page-reconhecimentos) .recognition-grid{ grid-template-columns: 1fr; } } @media (max-width: 768px) {:where(html.page-reconhecimentos) .navbar{ width: calc(100% - 20px); border-radius: 24px; padding: 14px 16px; } :where(html.page-reconhecimentos) .btn{ display: block; } :where(html.page-reconhecimentos) .menu{ position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 14px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: 0.2s ease; } :where(html.page-reconhecimentos) .menu.show{ opacity: 1; visibility: visible; transform: translateY(0); } :where(html.page-reconhecimentos) .menu a{ text-align: center; } :where(html.page-reconhecimentos) .nav-actions{ gap: 10px; } :where(html.page-reconhecimentos) .theme-toggle{ width: 88px; height: 42px; padding: 0 12px; } :where(html.page-reconhecimentos) .theme-toggle .thumb{ width: 34px; height: 32px; } :where(html.page-reconhecimentos) .theme-toggle.mode-dark .thumb{ left: calc(100% - 38px); } :where(html.page-reconhecimentos) .page-shell{ width: calc(100% - 20px); } :where(html.page-reconhecimentos) .hero, :where(html.page-reconhecimentos) .section-card{ border-radius: 24px; padding: 22px 18px; } :where(html.page-reconhecimentos) .hero-stats{ grid-template-columns: 1fr; } :where(html.page-reconhecimentos) .recognition-top{ flex-direction: column; align-items: start; } :where(html.page-reconhecimentos) .recognition-meta{ align-items: start; } } @media (max-width: 480px) {:where(html.page-reconhecimentos) .hero h1{ font-size: 2rem; } :where(html.page-reconhecimentos) .hero p, :where(html.page-reconhecimentos) .section-head p, :where(html.page-reconhecimentos) .recognition-description, :where(html.page-reconhecimentos) .timeline-item p, :where(html.page-reconhecimentos) .cta-panel p{ font-size: 0.94rem; } :where(html.page-reconhecimentos) .timeline-item{ grid-template-columns: 1fr; } :where(html.page-reconhecimentos) .cta-links{ width: 100%; } :where(html.page-reconhecimentos) .cta-link, :where(html.page-reconhecimentos) .cta-link-secondary{ width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) {:where(html.page-reconhecimentos) .reveal, :where(html.page-reconhecimentos) .reveal.is-visible, :where(html.page-reconhecimentos) body.page-intro-ready .navbar, :where(html.page-reconhecimentos) body.page-intro-ready .hero, :where(html.page-reconhecimentos) body.page-intro-ready .hero-stat{ animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }

:where(html.page-obrigado){ --bg: #f4f8ff; --panel: rgba(255, 255, 255, 0.78); --panel-strong: rgba(255, 255, 255, 0.92); --border: rgba(148, 163, 184, 0.2); --text: #0f172a; --muted: #475569; --primary: #056bf6; --secondary: #1bc7fb; --success: #22c55e; --shadow: 0 30px 70px rgba(15, 23, 42, 0.12); } :where(html.page-obrigado.dark){ --bg: #020202; --panel: rgba(4, 8, 14, 0.94); --panel-strong: rgba(4, 8, 14, 0.94); --border: rgba(96, 165, 250, 0.09); --text: #e5eefc; --muted: #cbd5e1; --shadow: 0 30px 70px rgba(0, 2, 6, 0.6); } :where(html.page-obrigado) *{ box-sizing: border-box; margin: 0; padding: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } :where(html.page-obrigado) body{ min-height: 100vh; color: var(--text); background: radial-gradient(circle at top left, rgba(27, 199, 251, 0.22), transparent 30%), radial-gradient(circle at top right, rgba(5, 107, 246, 0.18), transparent 26%), linear-gradient(180deg, rgba(5, 107, 246, 0.04), transparent 18%), var(--bg); overflow-x: hidden; } :where(html.page-obrigado.dark) body{ background: #020202; } :where(html.page-obrigado) .reveal{ opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } :where(html.page-obrigado) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } :where(html.page-obrigado) .hero-copy.reveal{ transform: translate3d(-18px, 28px, 0) scale(0.985); } :where(html.page-obrigado) .hero-side.reveal, :where(html.page-obrigado) .step-card.reveal, :where(html.page-obrigado) .cta-panel.reveal{ transform: translate3d(18px, 24px, 0) scale(0.99); } :where(html.page-obrigado) a{ color: inherit; text-decoration: none; } :where(html.page-obrigado) .navbar{ position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1180px, calc(100% - 24px)); margin: 16px auto 0; padding: 14px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-obrigado) .logo{ background: url(../img/logo.png) no-repeat 50% 50%; background-size: contain; width: 130px; height: 64px; flex-shrink: 0; } :where(html.page-obrigado) .menu{ display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } :where(html.page-obrigado) .menu a{ padding: 10px 14px; border-radius: 999px; color: var(--text); font-weight: 700; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } :where(html.page-obrigado) .menu a:hover, :where(html.page-obrigado) .menu a.is-active{ background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; transform: translateY(-1px); } :where(html.page-obrigado) .nav-actions{ display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } :where(html.page-obrigado) .theme-toggle{ position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 96px; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-strong); color: var(--text); cursor: pointer; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } :where(html.page-obrigado) .theme-toggle:hover{ transform: translateY(-1px); border-color: rgba(5, 107, 246, 0.28); } :where(html.page-obrigado) .theme-toggle .icon{ position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 0.95rem; opacity: 0.82; transition: color 0.2s ease, opacity 0.2s ease; } :where(html.page-obrigado) .theme-toggle .thumb{ position: absolute; top: 4px; left: 4px; width: 38px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 12px 22px rgba(5, 107, 246, 0.24); transition: left 0.22s ease, right 0.22s ease; } :where(html.page-obrigado) .theme-toggle.mode-dark .thumb{ left: calc(100% - 42px); } :where(html.page-obrigado) .theme-toggle.mode-light .icon-sun, :where(html.page-obrigado) .theme-toggle.mode-dark .icon-moon{ color: #fff; opacity: 1; } :where(html.page-obrigado) .btn{ display: none; cursor: pointer; } :where(html.page-obrigado) .btn span{ display: block; width: 28px; height: 3px; margin: 5px 0; border-radius: 999px; background: var(--text); } :where(html.page-obrigado) .page-shell{ width: min(1180px, calc(100% - 24px)); margin: 20px auto 48px; } :where(html.page-obrigado) .hero{ display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 28px; align-items: stretch; margin-bottom: 24px; } :where(html.page-obrigado) .hero-copy, :where(html.page-obrigado) .hero-side{ position: relative; overflow: hidden; border-radius: 32px; border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-obrigado) .hero-copy{ padding: 38px; background: linear-gradient(135deg, rgba(5, 107, 246, 0.92), rgba(27, 199, 251, 0.88)); color: #fff; } :where(html.page-obrigado) .hero-copy::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 24%), radial-gradient(circle at 80% 0%, rgba(255,255,255,0.12), transparent 24%); pointer-events: none; } :where(html.page-obrigado) .hero-copy > *{ position: relative; z-index: 1; } :where(html.page-obrigado) body.page-intro-ready .navbar{ animation: obrigado-navFloatIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } :where(html.page-obrigado) body.page-intro-ready .hero-copy{ animation: obrigado-heroLeftIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; } :where(html.page-obrigado) body.page-intro-ready .hero-side{ animation: obrigado-heroRightIn 1s cubic-bezier(0.22, 1, 0.36, 1) both 0.08s; } :where(html.page-obrigado) body.page-intro-ready .hero-note{ animation: obrigado-riseIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--intro-delay, 0ms); } @keyframes obrigado-navFloatIn { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes obrigado-heroLeftIn { from { opacity: 0; transform: translate3d(-28px, 34px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes obrigado-heroRightIn { from { opacity: 0; transform: translate3d(28px, 34px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes obrigado-riseIn { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } :where(html.page-obrigado) .eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.2); font-size: 0.95rem; font-weight: 700; margin-bottom: 18px; } :where(html.page-obrigado) .hero-title{ font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; margin-bottom: 18px; letter-spacing: -0.04em; } :where(html.page-obrigado) .hero-description{ font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.94); margin-bottom: 24px; max-width: 640px; } :where(html.page-obrigado) .hero-notes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } :where(html.page-obrigado) .hero-note{ padding: 16px; border-radius: 20px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16); } :where(html.page-obrigado) .hero-note strong{ display: block; font-size: 1rem; margin-bottom: 6px; } :where(html.page-obrigado) .hero-note span{ display: block; line-height: 1.55; color: rgba(255,255,255,0.9); font-size: 0.94rem; } :where(html.page-obrigado) .hero-side{ padding: 28px; background: var(--panel); } :where(html.page-obrigado) .hero-side::before{ content: ""; position: absolute; inset: auto -60px -80px auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(27,199,251,0.16), transparent 65%); pointer-events: none; } :where(html.page-obrigado) .status-card{ position: relative; z-index: 1; padding: 24px; border-radius: 28px; background: var(--panel-strong); border: 1px solid var(--border); } :where(html.page-obrigado) .status-icon{ width: 72px; height: 72px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 22px; color: #fff; font-size: 1.7rem; background: linear-gradient(135deg, var(--success), #4ade80); box-shadow: 0 18px 36px rgba(34, 197, 94, 0.28); } :where(html.page-obrigado) .status-card h2{ font-size: clamp(1.6rem, 2.5vw, 2.2rem); letter-spacing: -0.03em; margin-bottom: 10px; } :where(html.page-obrigado) .status-card p{ color: var(--muted); line-height: 1.65; margin-bottom: 18px; } :where(html.page-obrigado) .status-list{ display: grid; gap: 12px; } :where(html.page-obrigado) .status-list span{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.14); color: var(--muted); font-weight: 600; } :where(html.page-obrigado) .content-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } :where(html.page-obrigado) .step-card, :where(html.page-obrigado) .cta-panel{ background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :where(html.page-obrigado) .step-card{ padding: 26px; } :where(html.page-obrigado) .step-number{ display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 1.2rem; font-weight: 800; margin-bottom: 18px; box-shadow: 0 14px 28px rgba(5, 107, 246, 0.24); } :where(html.page-obrigado) .step-card h3{ font-size: 1.25rem; margin-bottom: 10px; } :where(html.page-obrigado) .step-card p{ color: var(--muted); line-height: 1.65; } :where(html.page-obrigado) .cta-panel{ margin-top: 24px; padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } :where(html.page-obrigado) .cta-copy h3{ font-size: 1.5rem; margin-bottom: 10px; letter-spacing: -0.02em; } :where(html.page-obrigado) .cta-copy p{ color: var(--muted); line-height: 1.65; max-width: 640px; } :where(html.page-obrigado) .cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; } :where(html.page-obrigado) .btn-primary, :where(html.page-obrigado) .btn-secondary{ display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 999px; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } :where(html.page-obrigado) .btn-primary{ color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 16px 35px rgba(5, 107, 246, 0.28); } :where(html.page-obrigado) .btn-primary:hover, :where(html.page-obrigado) .btn-secondary:hover{ transform: translateY(-2px); } :where(html.page-obrigado) .btn-secondary{ color: var(--text); background: var(--panel-strong); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } :where(html.page-obrigado) footer{ width: min(1180px, calc(100% - 24px)); margin: 0 auto 24px; padding: 18px 0; color: var(--muted); text-align: center; } @media (max-width: 1024px) {:where(html.page-obrigado) .hero, :where(html.page-obrigado) .content-grid{ grid-template-columns: 1fr; } } @media (max-width: 768px) {:where(html.page-obrigado) .navbar{ width: calc(100% - 20px); border-radius: 24px; padding: 14px 16px; } :where(html.page-obrigado) .btn{ display: block; } :where(html.page-obrigado) .menu{ position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 14px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: 0.2s ease; } :where(html.page-obrigado) .menu.show{ opacity: 1; visibility: visible; transform: translateY(0); } :where(html.page-obrigado) .menu a{ text-align: center; } :where(html.page-obrigado) .page-shell{ width: calc(100% - 20px); margin-top: 16px; } :where(html.page-obrigado) .nav-actions{ gap: 10px; } :where(html.page-obrigado) .theme-toggle{ width: 88px; height: 42px; padding: 0 12px; } :where(html.page-obrigado) .theme-toggle .thumb{ width: 34px; height: 32px; } :where(html.page-obrigado) .theme-toggle.mode-dark .thumb{ left: calc(100% - 38px); } :where(html.page-obrigado) .hero-copy, :where(html.page-obrigado) .hero-side, :where(html.page-obrigado) .step-card, :where(html.page-obrigado) .cta-panel{ border-radius: 24px; padding: 22px 18px; } :where(html.page-obrigado) .hero-notes{ grid-template-columns: 1fr; } } @media (max-width: 480px) {:where(html.page-obrigado) .hero-title{ font-size: 2rem; } :where(html.page-obrigado) .hero-description, :where(html.page-obrigado) .hero-note span, :where(html.page-obrigado) .status-card p, :where(html.page-obrigado) .step-card p, :where(html.page-obrigado) .cta-copy p{ font-size: 0.94rem; } :where(html.page-obrigado) .cta-actions{ width: 100%; } :where(html.page-obrigado) .btn-primary, :where(html.page-obrigado) .btn-secondary{ justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) {:where(html.page-obrigado) .reveal, :where(html.page-obrigado) .reveal.is-visible, :where(html.page-obrigado) body.page-intro-ready .navbar, :where(html.page-obrigado) body.page-intro-ready .hero-copy, :where(html.page-obrigado) body.page-intro-ready .hero-side, :where(html.page-obrigado) body.page-intro-ready .hero-note{ animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } :where(html.page-links){ --brand1: #056bf6; --brand2: #1bc7fb; --brand3: #7dd3fc; --bg: #eff5ff; --bg-soft: rgba(255, 255, 255, 0.72); --panel: rgba(255, 255, 255, 0.78); --panel-strong: rgba(255, 255, 255, 0.94); --text: #0f172a; --muted: #475569; --line: rgba(148, 163, 184, 0.22); --shadow: 0 24px 60px rgba(15, 23, 42, 0.12); --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08); } :where(html.page-links.dark){ --bg: #020202; --bg-soft: rgba(4, 8, 14, 0.94); --panel: rgba(4, 8, 14, 0.94); --panel-strong: rgba(4, 8, 14, 0.94); --text: #e5eefc; --muted: #cbd5e1; --line: rgba(96, 165, 250, 0.09); --shadow: 0 30px 70px rgba(0, 2, 6, 0.6); --shadow-soft: 0 16px 34px rgba(0, 2, 6, 0.48); } :where(html.page-links), :where(html.page-links) body{ min-height: 100%; } :where(html.page-links) body{ position: relative; margin: 0; isolation: isolate; background: radial-gradient(circle at 16% 14%, rgba(5, 107, 246, 0.16), transparent 24%), radial-gradient(circle at 84% 16%, rgba(27, 199, 251, 0.16), transparent 22%), linear-gradient(180deg, #f8fbff 0%, #eef5ff 34%, var(--bg) 100%); color: var(--text); overflow-x: hidden; } :where(html.page-links.dark) body{ background-color: #020202; background: #020202; } :where(html.page-links) .reveal{ opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } :where(html.page-links) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } :where(html.page-links) .hero.reveal{ transform: translate3d(0, 28px, 0) scale(0.988); } :where(html.page-links) .section.reveal, :where(html.page-links) .mini-banner.reveal{ transform: translate3d(0, 24px, 0) scale(0.99); } :where(html.page-links) .link-card.reveal{ transform: translate3d(0, 20px, 0) scale(0.99); } :where(html.page-links) body.page-intro-ready .hero{ animation: links-heroLiftIn 0.68s cubic-bezier(0.22, 1, 0.36, 1) both; } :where(html.page-links) body.page-intro-ready .hero .profile{ animation: links-heroProfileIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) both 0.05s; } :where(html.page-links) body.page-intro-ready .hero .stat, :where(html.page-links) body.page-intro-ready .hero .hero-btn{ animation: links-riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--intro-delay, 0ms); } :where(html.page-links) .decor{ position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } :where(html.page-links) .decor::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 28%, rgba(0, 0, 0, 0.7), transparent 78%); opacity: 0.46; } :where(html.page-links) .decor::after{ content: ""; position: absolute; inset: -8%; background: radial-gradient(circle at 50% 18%, rgba(125, 211, 252, 0.18), transparent 16%), radial-gradient(circle at 50% 28%, rgba(5, 107, 246, 0.18), transparent 24%), radial-gradient(circle at 22% 66%, rgba(27, 199, 251, 0.1), transparent 24%), radial-gradient(circle at 80% 68%, rgba(99, 102, 241, 0.1), transparent 22%); filter: blur(22px); opacity: 0.95; animation: links-coreShift 20s ease-in-out infinite alternate; } :where(html.page-links.dark) .decor::before{ opacity: 0; } :where(html.page-links.dark) .decor::after{ opacity: 0; } :where(html.page-links) .mesh{ position: absolute; inset: 0; opacity: 0.38; background: linear-gradient(115deg, transparent 18%, rgba(125, 211, 252, 0.08) 42%, transparent 64%), linear-gradient(245deg, transparent 18%, rgba(5, 107, 246, 0.08) 42%, transparent 64%); mask-image: radial-gradient(circle at 50% 26%, rgba(0, 0, 0, 0.9), transparent 80%); animation: links-meshSweep 18s linear infinite; } :where(html.page-links.dark) .mesh, :where(html.page-links.dark) .beam, :where(html.page-links.dark) .halo, :where(html.page-links.dark) .aurora, :where(html.page-links.dark) .blob{ opacity: 0; } :where(html.page-links) .beam{ position: absolute; width: 56vw; height: 180px; border-radius: 999px; filter: blur(32px); opacity: 0.26; transform-origin: center; mix-blend-mode: screen; } :where(html.page-links) .beam.b1{ top: 4%; left: -10%; background: linear-gradient(90deg, rgba(5, 107, 246, 0), rgba(5, 107, 246, 0.28), rgba(125, 211, 252, 0.08), rgba(5, 107, 246, 0)); transform: rotate(-18deg); animation: links-beamSweepOne 22s ease-in-out infinite; } :where(html.page-links) .beam.b2{ top: 10%; right: -14%; background: linear-gradient(90deg, rgba(27, 199, 251, 0), rgba(27, 199, 251, 0.24), rgba(139, 92, 246, 0.08), rgba(27, 199, 251, 0)); transform: rotate(18deg); animation: links-beamSweepTwo 26s ease-in-out infinite; } :where(html.page-links.dark) .beam{ opacity: 0.14; } :where(html.page-links.dark) .beam.b1{ background: linear-gradient(90deg, rgba(29, 78, 216, 0), rgba(29, 78, 216, 0.18), rgba(96, 165, 250, 0.04), rgba(29, 78, 216, 0)); } :where(html.page-links.dark) .beam.b2{ background: linear-gradient(90deg, rgba(30, 64, 175, 0), rgba(30, 64, 175, 0.14), rgba(59, 130, 246, 0.03), rgba(30, 64, 175, 0)); } :where(html.page-links) .halo{ position: absolute; left: 50%; top: 22%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(125, 211, 252, 0.18); box-shadow: inset 0 0 40px rgba(125, 211, 252, 0.04); } :where(html.page-links) .halo.h1{ width: min(72vw, 720px); height: min(72vw, 720px); animation: links-haloPulse 16s ease-in-out infinite; } :where(html.page-links) .halo.h2{ width: min(52vw, 520px); height: min(52vw, 520px); border-color: rgba(5, 107, 246, 0.14); animation: links-haloPulse 12s ease-in-out infinite reverse; } :where(html.page-links.dark) .halo.h1{ border-color: rgba(96, 165, 250, 0.06); box-shadow: inset 0 0 40px rgba(37, 99, 235, 0.02); } :where(html.page-links.dark) .halo.h2{ border-color: rgba(37, 99, 235, 0.07); } :where(html.page-links) .aurora{ position: absolute; inset: auto; border-radius: 999px; opacity: 0.5; mix-blend-mode: screen; pointer-events: none; filter: blur(30px); } :where(html.page-links) .aurora.a1{ top: 24%; left: 18%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(5, 107, 246, 0.2), rgba(5, 107, 246, 0.02) 64%, transparent 74%); animation: links-auroraFloatOne 18s ease-in-out infinite; } :where(html.page-links) .aurora.a2{ top: 18%; right: 18%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(27, 199, 251, 0.18), rgba(27, 199, 251, 0.02) 64%, transparent 74%); animation: links-auroraFloatTwo 20s ease-in-out infinite; } :where(html.page-links) .orbit{ position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); opacity: 0.24; animation: links-orbitDrift 28s linear infinite; } :where(html.page-links) .orbit.o1{ width: min(86vw, 860px); height: min(86vw, 860px); top: -20%; left: 50%; transform: translateX(-50%); } :where(html.page-links) .orbit.o2{ width: min(62vw, 620px); height: min(62vw, 620px); top: 1%; left: 50%; transform: translateX(-50%); animation-direction: reverse; animation-duration: 34s; } :where(html.page-links.dark) .orbit{ border-color: rgba(148, 163, 184, 0.12); opacity: 0.34; } :where(html.page-links.dark) .aurora.a1{ background: radial-gradient(circle, rgba(29, 78, 216, 0.12), rgba(29, 78, 216, 0.015) 66%, transparent 76%); opacity: 0.28; filter: blur(62px); } :where(html.page-links.dark) .aurora.a2{ background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.012) 66%, transparent 76%); opacity: 0.24; filter: blur(66px); } :where(html.page-links.dark) .blob.b1{ background: radial-gradient(circle, rgba(29, 78, 216, 0.16), rgba(29, 78, 216, 0.02) 68%, transparent 78%); opacity: 0.14; filter: blur(142px); } :where(html.page-links.dark) .blob.b2{ background: radial-gradient(circle, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.018) 68%, transparent 80%); opacity: 0.12; filter: blur(140px); } :where(html.page-links.dark) .blob.b3{ background: radial-gradient(circle, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.015) 70%, transparent 82%); opacity: 0.1; filter: blur(150px); } :where(html.page-links) .blob{ position: absolute; border-radius: 999px; filter: blur(90px); opacity: 0.45; animation: links-float 14s ease-in-out infinite; } :where(html.page-links) .blob.b1{ top: -60px; left: -40px; width: 320px; height: 320px; background: rgba(5, 107, 246, 0.24); } :where(html.page-links) .blob.b2{ top: 54%; right: -70px; width: 260px; height: 260px; background: rgba(27, 199, 251, 0.18); animation-delay: 3s; } :where(html.page-links) .blob.b3{ bottom: -80px; left: 50%; width: 360px; height: 200px; transform: translateX(-50%); background: rgba(125, 211, 252, 0.16); animation-delay: 6s; } :where(html.page-links) .page{ position: relative; z-index: 1; width: min(100%, 760px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom) + 12px); } :where(html.page-links) .shell{ display: grid; gap: 16px; } :where(html.page-links) .surface{ position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: var(--shadow); } :where(html.page-links) .surface::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 38%); pointer-events: none; } :where(html.page-links.dark) .surface::before{ background: linear-gradient(135deg, rgba(96, 165, 250, 0.04), transparent 42%); } :where(html.page-links) .hero{ padding: 18px; } :where(html.page-links) .hero-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } :where(html.page-links) .eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(5, 107, 246, 0.1); border: 1px solid rgba(5, 107, 246, 0.14); color: var(--brand1); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; } :where(html.page-links.dark) .eyebrow{ color: #7dd3fc; background: rgba(5, 107, 246, 0.14); border-color: rgba(56, 189, 248, 0.18); } :where(html.page-links) .toggle{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; isolation: isolate; overflow: hidden; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); cursor: pointer; box-shadow: var(--shadow-soft); transition: border-color 0.24s ease, background-color 0.24s ease, color 0.24s ease; } :where(html.page-links) .toggle::before, :where(html.page-links) .hero-btn::before, :where(html.page-links) .mini-banner a::before{ content: ""; position: absolute; inset: -18% auto -18% -42%; width: 42%; pointer-events: none; opacity: 0; transform: translate3d(-130%, 0, 0) rotate(16deg); background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0.12) 66%, transparent 100%); transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; z-index: 0; } :where(html.page-links.dark) .toggle::before, :where(html.page-links.dark) .hero-btn::before, :where(html.page-links.dark) .mini-banner a::before{ background: linear-gradient(90deg, transparent 0%, rgba(125, 211, 252, 0.08) 34%, rgba(191, 219, 254, 0.24) 50%, rgba(125, 211, 252, 0.08) 66%, transparent 100%); } :where(html.page-links) .toggle > *, :where(html.page-links) .hero-btn > *, :where(html.page-links) .mini-banner a > *{ position: relative; z-index: 1; } :where(html.page-links) .toggle:hover{ border-color: rgba(5, 107, 246, 0.16); background: rgba(255, 255, 255, 0.78); } :where(html.page-links) .toggle:hover::before, :where(html.page-links) .hero-btn:hover::before, :where(html.page-links) .mini-banner a:hover::before{ opacity: 1; transform: translate3d(420%, 0, 0) rotate(16deg); } :where(html.page-links.dark) .toggle:hover{ background: rgba(4, 8, 14, 0.98); } :where(html.page-links) .hero-main{ display: grid; gap: 16px; } :where(html.page-links) .profile{ display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; } :where(html.page-links) .avatar-wrap{ position: relative; width: 88px; height: 88px; padding: 3px; border-radius: 28px; background: linear-gradient(135deg, var(--brand1), var(--brand2), #8b5cf6); box-shadow: 0 18px 32px rgba(5, 107, 246, 0.22); } :where(html.page-links) .avatar{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 25px; background: #cbd5e1; } :where(html.page-links) .profile-copy{ min-width: 0; } :where(html.page-links) .name{ margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } :where(html.page-links) .role{ margin-top: 6px; color: var(--muted); font-size: 0.98rem; font-weight: 600; } :where(html.page-links) .lead{ margin: 0; padding: 0; color: var(--muted); text-align: left; line-height: 1.65; font-size: 0.98rem; text-wrap: pretty; } :where(html.page-links) .stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } :where(html.page-links) .stat{ padding: 12px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--line); box-shadow: var(--shadow-soft); text-align: left; } :where(html.page-links) .stat strong{ display: block; margin-bottom: 4px; color: var(--text); font-size: 1rem; } :where(html.page-links) .stat span{ color: var(--muted); font-size: 0.82rem; line-height: 1.4; } :where(html.page-links) .hero-actions{ display: grid; grid-template-columns: 1fr; gap: 10px; } :where(html.page-links) .hero-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; isolation: isolate; overflow: hidden; min-height: 52px; padding: 0 18px; border-radius: 18px; text-decoration: none; font-weight: 700; border: 1px solid transparent; transition: border-color 0.24s ease, background 0.24s ease, color 0.24s ease; } :where(html.page-links) .hero-btn:hover{ border-color: rgba(5, 107, 246, 0.12); } :where(html.page-links) .hero-btn.primary{ background: linear-gradient(135deg, var(--brand1), var(--brand2)); color: #ffffff; box-shadow: 0 16px 32px rgba(5, 107, 246, 0.28); } :where(html.page-links) .hero-btn.secondary{ background: var(--bg-soft); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-soft); } :where(html.page-links) .hero-btn.whatsapp{ background: linear-gradient(135deg, #16a34a, #22c55e); color: #ffffff; box-shadow: 0 16px 32px rgba(34, 197, 94, 0.24); } :where(html.page-links) .section{ padding: 18px; } :where(html.page-links) .section-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } :where(html.page-links) .section-head h2{ margin: 0; color: var(--text); font-size: 1.1rem; font-weight: 800; } :where(html.page-links) .section-head p{ margin: 6px 0 0; padding: 0; color: var(--muted); font-size: 0.92rem; text-align: left; line-height: 1.55; text-wrap: pretty; } :where(html.page-links) .section-badge{ flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 14px; color: #ffffff; background: linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow: 0 14px 28px rgba(5, 107, 246, 0.22); } :where(html.page-links) .card-grid{ display: grid; gap: 12px; } :where(html.page-links) .link-card{ position: relative; display: grid; grid-template-columns: 48px 1fr 18px; gap: 12px; align-items: center; padding: 14px; border-radius: 22px; text-decoration: none; color: var(--text); background: var(--panel-strong); border: 1px solid var(--line); box-shadow: var(--shadow-soft); transition: border-color 0.24s ease, background-color 0.24s ease, color 0.24s ease; } :where(html.page-links) .link-card:hover{ border-color: rgba(5, 107, 246, 0.16); background: rgba(255, 255, 255, 0.97); } :where(html.page-links.dark) .link-card:hover{ background: rgba(5, 10, 18, 0.98); } :where(html.page-links) .link-card.featured{ background: linear-gradient(135deg, rgba(5, 107, 246, 0.12), rgba(27, 199, 251, 0.12)), var(--panel-strong); border-color: rgba(5, 107, 246, 0.16); } :where(html.page-links.dark) .link-card.featured{ background: linear-gradient(135deg, rgba(29, 78, 216, 0.12), rgba(37, 99, 235, 0.04)), var(--panel-strong); border-color: rgba(59, 130, 246, 0.14); } :where(html.page-links) .card-icon{ width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #ffffff; background: linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow: 0 12px 24px rgba(5, 107, 246, 0.22); font-size: 1rem; } :where(html.page-links) .link-card.github .card-icon{ background: linear-gradient(135deg, #111827, #374151); } :where(html.page-links) .link-card.linkedin .card-icon{ background: linear-gradient(135deg, #0077b5, #1498d5); } :where(html.page-links) .link-card.instagram .card-icon{ background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); } :where(html.page-links) .link-card.behance .card-icon{ background: linear-gradient(135deg, #1769ff, #4f7bff); } :where(html.page-links) .link-card.fivehundredpx .card-icon{ background: linear-gradient(135deg, #0099e5, #00b5f6); } :where(html.page-links) .link-card.artstation .card-icon{ background: linear-gradient(135deg, #13aff0, #1cc8ff); } :where(html.page-links) .link-card.hackaday .card-icon{ background: linear-gradient(135deg, #ff6600, #ff8a3d); } :where(html.page-links) .link-card.workana .card-icon{ background: linear-gradient(135deg, #7c3aed, #a855f7); } :where(html.page-links) .card-body{ min-width: 0; } :where(html.page-links) .card-body strong{ display: block; color: var(--text); font-size: 0.98rem; line-height: 1.3; } :where(html.page-links) .card-body span{ display: block; margin-top: 4px; color: var(--muted); font-size: 0.85rem; line-height: 1.5; } :where(html.page-links) .card-arrow{ color: #94a3b8; font-size: 0.95rem; transition: color 0.24s ease; } :where(html.page-links) .link-card:hover .card-arrow{ color: var(--brand1); } :where(html.page-links) .mini-banner{ padding: 18px; display: grid; gap: 12px; background: radial-gradient(circle at top right, rgba(27, 199, 251, 0.18), transparent 30%), linear-gradient(135deg, rgba(5, 107, 246, 0.95), rgba(27, 199, 251, 0.88)); color: #ffffff; } :where(html.page-links.dark) .mini-banner{ background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 28%), linear-gradient(135deg, rgba(6, 10, 18, 0.96), rgba(10, 18, 30, 0.94)); border: 1px solid rgba(59, 130, 246, 0.12); box-shadow: 0 18px 36px rgba(1, 3, 8, 0.52); } :where(html.page-links.dark) .mini-banner a{ background: rgba(255, 255, 255, 0.08); border-color: rgba(148, 163, 184, 0.14); } :where(html.page-links) .mini-banner strong{ font-size: 1.05rem; line-height: 1.4; color: #ffffff; } :where(html.page-links) .mini-banner p{ margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.6; text-align: left; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; } :where(html.page-links) .mini-banner a{ width: fit-content; display: inline-flex; align-items: center; gap: 8px; position: relative; isolation: isolate; overflow: hidden; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); color: #ffffff; text-decoration: none; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.22); transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease; } :where(html.page-links) .mini-banner a:hover{ background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.2); } :where(html.page-links) .footer-note{ padding: 14px 4px 6px; display: flex; justify-content: center; } @keyframes links-heroLiftIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.988); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes links-heroProfileIn { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes links-riseIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes links-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12px, -18px, 0) scale(1.04); } } @keyframes links-coreShift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(0, -2%, 0) scale(1.04); } } @keyframes links-meshSweep { 0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); } 50% { transform: translate3d(2%, 2%, 0) scale(1.04); } } @keyframes links-beamSweepOne { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); } 50% { transform: translate3d(6%, 2%, 0) rotate(-14deg); } } @keyframes links-beamSweepTwo { 0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg); } 50% { transform: translate3d(-6%, 3%, 0) rotate(13deg); } } @keyframes links-haloPulse { 0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.54; transform: translate(-50%, -50%) scale(1.035); } } @keyframes links-auroraFloatOne { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14px, -10px, 0) scale(1.04); } } @keyframes links-auroraFloatTwo { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-12px, 10px, 0) scale(1.05); } } @keyframes links-orbitDrift { 0% { transform: translateX(-50%) rotate(0deg) scale(1); } 50% { transform: translateX(-50%) rotate(180deg) scale(1.03); } 100% { transform: translateX(-50%) rotate(360deg) scale(1); } } @media (min-width: 640px) {:where(html.page-links) .page{ padding-left: 20px; padding-right: 20px; } :where(html.page-links) .hero{ padding: 22px; } :where(html.page-links) .hero-actions{ grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(html.page-links) .card-grid.two-col{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) {:where(html.page-links) .hero-main{ gap: 18px; } :where(html.page-links) .profile{ grid-template-columns: 104px 1fr; gap: 18px; } :where(html.page-links) .avatar-wrap{ width: 104px; height: 104px; } :where(html.page-links) .section{ padding: 20px; } } @media (max-width: 767px) {:where(html.page-links) body{ background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 34%, var(--bg) 100%); } :where(html.page-links.dark) body{ background: #020202; } :where(html.page-links) .decor, :where(html.page-links) .mesh, :where(html.page-links) .beam, :where(html.page-links) .halo, :where(html.page-links) .aurora, :where(html.page-links) .orbit, :where(html.page-links) .blob{ display: none !important; } :where(html.page-links) .surface{ backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-soft); } :where(html.page-links) .surface::before{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%); } :where(html.page-links.dark) .surface::before{ background: linear-gradient(135deg, rgba(96, 165, 250, 0.02), transparent 44%); } :where(html.page-links) .reveal{ opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.24s ease-out, transform 0.24s ease-out; transition-delay: 0ms; will-change: auto; } :where(html.page-links) .reveal.is-visible{ opacity: 1; transform: translate3d(0, 0, 0); } :where(html.page-links) .hero.reveal, :where(html.page-links) .section.reveal, :where(html.page-links) .mini-banner.reveal, :where(html.page-links) .link-card.reveal{ transform: translate3d(0, 8px, 0); } :where(html.page-links) body.page-intro-ready .hero, :where(html.page-links) body.page-intro-ready .hero .profile, :where(html.page-links) body.page-intro-ready .hero .stat, :where(html.page-links) body.page-intro-ready .hero .hero-btn{ animation: none; } } @media (max-width: 420px) {:where(html.page-links) .page{ padding-left: 12px; padding-right: 12px; } :where(html.page-links) .hero, :where(html.page-links) .section, :where(html.page-links) .mini-banner{ padding: 16px; border-radius: 24px; } :where(html.page-links) .profile{ grid-template-columns: 78px 1fr; } :where(html.page-links) .avatar-wrap{ width: 78px; height: 78px; border-radius: 24px; } :where(html.page-links) .avatar{ border-radius: 21px; } :where(html.page-links) .stats{ grid-template-columns: 1fr; } :where(html.page-links) .link-card{ grid-template-columns: 44px 1fr 16px; padding: 13px; } :where(html.page-links) .card-icon{ width: 44px; height: 44px; border-radius: 14px; } } @media (prefers-reduced-motion: reduce) {:where(html.page-links) .reveal, :where(html.page-links) .reveal.is-visible, :where(html.page-links) body.page-intro-ready .hero, :where(html.page-links) body.page-intro-ready .hero .profile, :where(html.page-links) body.page-intro-ready .hero .stat, :where(html.page-links) body.page-intro-ready .hero .hero-btn, :where(html.page-links) .blob, :where(html.page-links) .decor::after, :where(html.page-links) .mesh, :where(html.page-links) .beam, :where(html.page-links) .halo, :where(html.page-links) .aurora, :where(html.page-links) .orbit, :where(html.page-links) .eyebrow i, :where(html.page-links) .toggle, :where(html.page-links) .toggle i, :where(html.page-links) .toggle::before, :where(html.page-links) .hero-btn, :where(html.page-links) .hero-btn i, :where(html.page-links) .hero-btn::before, :where(html.page-links) .section-badge, :where(html.page-links) .link-card, :where(html.page-links) .card-icon, :where(html.page-links) .mini-banner a, :where(html.page-links) .mini-banner a::before, :where(html.page-links) .mini-banner a i, :where(html.page-links) .card-arrow{ animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }


/* Ajustes leves de entrada e interação para links.html */
:where(html.page-links) .surface.reveal {
  transform: translate3d(0, 18px, 0) scale(0.992);
  transition-duration: 0.44s;
}

:where(html.page-links) .surface.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

:where(html.page-links) .link-card.reveal {
  transform: translate3d(0, 12px, 0) scale(0.994);
  transition-duration: 0.36s;
}

:where(html.page-links) .link-card.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

:where(html.page-links) body.page-intro-ready .hero-top,
:where(html.page-links) body.page-intro-ready .lead,
:where(html.page-links) body.page-intro-ready .section-head,
:where(html.page-links) body.page-intro-ready .mini-banner strong,
:where(html.page-links) body.page-intro-ready .mini-banner p,
:where(html.page-links) body.page-intro-ready .mini-banner a {
  animation: links-softContentIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

:where(html.page-links) body.page-intro-ready .hero-top {
  animation-delay: 40ms;
}

:where(html.page-links) body.page-intro-ready .lead {
  animation-delay: 150ms;
}

:where(html.page-links) body.page-intro-ready .section-head {
  animation-delay: 80ms;
}

:where(html.page-links) body.page-intro-ready .mini-banner strong {
  animation-delay: 80ms;
}

:where(html.page-links) body.page-intro-ready .mini-banner p {
  animation-delay: 140ms;
}

:where(html.page-links) body.page-intro-ready .mini-banner a {
  animation-delay: 200ms;
}

:where(html.page-links) .hero-btn,
:where(html.page-links) .link-card,
:where(html.page-links) .mini-banner a,
:where(html.page-links) .toggle {
  transition-property: transform, border-color, background-color, box-shadow, color;
  transition-duration: 0.22s;
  transition-timing-function: ease;
}

:where(html.page-links) .hero-btn:hover,
:where(html.page-links) .link-card:hover,
:where(html.page-links) .mini-banner a:hover,
:where(html.page-links) .toggle:hover {
  transform: translate3d(0, -2px, 0);
}

:where(html.page-links) .link-card:hover {
  box-shadow: 0 16px 32px rgba(5, 107, 246, 0.12);
}

:where(html.page-links.dark) .link-card:hover {
  box-shadow: 0 16px 34px rgba(0, 2, 6, 0.58);
}

:where(html.page-links) .link-card:hover .card-icon,
:where(html.page-links) .hero-btn:hover i,
:where(html.page-links) .mini-banner a:hover i {
  transform: translate3d(0, -1px, 0) scale(1.04);
}

:where(html.page-links) .card-icon,
:where(html.page-links) .hero-btn i,
:where(html.page-links) .mini-banner a i {
  transition: transform 0.22s ease;
}

:where(html.page-links) .link-card:hover .card-arrow {
  transform: translate3d(3px, 0, 0);
}

:where(html.page-links) .card-arrow {
  transition: transform 0.22s ease, color 0.22s ease;
}

@keyframes links-softContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) {
  :where(html.page-links) .surface.reveal,
  :where(html.page-links) .link-card.reveal {
    transform: translate3d(0, 6px, 0);
    transition-duration: 0.22s;
  }

  :where(html.page-links) .surface.reveal.is-visible,
  :where(html.page-links) .link-card.reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  :where(html.page-links) .hero-btn:hover,
  :where(html.page-links) .link-card:hover,
  :where(html.page-links) .mini-banner a:hover,
  :where(html.page-links) .toggle:hover {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html.page-links) body.page-intro-ready .hero-top,
  :where(html.page-links) body.page-intro-ready .lead,
  :where(html.page-links) body.page-intro-ready .section-head,
  :where(html.page-links) body.page-intro-ready .mini-banner strong,
  :where(html.page-links) body.page-intro-ready .mini-banner p,
  :where(html.page-links) body.page-intro-ready .mini-banner a {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Rodapé legal mais clean para orcamento.html e reconhecimentos.html */
:where(html.page-orcamento) footer,
:where(html.page-reconhecimentos) footer {
  padding: 10px 0 24px;
}

:where(html.page-orcamento) .rod,
:where(html.page-reconhecimentos) .rod {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:where(html.page-orcamento) .rod-item,
:where(html.page-reconhecimentos) .rod-item {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

:where(html.page-orcamento) .rod-item--company,
:where(html.page-reconhecimentos) .rod-item--company {
  color: #334155;
  font-weight: 700;
  letter-spacing: 0.015em;
}

:where(html.page-orcamento) .rod-separator,
:where(html.page-reconhecimentos) .rod-separator {
  width: 4px;
  height: 4px;
  align-self: center;
  border-radius: 999px;
  color: transparent;
  background: rgba(100, 116, 139, 0.34);
  font-size: 0;
  overflow: hidden;
}

:where(html.page-orcamento.dark) .rod,
:where(html.page-reconhecimentos.dark) .rod {
  color: #94a3b8;
  background: rgba(4, 8, 14, 0.72);
  border-color: rgba(96, 165, 250, 0.09);
  box-shadow: none;
}

:where(html.page-orcamento.dark) .rod-item--company,
:where(html.page-reconhecimentos.dark) .rod-item--company {
  color: #e5eefc;
}

:where(html.page-orcamento.dark) .rod-separator,
:where(html.page-reconhecimentos.dark) .rod-separator {
  background: rgba(148, 163, 184, 0.34);
}

@media (max-width: 768px) {
  :where(html.page-orcamento) footer,
  :where(html.page-reconhecimentos) footer {
    width: calc(100% - 20px);
    padding-bottom: 18px;
  }

  :where(html.page-orcamento) .rod,
  :where(html.page-reconhecimentos) .rod {
    width: 100%;
    padding: 12px 14px;
    border-radius: 22px;
    gap: 6px;
  }

  :where(html.page-orcamento) .rod-item,
  :where(html.page-reconhecimentos) .rod-item {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  :where(html.page-orcamento) .rod-separator,
  :where(html.page-reconhecimentos) .rod-separator {
    display: none;
  }
}

:where(html.page-orcamento) .navbar .logo,
:where(html.page-reconhecimentos) .navbar .logo {
  background-image: url(../img/logo_light.png);
}

:where(html.page-orcamento.dark) .navbar .logo,
:where(html.page-reconhecimentos.dark) .navbar .logo {
  background-image: url(../img/logo.png);
}

/* Logo da pagina de trabalhos */
:where(html.page-trabalhos) .topbar .brand {
  display: block;
  width: 130px;
  height: 64px;
  flex-shrink: 0;
  background: url(../img/logo_light.png) no-repeat 50% 50%;
  background-size: contain;
  -webkit-text-fill-color: initial;
}

:where(html.page-trabalhos.dark) .topbar .brand {
  background-image: url(../img/logo.png);
}

@media (max-width: 480px) {
  :where(html.page-trabalhos) .topbar .brand {
    width: 118px;
    height: 54px;
  }
}

/* Entrada moderna do card azul inicial da pagina de trabalhos */
:where(html.page-trabalhos) .hero {
  transform-origin: center top;
  animation: trabalhos-heroEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity, filter;
}

:where(html.page-trabalhos) .hero::before {
  animation: trabalhos-heroGlowSweep 1.35s cubic-bezier(0.22, 1, 0.36, 1) both 0.12s;
}

:where(html.page-trabalhos) .hero .eyebrow,
:where(html.page-trabalhos) .hero h1,
:where(html.page-trabalhos) .hero p,
:where(html.page-trabalhos) .hero .stat {
  opacity: 0;
  animation: trabalhos-heroContentIn 0.66s cubic-bezier(0.22, 1, 0.36, 1) both;
}

:where(html.page-trabalhos) .hero .eyebrow {
  animation-delay: 0.2s;
}

:where(html.page-trabalhos) .hero h1 {
  animation-delay: 0.3s;
}

:where(html.page-trabalhos) .hero p {
  animation-delay: 0.4s;
}

:where(html.page-trabalhos) .hero .stat:nth-child(1) {
  animation-delay: 0.52s;
}

:where(html.page-trabalhos) .hero .stat:nth-child(2) {
  animation-delay: 0.62s;
}

:where(html.page-trabalhos) .hero .stat:nth-child(3) {
  animation-delay: 0.72s;
}

@keyframes trabalhos-heroEntrance {
  from {
    opacity: 0;
    filter: blur(14px) saturate(0.88);
    transform: translate3d(0, 28px, 0) scale(0.975);
  }

  58% {
    opacity: 1;
    filter: blur(0) saturate(1.06);
    transform: translate3d(0, -2px, 0) scale(1.006);
  }

  to {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes trabalhos-heroContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes trabalhos-heroGlowSweep {
  from {
    opacity: 0;
    transform: translate3d(-4%, -2%, 0) scale(1.08);
  }

  45% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html.page-trabalhos) .hero,
  :where(html.page-trabalhos) .hero::before,
  :where(html.page-trabalhos) .hero .eyebrow,
  :where(html.page-trabalhos) .hero h1,
  :where(html.page-trabalhos) .hero p,
  :where(html.page-trabalhos) .hero .stat {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}