/* * OTIMIZAÇÕES CSS: * - Para desempenho, este arquivo 'styles.css' deve ser processado para extrair o 'Critical CSS' * (estilos necessários para o conteúdo da primeira dobra). O Critical CSS deve ser inline no do HTML. * - O restante deste arquivo (CSS não crítico) deve ser carregado de forma assíncrona/diferida. * - O arquivo final deve ser minificado para reduzir o tamanho. * - Considerar a conversão de imagens de fundo (como watermarks) para WebP para melhor compressão. */ /* ===== RESET E CONFIGURAÇÕES GLOBAIS ===== */ *{ margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #333; background-color: #fff; } /* ===== VARIÁVEIS CSS ===== */ :root { /* Cores Primárias */ --primary-blue: #0066CC; --primary-blue-dark: #004499; --primary-blue-black: #012868; --primary-blue-light: #3385D6; --primary-blue-gray: #E4E8F0; --primary-gray: #EDEFF5; --primary-gray-dark: #C0C9D9; /* Cores Secundárias */ --primary-yellow: #FC0; --primary-yellow-light: #FF0; /* Cores Terciárias */ --accent-orange: #FF6B35; --accent-orange-dark: #E55A2B; /* Cores Neutras */ --white: #FFFFFF; --light-gray: #F8F9FA; --medium-gray: #6C757D; --dark-gray: #343A40; --border-gray: #DEE2E6; --border-blue-black: #012868; /* Tipografia */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* Espaçamentos */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; /* Breakpoints */ --mobile: 768px; --tablet: 1024px; --desktop: 1200px; /* Sombras */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Transições */ --transition-fast: 0.15s ease-in-out; --transition-normal: 0.3s ease-in-out; --transition-slow: 0.5s ease-in-out; } /* ===== UTILITÁRIOS ===== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-sm); } @media (min-width: 768px) { .container { padding: 0 var(--spacing-md); } } .section-line { width: 10%; height: 4px; background: var(--primary-yellow); margin: var(--spacing-sm) auto var(--spacing-lg); } .section-description { text-align: center; font-size: var(--font-size-lg); color: var(--primary-blue-black); margin-bottom: var(--spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.4; } .section-description-bold { text-align: center; font-size: var(--font-size-lg); font-weight: 900; color: var(--primary-blue-black); margin-bottom: var(--spacing-xl); max-width: 800px; margin-left: auto; margin-right: auto; } /* ===== BOTÕES ===== */ .btn { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); border: none; border-radius: 50px; font-family: inherit; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: all var(--transition-normal); font-size: var(--font-size-base); line-height: 1.2; } .btn-primary { background: linear-gradient(0deg, var(--primary-yellow), var(--primary-yellow-light)); color: var(--primary-blue-black); box-shadow: var(--shadow-md); text-decoration: none; } .btn-primary:hover { background: linear-gradient(0deg, var(--primary-blue-dark), var(--primary-blue)); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-large { padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-lg); font-weight: 700; } .btn-accept { background: var(--primary-blue); color: var(--white); padding: var(--spacing-xs) var(--spacing-sm); border: none; border-radius: 4px; cursor: pointer; font-size: var(--font-size-sm); } .btn-reject { background: transparent; color: var(--medium-gray); padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--border-gray); border-radius: 4px; cursor: pointer; font-size: var(--font-size-sm); } .static-right-social-area{ position:fixed; margin-right:30px; right:0; top:75%; z-index:99999 } .static-right-social{ position:relative } .static-right-social ul li{ background:-moz-linear-gradient(top,#00a859 0,#25d266 100%); background:-webkit-linear-gradient(top,#00a859 0,#25d266 100%); background:-o-linear-gradient(top,#00a859 0,#25d266 100%); background:-ms-linear-gradient(top,#00a859 0,#25d266 100%); background:linear-gradient(to bottom,#00a859 0,#25d266 100%); animation:1.5s ease-out infinite playShadowxWhats; border-radius:50px!important; cursor:pointer; margin-top:-10px; margin-bottom:10px; color:#fff; text-transform:uppercase; text-decoration:none; padding:6px 6px; font-weight:700; transition:all .5s ease 0s; text-shadow:1px 1px 1px rgba(26,26,26,.5); top:0; list-style:none } .static-right-social ul li:hover{ right:0 } .static-right-social ul li a{ color:#fff!important; display:block; font-size:15px; line-height:50px; width:50px; height:50px; font-weight:500; text-decoration:none } .static-right-social ul li a i{ width:40px; font-size:32px; padding-top:8px; padding-left:10px; text-align:center } @keyframes playShadowxhoverWhats{ 0%{ box-shadow:0 0 0 0 #25d266,0 0 0 0 rgba(12,99,16,.5); transform:scale(1) } 15%{ box-shadow:0 0 0 0 rgba(13,243,109,.5),0 0 0 0 rgba(6,63,29,.25) } 25%{ transform:scale(1.05) } 85%{ transform:scale(.95) } 100%{ box-shadow:0 0 0 16px rgba(0,204,92,0),0 0 0 32px rgba(0,215,255,0); transform:scale(1) } } @keyframes playShadowxWhats{ 0%{ box-shadow:0 0 0 0 #25d266,0 0 0 0 rgba(12,99,16,.5); transform:scale(1) } 15%{ box-shadow:0 0 0 0 rgba(13,243,109,.5),0 0 0 0 rgba(6,63,29,.25) } 25%{ transform:scale(1.05) } 85%{ transform:scale(.95) } 100%{ box-shadow:0 0 0 16px rgba(0,204,92,0),0 0 0 32px rgba(0,215,255,0); transform:scale(1) } } /* ===== COOKIE CONSENT ===== */ .cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border-gray); box-shadow: var(--shadow-lg); z-index: 1000; padding: var(--spacing-sm); display: none; /* Controlado via JS para exibir */ } .cookie-consent.show { display: block; } .cookie-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); } .cookie-content p { flex: 1; margin: 0; font-size: var(--font-size-sm); color: var(--dark-gray); } .cookie-content a { color: var(--primary-blue); text-decoration: none; } .cookie-buttons { display: flex; gap: var(--spacing-xs); } @media (max-width: 767px) { .cookie-content { flex-direction: column; text-align: center; } .cookie-buttons { justify-content: center; } } /* ===== HEADER ===== */ .header { background: var(--primary-blue-black); border-bottom: solid 06px #FC0; position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--spacing-sm) 0; } .header-content { display: flex; align-items: center; justify-content: space-between; } .logo img { height: 50px; width: auto; } .header-cta { font-size: var(--font-size-sm); padding: var(--spacing-xs) var(--spacing-sm); } @media (max-width: 767px) { .header-cta { display: inline-block; font-weight: bold; font-size: 10px; padding-left: 10px; padding-right: 10px; padding-top: 08px; padding-bottom: 08px; } } @media (max-width: 767px) { .contact-info { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 16px; overflow-x: hidden; } .contact-info .info-item { text-align: center; word-wrap: break-word; } .contact-info .info-item h4 { font-size: 1rem; margin-bottom: 8px; } .contact-info .info-item p { font-size: 0.875rem; line-height: 1.4; word-break: break-word; } } /* ===== HERO SECTION ===== */ .hero { /* A imagem de fundo pode ser otimizada para WebP ou carregada via para fontes responsivas */ background: url(../img/bg_home.png); background-repeat: no-repeat; background-position: top right; background-size: cover; padding: calc(80px + var(--spacing-xl)) 0 var(--spacing-2xl); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; /*flex-end;*/ align-items: center; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; margin-bottom: var(--spacing-2xl); } .hero-text h1 { font-size: var(--font-size-4xl); font-weight: 700; color: var(--primary-blue-black); /* REVISÃO: Margens negativas como -200px e -208px para posicionamento * podem causar problemas de layout e acessibilidade em diferentes contextos. * Recomenda-se ajustar a estrutura do HTML ou usar Flexbox/Grid de forma mais robusta * para atingir o design desejado sem margens negativas que "quebrem" o fluxo normal. * Por enquanto, mantido para preservar a identidade visual original. */ margin-top: -200px; margin-bottom: var(--spacing-sm); line-height: 1.2; } .hero-text p { font-size: var(--font-size-md); color: var(--primary-blue-black); margin-bottom: var(--spacing-xl); line-height: 1.3; } .hero-image img { width: 431px; height: 550px; } .hero-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); margin-top: -208px; /* Ver nota acima sobre margens negativas */ } .feature-card { background: url(../img/bg_feature_card_1.png); /* Imagem de fundo no CSS, otimizar para WebP */ background-repeat: no-repeat; background-position: top right; background-size: cover; padding: var(--spacing-lg); border-radius: 12px 12px 0px 0px; box-shadow: var(--shadow-md); text-align: center; transition: transform var(--transition-normal); } .feature-card:hover { transform: translateY(-5px); } .feature-card h3 { font-size: var(--font-size-xl); font-weight: 600; color: var(--primary-yellow); margin-bottom: var(--spacing-sm); line-height: 1.4; } .feature-card p { color: var(--medium-gray); font-size: var(--font-size-base); } /* ===== Correções para Mobile ===== */ @media (max-width: 767px) { .hero { background-size: cover; overflow: hidden; padding-top: 100px; padding-bottom: 60px; } .hero-features { flex-direction: column; gap: var(--spacing-md); } .hero-image img { width: 100%; height: auto; } .logo img { height: 35px; width: auto; } .hero-content { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 1023px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-text h1 { font-size: var(--font-size-3xl); } .hero-features { grid-template-columns: 1fr; } } @media (max-width: 767px) { .hero { padding: calc(90% + var(--spacing-lg)) 0 var(--spacing-xl); } .hero-text h1 { font-size: var(--font-size-2xl); } .hero-text p { font-size: var(--font-size-base); margin-bottom: 1rem; } .feature-card { padding: var(--spacing-md); } } /* ===== SEÇÕES GERAIS ===== */ section { padding: var(--spacing-2xl) 0; } section h2 { font-size: var(--font-size-3xl); font-weight: 700; text-align: center; color: var(--primary-blue-black); margin-bottom: var(--spacing-sm); } @media (max-width: 767px) { section { padding: var(--spacing-xl) 0; } section h2 { font-size: var(--font-size-2xl); } } /* ===== TESTIMONIALS SECTION ===== */ .testimonials { background: var(--primary-blue-black); } .testimonials h2 { color: var(--white); } .testimonials p { color: var(--white); font-size: var(--font-size-md); } /* Removidas regras iframe-specificas, agora usando