overflow: visible !important;
}
/* Para dropdowns customizados (Bootstrap/Tailwind) */
.dropdown-menu, .custom-dropdown-menu {
position: fixed !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, 0) !important;
z-index: 99999 !important;
min-width: 220px;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
background: #fff;
border-radius: 8px;
}
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
/* CSS Custom Properties - Design System */
:root {
/* Primary Corporate Colors */
--color-primary: #2EB85C;
--color-primary-light: #58C67A;
--color-primary-dark: #27AE60;
--color-primary-darker: #229954;
/* Secondary Colors */
--color-secondary: #2C5AA0;
--color-secondary-light: #4F75B8;
--color-secondary-dark: #1E3F70;
/* Neutral Colors */
--color-black: #000000;
--color-dark: #1a1a1a;
--color-gray-900: #212529;
--color-gray-800: #343a40;
--color-gray-700: #495057;
--color-gray-600: #6c757d;
--color-gray-500: #adb5bd;
--color-gray-400: #ced4da;
--color-gray-300: #dee2e6;
--color-gray-200: #e9ecef;
--color-gray-100: #f8f9fa;
--color-white: #ffffff;
/* Status Colors */
--color-success: #28a745;
--color-warning: #ffc107;
--color-danger: #dc3545;
--color-info: #17a2b8;
/* Typography */
--font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Font Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* Font Sizes */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
/* Line Heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Spacing */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-2xl: 2.5rem; /* 40px */
--spacing-3xl: 3rem; /* 48px */
--spacing-4xl: 4rem; /* 64px */
--spacing-5xl: 5rem; /* 80px */
--spacing-6xl: 6rem; /* 96px */
/* Border Radius */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-3xl: 1.5rem; /* 24px */
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Transitions */
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
/* Z-Index Scale */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* Reset and base styles */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
height: 100%;
}
body {
font-family: var(--font-secondary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
color: var(--color-gray-800);
background-color: var(--color-white);
overflow-x: hidden;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.site-header {
background: var(--color-white);
position: sticky;
top: 0;
z-index: var(--z-sticky);
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
}
.site-header.scrolled {
box-shadow: var(--shadow-xl);
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.95);
}
.header-top-bar,
.header-top {
background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-white) 100%);
padding: var(--spacing-lg) 0;
border-bottom: 1px solid var(--color-gray-200);
position: relative;
}
.header-top-bar::before,
.header-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.header-top .container,
.header-top-bar .container {
display: flex;
justify-content: center;
align-items: center;
}
.header-logo {
display: flex;
justify-content: center;
align-items: center;
}
.header-logo img,
.logo img {
height: 140px;
width: auto;
max-width: 420px;
object-fit: contain;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
grid-column: 2;
justify-self: center;
}
.logo-link {
display: flex;
align-items: center;
justify-content: center;
}
/* Header Contact Info */
.header-top .contact-info {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
justify-self: end;
}
.header-top .contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #333;
}
.header-top .contact-item:first-child {
justify-self: start;
}
.header-top .contact-item:last-child {
justify-self: end;
}
.contact-link {
display: flex;
align-items: center;
gap: 8px;
color: #333;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.header-top .contact-item a {
color: #333;
text-decoration: none;
}
.header-top .contact-item a:hover,
.contact-link:hover {
color: var(--color-primary);
}
/* Header Contact for index.html structure */
.header-contact {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.contact-left {
justify-self: start;
}
.contact-right {
justify-self: end;
}
.contact-left,
.contact-right {
flex: 1;
}
.contact-right {
display: flex;
justify-content: flex-end;
}
.contact-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: inherit;
}
.contact-link:hover {
color: #2EB85C;
}
.icon-email-green::before,
.icon-phone-gray::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
background-size: contain;
}
.icon-email-green::before {
background-image: url('data:image/svg+xml,');
}
.icon-phone-gray::before {
background-image: url('data:image/svg+xml,');
}
/* Navigation */
.main-nav {
background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
padding: 0;
position: relative;
}
.main-nav::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(135deg, rgba(44, 90, 160, 0.1) 0%, rgba(46, 184, 92, 0.1) 100%);
pointer-events: none;
}
.main-nav .container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 15px;
color: white;
font-size: 14px;
font-weight: 500;
align-items: center;
gap: 8px;
position: absolute;
right: 20px;
}
.hamburger {
display: block;
width: 24px;
height: 2px;
background: white;
position: relative;
transition: all 0.3s ease;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: white;
transition: all 0.3s ease;
}
.hamburger::before {
top: -8px;
}
.hamburger::after {
bottom: -8px;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
justify-content: center;
}
.nav-links li {
position: relative;
}
.nav-links a {
display: block;
color: var(--color-white);
text-decoration: none;
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
padding: var(--spacing-lg) var(--spacing-lg);
transition: all var(--transition-normal);
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.nav-links a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
transition: all var(--transition-normal);
transform: translateX(-50%);
}
.nav-links a:hover::before,
.nav-links a.active::before {
width: 80%;
}
.nav-links a:hover {
color: var(--color-primary);
background: rgba(46, 184, 92, 0.1);
}
.nav-links a.active {
color: var(--color-primary);
background: rgba(46, 184, 92, 0.15);
}
/* ===== MODERN HERO SECTION ===== */
/* Particles Background */
.particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
#particlesCanvas {
width: 100%;
height: 100%;
}
/* Modern Hero */
.modern-hero {
position: relative;
color: var(--color-white);
padding: 0;
overflow: hidden;
text-align: center;
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
}
/* Legacy Hero for compatibility */
.hero {
position: relative;
color: var(--color-white);
padding: var(--spacing-6xl) 0 var(--spacing-5xl);
overflow: hidden;
text-align: center;
min-height: 80vh;
display: flex;
align-items: center;
background: var(--color-dark);
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
/* Fallback para quando o vídeo não carregar */
.hero-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
z-index: 0;
}
/* Modern Overlay with animated gradient */
.modern-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(45deg, rgba(46, 184, 92, 0.1) 0%, transparent 25%),
linear-gradient(-45deg, rgba(44, 90, 160, 0.1) 0%, transparent 25%),
linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
z-index: 2;
animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% {
background:
linear-gradient(45deg, rgba(46, 184, 92, 0.1) 0%, transparent 25%),
linear-gradient(-45deg, rgba(44, 90, 160, 0.1) 0%, transparent 25%),
linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
}
50% {
background:
linear-gradient(45deg, rgba(44, 90, 160, 0.15) 0%, transparent 30%),
linear-gradient(-45deg, rgba(46, 184, 92, 0.15) 0%, transparent 30%),
linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
}
}
/* Legacy overlay */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.45) 30%,
rgba(0, 0, 0, 0.45) 70%,
rgba(0, 0, 0, 0.65) 100%
);
z-index: 2;
}
.hero-inner {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 3;
text-align: center;
width: 100%;
}
.hero h1 {
font-family: var(--font-primary);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-2xl);
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 1s ease-out;
position: relative;
}
.hero h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: var(--radius-full);
animation: fadeInUp 1s ease-out 0.3s both;
}
.hero p {
font-family: var(--font-secondary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-4xl);
opacity: 0.95;
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--spacing-4xl);
animation: fadeInUp 1s ease-out 0.2s both;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-3xl);
margin: var(--spacing-4xl) 0;
animation: fadeInUp 1s ease-out 0.4s both;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.stat {
background: rgba(255, 255, 255, 0.08);
padding: var(--spacing-2xl);
border-radius: var(--radius-2xl);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
text-align: center;
}
.stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
transform: scaleX(0);
transition: transform var(--transition-normal);
}
.stat:hover {
transform: translateY(-8px) scale(1.02);
background: rgba(255, 255, 255, 0.12);
box-shadow: var(--shadow-2xl);
}
.stat:hover::before {
transform: scaleX(1);
}
.number {
font-family: var(--font-primary);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-black);
color: var(--color-primary);
display: block;
margin-bottom: var(--spacing-md);
text-shadow: 0 4px 15px rgba(46, 184, 92, 0.3);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.label,
.text {
font-family: var(--font-secondary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-white);
line-height: var(--line-height-relaxed);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
}
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Loading animations */
body:not(.loaded) .hero h1,
body:not(.loaded) .hero p,
body:not(.loaded) .stats {
opacity: 0;
transform: translateY(30px);
}
/* Animate in class */
.animate-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Enhanced hover effects */
.card,
.segment,
.cert {
transition: all var(--transition-normal);
}
.card:hover,
.cert:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-xl);
}
/* Improved focus states */
.btn:focus-visible,
.nav-links a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-md);
}
/* Loading spinner (if needed) */
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--color-gray-200);
border-top: 4px solid var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Article Pages Styles */
.breadcrumb {
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--color-gray-500);
}
.breadcrumb a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-normal);
}
.breadcrumb a:hover {
color: var(--color-primary-dark);
}
.breadcrumb span {
margin: 0 var(--spacing-sm);
color: var(--color-gray-400);
}
.article-subtitle {
font-size: var(--font-size-xl) !important;
font-weight: var(--font-weight-medium) !important;
color: var(--color-primary) !important;
margin-bottom: var(--spacing-lg) !important;
}
.article-meta {
display: flex;
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--color-gray-600);
}
.article-date {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.article-date::before {
content: '📅';
font-size: var(--font-size-base);
}
.article-category {
background: var(--color-primary);
color: var(--color-white);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-weight: var(--font-weight-medium);
}
.article-content {
padding-top: var(--spacing-3xl);
padding-bottom: var(--spacing-4xl);
}
.article-content .container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-4xl);
max-width: 1400px;
}
.article-body {
background: var(--color-white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.article-image {
width: 100%;
margin-bottom: var(--spacing-3xl);
}
.article-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.image-caption {
padding: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--color-gray-600);
font-style: italic;
background: var(--color-gray-100);
margin: 0;
}
.article-text {
padding: 0 var(--spacing-3xl) var(--spacing-3xl);
}
.article-text .lead {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-relaxed);
color: var(--color-gray-700);
margin-bottom: var(--spacing-2xl);
padding: var(--spacing-xl);
background: linear-gradient(135deg, rgba(46, 184, 92, 0.05) 0%, rgba(44, 90, 160, 0.05) 100%);
border-left: 4px solid var(--color-primary);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.article-text h2 {
font-family: var(--font-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin: var(--spacing-3xl) 0 var(--spacing-lg);
position: relative;
padding-bottom: var(--spacing-md);
}
.article-text h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: var(--radius-full);
}
.article-text h3 {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-gray-800);
margin: var(--spacing-2xl) 0 var(--spacing-lg);
}
.article-text p {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-gray-700);
margin-bottom: var(--spacing-lg);
text-align: justify;
}
.article-text ul, .article-text ol {
margin: var(--spacing-lg) 0;
padding-left: var(--spacing-xl);
}
.article-text li {
margin-bottom: var(--spacing-sm);
color: var(--color-gray-700);
line-height: var(--line-height-relaxed);
}
.article-text li strong {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
.article-text blockquote {
background: var(--color-gray-100);
border-left: 4px solid var(--color-primary);
padding: var(--spacing-xl);
margin: var(--spacing-2xl) 0;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
font-style: italic;
}
.article-text blockquote p {
font-size: var(--font-size-lg);
color: var(--color-gray-800);
margin-bottom: var(--spacing-md);
}
.article-text blockquote cite {
font-size: var(--font-size-sm);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
font-style: normal;
}
.highlight-box {
background: linear-gradient(135deg, rgba(46, 184, 92, 0.1) 0%, rgba(44, 90, 160, 0.1) 100%);
border: 1px solid var(--color-primary);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
margin: var(--spacing-2xl) 0;
}
.highlight-box h4 {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
margin-bottom: var(--spacing-lg);
}
.article-footer {
padding: var(--spacing-2xl) var(--spacing-3xl);
border-top: 1px solid var(--color-gray-200);
background: var(--color-gray-50);
}
.article-tags {
margin-bottom: var(--spacing-xl);
}
.tag {
display: inline-block;
background: var(--color-primary);
color: var(--color-white);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-right: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.article-share h4 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-gray-800);
margin-bottom: var(--spacing-md);
}
.share-buttons {
display: flex;
gap: var(--spacing-md);
}
.share-btn {
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-lg);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: all var(--transition-normal);
}
.share-btn.facebook {
background: #1877f2;
color: var(--color-white);
}
.share-btn.linkedin {
background: #0a66c2;
color: var(--color-white);
}
.share-btn.whatsapp {
background: #25d366;
color: var(--color-white);
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Sidebar */
.article-sidebar {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
}
.sidebar-widget {
background: var(--color-white);
border-radius: var(--radius-2xl);
padding: var(--spacing-2xl);
box-shadow: var(--shadow-lg);
}
.sidebar-widget h3 {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.related-articles {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.related-item {
padding: var(--spacing-lg);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
}
.related-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.related-item h4 {
margin-bottom: var(--spacing-sm);
}
.related-item h4 a {
color: var(--color-gray-800);
text-decoration: none;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
}
.related-item h4 a:hover {
color: var(--color-primary);
}
.related-date {
font-size: var(--font-size-sm);
color: var(--color-gray-500);
}
.cta-widget {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
color: var(--color-white);
text-align: center;
}
.cta-widget h3 {
color: var(--color-white) !important;
}
.cta-widget p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-lg);
}
.cta-widget .btn {
background: var(--color-white);
color: var(--color-primary);
}
.cta-widget .btn:hover {
background: var(--color-gray-100);
color: var(--color-primary-dark);
}
/* Responsive */
@media (max-width: 1024px) {
.article-content .container {
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
}
.article-sidebar {
order: -1;
}
}
@media (max-width: 768px) {
.article-text {
padding: 0 var(--spacing-xl) var(--spacing-xl);
}
.article-footer {
padding: var(--spacing-xl);
}
.share-buttons {
flex-direction: column;
}
.article-meta {
flex-direction: column;
gap: var(--spacing-sm);
}
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #2c5aa0 0%, #e74c3c 100%);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #27AE60 0%, #229954 100%);
}
/* Page Hero */
.page-hero {
background: linear-gradient(135deg, #333333 0%, #666666 100%);
color: white;
padding: 100px 0 60px;
text-align: center;
position: relative;
}
.page-hero h1 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
}
.page-hero p {
font-size: 1.2rem;
opacity: 0.9;
}
/* About Content */
.about-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
margin-top: 40px;
}
.about-text h2,
.about-text h3 {
color: #333333;
margin-bottom: 20px;
}
.about-text h3 {
font-size: 1.8rem;
margin-top: 40px;
}
.about-text p {
margin-bottom: 20px;
line-height: 1.8;
color: #666666;
}
.values-list {
list-style: none;
padding: 0;
}
.values-list li {
padding: 12px 0;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30px;
color: #666666;
}
.values-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #2EB85C;
font-weight: bold;
font-size: 18px;
}
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.stat-card {
background: white;
padding: 30px 20px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 800;
color: #2EB85C;
margin-bottom: 10px;
}
.stat-label {
font-size: 14px;
color: #666666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Timeline */
.timeline-section {
background: #f8f9fa;
padding: 100px 0;
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: #2EB85C;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
display: flex;
align-items: center;
}
.timeline-item:nth-child(odd) {
flex-direction: row;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-year {
background: #2EB85C;
color: white;
padding: 15px 20px;
border-radius: 50px;
font-weight: 700;
font-size: 18px;
min-width: 80px;
text-align: center;
position: relative;
z-index: 2;
}
.timeline-content {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin: 0 30px;
flex: 1;
}
.timeline-content h4 {
color: #333333;
font-size: 1.3rem;
margin-bottom: 10px;
}
.timeline-content p {
color: #666666;
line-height: 1.6;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.about-stats {
grid-template-columns: 1fr;
}
.timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: column !important;
align-items: flex-start;
padding-left: 70px;
}
.timeline-year {
position: absolute;
left: 0;
min-width: 60px;
font-size: 14px;
padding: 10px 15px;
}
.timeline-content {
margin: 20px 0 0 0;
width: 100%;
}
}
/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 40px;
}
.service-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.service-icon {
height: 200px;
overflow: hidden;
position: relative;
}
.service-icon img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.service-card:hover .service-icon img {
transform: scale(1.05);
}
.service-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 800;
color: white;
}
.service-content {
padding: 30px;
}
.service-content h3 {
color: #333333;
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 700;
}
.service-content p {
color: #666666;
margin-bottom: 20px;
line-height: 1.6;
}
.service-features {
list-style: none;
margin-bottom: 25px;
padding: 0;
}
.service-features li {
padding: 8px 0;
position: relative;
padding-left: 25px;
color: #666666;
border-bottom: 1px solid #f0f0f0;
}
.service-features li:last-child {
border-bottom: none;
}
.service-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #2EB85C;
font-weight: bold;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
color: white;
padding: 100px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section .container {
max-width: 800px;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: 30px;
font-weight: 700;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: 50px;
line-height: 1.6;
opacity: 0.95;
}
.btn-large {
padding: 20px 40px;
font-size: 16px;
background: white;
color: #2EB85C;
}
.btn-large:hover {
background: #f8f9fa;
color: #27AE60;
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.cta-content h2 {
font-size: 2rem;
}
}
/* WhatsApp Floating Button */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.whatsapp-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
text-decoration: none;
animation: pulse-whatsapp 2s infinite;
}
.whatsapp-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}
.icon-whatsapp-float::before {
content: '';
display: block;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
}
@keyframes pulse-whatsapp {
0% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
50% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7), 0 0 0 10px rgba(37, 211, 102, 0.1);
}
100% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
padding: var(--spacing-lg) var(--spacing-2xl);
text-decoration: none;
border-radius: var(--radius-lg);
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-normal);
box-shadow: var(--shadow-lg), 0 0 0 0 rgba(46, 184, 92, 0);
border: 2px solid transparent;
cursor: pointer;
position: relative;
overflow: hidden;
min-width: 160px;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn:hover {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
transform: translateY(-3px) scale(1.02);
box-shadow: var(--shadow-xl), 0 0 30px rgba(46, 184, 92, 0.4);
border-color: var(--color-primary-light);
}
.btn:hover::before {
left: 100%;
}
.btn:active {
transform: translateY(-1px) scale(1);
}
.btn:focus {
outline: none;
box-shadow: var(--shadow-lg), 0 0 0 3px rgba(46, 184, 92, 0.3);
}
/* Form Loading States */
.btn-loading {
display: none;
}
.btn.loading .btn-text {
display: none;
}
.btn.loading .btn-loading {
display: inline-block;
}
.btn.loading {
pointer-events: none;
opacity: 0.7;
}
/* Form Success/Error States */
.form-message {
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-lg);
font-weight: var(--font-weight-medium);
text-align: center;
}
.form-message.success {
background: rgba(40, 167, 69, 0.1);
color: var(--color-success);
border: 1px solid rgba(40, 167, 69, 0.2);
}
.form-message.error {
background: rgba(220, 53, 69, 0.1);
color: var(--color-danger);
border: 1px solid rgba(220, 53, 69, 0.2);
}
/* Button Variants */
.btn-secondary {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
box-shadow: var(--shadow-lg), 0 0 0 0 rgba(44, 90, 160, 0);
}
.btn-secondary:hover {
background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary-dark) 100%);
box-shadow: var(--shadow-xl), 0 0 30px rgba(44, 90, 160, 0.4);
border-color: var(--color-secondary);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
box-shadow: none;
}
.btn-outline:hover {
background: var(--color-primary);
color: var(--color-white);
transform: translateY(-3px) scale(1.02);
}
.link {
color: #333333;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
position: relative;
transition: color 0.3s ease;
}
.link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #2EB85C;
transition: width 0.3s ease;
}
.link:hover {
color: #2EB85C;
}
.link:hover::after {
width: 100%;
}
/* Sections */
.section {
padding: var(--spacing-6xl) 0;
position: relative;
}
.section:first-of-type,
.solutions-section {
padding-top: calc(var(--spacing-6xl) + var(--spacing-2xl));
}
.solutions-section {
background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-white) 50%, var(--color-gray-100) 100%);
border-top: 1px solid var(--color-gray-200);
position: relative;
}
.solutions-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(46, 184, 92, 0.02) 0%, transparent 70%);
pointer-events: none;
}
.section h2 {
font-family: var(--font-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-4xl);
text-align: center;
color: var(--color-gray-900);
position: relative;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.section h2::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: var(--radius-full);
}
.section h2::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
width: 120px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
transform: translateX(-50%);
border-radius: var(--radius-full);
}
/* Section Introduction Text */
.section-intro {
text-align: center;
font-family: var(--font-secondary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
color: var(--color-gray-600);
max-width: 800px;
margin: 0 auto var(--spacing-4xl);
}
/* Cards */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-2xl);
margin-top: var(--spacing-3xl);
}
.card {
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-100) 100%);
padding: var(--spacing-3xl);
border-radius: var(--radius-2xl);
text-align: center;
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
border: 1px solid var(--color-gray-200);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
transform: scaleX(0);
transition: transform var(--transition-normal);
}
.card:hover::before {
transform: scaleX(1);
}
.card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-xl);
transition: all var(--transition-normal);
}
.card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-lg);
}
.card h3 {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-lg);
color: var(--color-gray-800);
line-height: var(--line-height-snug);
}
.card p {
font-family: var(--font-secondary);
font-size: var(--font-size-base);
color: var(--color-gray-600);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-xl);
}
/* Segments */
.segments {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-xl);
margin-top: var(--spacing-3xl);
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.segment {
padding: var(--spacing-xl);
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-100) 100%);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-2xl);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.segment::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, #27AE60 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.segment:hover::before {
transform: scaleX(1);
}
.segment:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: var(--shadow-xl), 0 0 40px rgba(46, 184, 92, 0.1);
border-color: var(--color-primary);
background: linear-gradient(135deg, var(--color-white) 0%, rgba(46, 184, 92, 0.02) 100%);
}
.segment h4 {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-lg);
color: var(--color-gray-800);
transition: all var(--transition-normal);
}
.segment:hover h4 {
color: var(--color-primary);
}
.segment h5 {
font-size: 1.1rem;
margin-top: 20px;
margin-bottom: 10px;
color: #666;
font-weight: 500;
}
.segment p {
color: #666;
margin-bottom: 15px;
line-height: 1.6;
}
.segment .link {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
text-decoration: none;
border-radius: var(--radius-lg);
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-normal);
box-shadow: var(--shadow-md);
}
.segment .link::after {
content: '→';
transition: transform var(--transition-normal);
}
.segment .link:hover {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
transform: translateY(-3px);
box-shadow: var(--shadow-lg), 0 0 20px rgba(46, 184, 92, 0.3);
}
.segment .link:hover::after {
transform: translateX(4px);
}
.highlight {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
padding: 12px;
border-radius: 8px;
border-left: 4px solid #ffc107;
font-weight: 500;
margin-top: 15px;
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}
/* Certifications */
.certs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin: 40px 0;
}
.cert {
padding: 30px;
border: 1px solid #eee;
border-radius: 8px;
text-align: center;
background: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cert:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cert-image {
margin-bottom: 20px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.cert-image img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.cert h4 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #333;
}
.cert p {
color: #666;
font-size: 0.9rem;
}
.section-label {
text-align: center;
color: #999;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 20px;
}
/* News */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 40px;
margin-top: 40px;
}
.news {
padding: 30px;
border: 1px solid #eee;
border-radius: 8px;
}
.date {
background: #007bff;
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 0.8rem;
font-weight: bold;
margin-right: 10px;
}
.date-full {
color: #666;
font-size: 0.9rem;
}
.news h3 {
margin: 15px 0;
font-size: 1.2rem;
}
.news h3 a {
color: #333;
text-decoration: none;
}
.news h3 a:hover {
color: #0066cc;
}
/* Clients */
.clients-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
position: relative;
}
.clients-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(44, 90, 160, 0.05) 0%, transparent 70%);
}
.clients-section .container {
position: relative;
z-index: 2;
text-align: center;
max-width: 2400px;
margin: 0 auto;
}
.clients-section h2 {
text-align: center;
margin-bottom: 50px;
color: #2c3e50;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.clients {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 60px;
max-width: 2400px;
margin: 0 auto;
padding: var(--spacing-6xl) var(--spacing-2xl);
}
.client-item {
transition: all var(--transition-normal);
cursor: pointer;
}
.client-item img {
height: 200px;
width: auto;
max-width: 400px;
object-fit: contain;
filter: grayscale(10%) brightness(1.1);
transition: all var(--transition-normal);
padding: var(--spacing-4xl);
background: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-2xl);
border: 1px solid var(--color-gray-200);
}
.client-item:hover {
transform: translateY(-8px) scale(1.05);
}
.client-item:hover img {
filter: grayscale(0%) brightness(1);
box-shadow: var(--shadow-xl);
}
/* Contact */
.contact-section {
background: #f8f9fa;
}
.contact-info {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.footer-logo {
height: 100px;
margin-bottom: 30px;
}
.contact-info p {
margin: 10px 0;
font-size: 1.1rem;
}
.contact-info a {
color: #0066cc;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
/* Footer */
.site-footer {
background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
color: var(--color-white);
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.footer-top {
padding: var(--spacing-5xl) 0 var(--spacing-4xl);
background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
position: relative;
}
.footer-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(46, 184, 92, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.footer-contact {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--spacing-3xl);
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.footer-contact .contact-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
font-family: var(--font-secondary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-white);
transition: all var(--transition-normal);
}
.footer-contact .contact-item:hover {
color: var(--color-primary);
transform: translateY(-2px);
}
.footer-contact .contact-item:first-child {
justify-self: start;
}
.footer-contact .contact-item:last-child {
justify-self: end;
}
.footer-logo {
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacing-lg);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--transition-normal);
}
.footer-logo:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.footer-logo img {
height: 90px;
width: auto;
filter: brightness(0) invert(1);
transition: filter var(--transition-normal);
}
.footer-logo:hover img {
filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(46, 184, 92, 0.3));
}
.whatsapp-icon {
margin-left: 10px;
background: #25D366;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease;
}
.whatsapp-icon:hover {
transform: scale(1.1);
}
.icon-email-green::before,
.icon-phone-green::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
background-size: contain;
}
.icon-email-green::before {
background-image: url('data:image/svg+xml,');
}
.icon-phone-green::before {
background-image: url('data:image/svg+xml,');
}
.icon-whatsapp::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
background-size: contain;
}
.footer-bottom {
background: linear-gradient(135deg, #0d0d0d 0%, var(--color-black) 100%);
padding: var(--spacing-xl) 0;
border-top: 1px solid var(--color-gray-800);
position: relative;
}
.footer-bottom::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}
.dev-credit {
font-family: var(--font-primary);
font-size: 0.8rem;
font-weight: 400;
color: #888;
text-align: center;
margin: 0;
opacity: 0.6;
text-transform: none;
letter-spacing: 0;
position: relative;
}
.dev-credit::before {
display: none;
}
.dev-credit strong {
font-weight: 400;
color: #666;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.cookie-notice {
background: rgba(52, 73, 94, 0.9);
padding: 25px;
border-radius: 12px;
max-width: 650px;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.cookie-notice p {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
.cookie-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.btn-accept,
.btn-reject {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-accept {
background: #27ae60;
color: white;
}
.btn-accept:hover {
background: #229954;
transform: translateY(-1px);
}
.btn-reject {
background: #e74c3c;
color: white;
}
.btn-reject:hover {
background: #c0392b;
transform: translateY(-1px);
}
.cookie-actions a {
color: #bdc3c7;
text-decoration: none;
font-size: 13px;
transition: color 0.3s ease;
}
.cookie-actions a:hover {
color: #ecf0f1;
text-decoration: underline;
}
/* Page-specific Styles */
/* Solutions Page */
.solutions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 40px;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.solution-card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.solution-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(46, 184, 92, 0.15);
}
.solution-icon {
width: 80px;
height: 80px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.solution-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.solution-features {
list-style: none;
padding: 0;
margin: 20px 0;
}
.solution-features li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
padding-left: 20px;
}
.solution-features li:before {
content: '✓';
color: var(--color-primary);
font-weight: bold;
position: absolute;
left: 0;
}
/* Segments Page */
.segments-detailed {
display: grid;
gap: 40px;
margin-top: 40px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.segment-detailed {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.segment-detailed:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(46, 184, 92, 0.15);
}
.segment-header {
background: linear-gradient(135deg, var(--color-primary) 0%, #27AE60 100%);
color: white;
padding: 30px;
display: flex;
align-items: center;
gap: 20px;
}
.segment-icon {
width: 80px;
height: 80px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.segment-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.segment-content {
padding: 30px;
}
.segment-content h4 {
color: var(--color-primary);
margin: 20px 0 15px 0;
font-size: 1.2rem;
}
.segment-list {
list-style: none;
padding: 0;
margin: 20px 0;
}
.segment-list li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
padding-left: 25px;
}
.segment-list li:before {
content: '→';
color: var(--color-primary);
font-weight: bold;
position: absolute;
left: 0;
}
.stats-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-top: 40px;
}
.stat-item {
text-align: center;
padding: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Certifications Page */
.certifications-detailed {
display: grid;
gap: 50px;
margin-top: 40px;
}
.cert-detailed {
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.cert-image-large img {
width: 100%;
height: auto;
border-radius: 8px;
}
.cert-benefits {
margin-top: 25px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.cert-benefits ul {
list-style: none;
padding: 0;
margin: 15px 0 0 0;
}
.cert-benefits li {
padding: 5px 0;
position: relative;
padding-left: 20px;
}
.cert-benefits li:before {
content: '✓';
color: var(--color-primary);
font-weight: bold;
position: absolute;
left: 0;
}
.commitment-section {
background: linear-gradient(135deg, var(--color-primary) 0%, #27AE60 100%);
color: white;
padding: 80px 0;
}
.commitment-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-top: 40px;
}
.commitment-item {
text-align: center;
}
.commitment-number {
display: block;
font-size: 3rem;
font-weight: 700;
margin-bottom: 10px;
}
.commitment-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-2xl);
margin-top: var(--spacing-3xl);
}
.highlight-item {
background: rgba(255, 255, 255, 0.1);
padding: var(--spacing-2xl);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-normal);
}
.highlight-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.highlight-item h4 {
color: var(--color-white);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
}
.highlight-item h4::before {
content: '✓';
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--color-white);
color: var(--color-primary);
border-radius: 50%;
font-weight: bold;
margin-right: var(--spacing-md);
font-size: var(--font-size-sm);
}
.highlight-item p {
color: rgba(255, 255, 255, 0.9);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* News Page */
.news-featured {
margin-bottom: 60px;
}
.news-main {
display: grid;
grid-template-columns: 100px 1fr;
gap: 30px;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.news-date {
text-align: center;
background: var(--color-primary);
color: white;
padding: 15px;
border-radius: 8px;
height: fit-content;
}
.news-date .day {
display: block;
font-size: 2rem;
font-weight: 700;
}
.news-date .month {
display: block;
font-size: 0.9rem;
text-transform: uppercase;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.news-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.news-card:hover {
transform: translateY(-5px);
}
.news-card-content {
padding: 20px;
}
.newsletter-section {
background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-white) 50%, var(--color-gray-100) 100%);
padding: var(--spacing-6xl) 0;
position: relative;
border-top: 1px solid var(--color-gray-200);
}
.newsletter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(46, 184, 92, 0.05) 0%, transparent 70%);
}
.newsletter-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.newsletter-content h2 {
font-family: var(--font-primary);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-lg);
text-transform: uppercase;
letter-spacing: 1px;
}
.newsletter-content p {
font-size: var(--font-size-lg);
color: var(--color-gray-600);
margin-bottom: var(--spacing-3xl);
line-height: var(--line-height-relaxed);
}
.newsletter-form {
margin-bottom: var(--spacing-xl);
}
.newsletter-input-group {
display: flex;
gap: var(--spacing-md);
max-width: 500px;
margin: 0 auto var(--spacing-lg);
background: var(--color-white);
padding: var(--spacing-sm);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
}
.newsletter-input-group:focus-within {
box-shadow: var(--shadow-xl);
transform: translateY(-2px);
}
.newsletter-input-group input {
flex: 1;
border: none;
padding: var(--spacing-lg) var(--spacing-xl);
font-size: var(--font-size-base);
background: transparent;
color: var(--color-gray-800);
}
.newsletter-input-group input:focus {
outline: none;
}
.newsletter-input-group input::placeholder {
color: var(--color-gray-500);
}
.newsletter-input-group .btn {
margin: 0;
min-width: 140px;
padding: var(--spacing-lg) var(--spacing-xl);
font-size: var(--font-size-sm);
border-radius: var(--radius-lg);
}
.newsletter-privacy {
margin-top: var(--spacing-lg);
}
.newsletter-privacy small {
color: var(--color-gray-500);
font-size: var(--font-size-sm);
}
/* Google Reviews Section */
.reviews-section {
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-100) 50%, var(--color-white) 100%);
padding: var(--spacing-6xl) 0;
position: relative;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
}
.reviews-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(46, 184, 92, 0.03) 0%, transparent 70%);
}
.reviews-header {
text-align: center;
margin-bottom: var(--spacing-5xl);
position: relative;
z-index: 2;
}
.google-rating {
margin-top: var(--spacing-3xl);
display: flex;
justify-content: center;
}
.rating-badge {
background: var(--color-white);
padding: var(--spacing-2xl) var(--spacing-3xl);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: var(--spacing-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
}
.rating-badge:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.google-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.rating-info {
text-align: left;
}
.stars {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: var(--spacing-xs);
}
.stars .star {
color: #fbbc04;
font-size: var(--font-size-xl);
line-height: 1;
}
.rating-number {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-left: var(--spacing-sm);
}
.rating-text {
font-size: var(--font-size-sm);
color: var(--color-gray-600);
margin: 0;
}
.view-all-btn {
background: var(--color-primary);
color: var(--color-white);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-lg);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: all var(--transition-normal);
white-space: nowrap;
}
.view-all-btn:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
}
/* Reviews Carousel */
.reviews-carousel {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.carousel-container {
overflow: hidden;
border-radius: var(--radius-2xl);
position: relative;
}
.carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
width: fit-content;
}
.review-card {
flex: 0 0 400px;
background: var(--color-white);
margin-right: var(--spacing-xl);
padding: var(--spacing-3xl);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
position: relative;
}
.review-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #fbbc04 0%, #ea4335 25%, #34a853 50%, #4285f4 75%, #fbbc04 100%);
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.review-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-2xl);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-lg);
}
.reviewer-info {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.reviewer-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-primary);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.reviewer-details h4 {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-gray-900);
margin: 0 0 var(--spacing-xs) 0;
}
.review-stars {
display: flex;
gap: 2px;
}
.review-stars .star {
color: #fbbc04;
font-size: var(--font-size-base);
line-height: 1;
}
.review-time {
font-size: var(--font-size-sm);
color: var(--color-gray-500);
white-space: nowrap;
}
.review-text {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-gray-700);
margin: 0;
text-align: justify;
font-style: italic;
position: relative;
}
.review-text::before {
content: '"';
font-size: var(--font-size-4xl);
color: var(--color-primary);
position: absolute;
top: -10px;
left: -10px;
font-family: Georgia, serif;
line-height: 1;
}
.review-text::after {
content: '"';
font-size: var(--font-size-4xl);
color: var(--color-primary);
position: absolute;
bottom: -20px;
right: 0;
font-family: Georgia, serif;
line-height: 1;
}
/* Carousel Controls */
.carousel-controls {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-xl);
margin-top: var(--spacing-3xl);
}
.carousel-btn {
width: 50px;
height: 50px;
border-radius: var(--radius-full);
background: var(--color-white);
border: 2px solid var(--color-primary);
color: var(--color-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
cursor: pointer;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
}
.carousel-btn:hover {
background: var(--color-primary);
color: var(--color-white);
transform: scale(1.1);
box-shadow: var(--shadow-lg);
}
.carousel-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.carousel-dots {
display: flex;
gap: var(--spacing-sm);
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: var(--radius-full);
background: var(--color-gray-300);
cursor: pointer;
transition: all var(--transition-normal);
}
.carousel-dot.active {
background: var(--color-primary);
transform: scale(1.2);
}
.carousel-dot:hover {
background: var(--color-primary-light);
}
/* Thank You Page */
.thank-you-hero {
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-100) 100%);
padding: var(--spacing-6xl) 0;
min-height: 80vh;
display: flex;
align-items: center;
}
.thank-you-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.success-icon {
margin-bottom: var(--spacing-3xl);
animation: bounceIn 0.8s ease-out;
}
.thank-you-content h1 {
font-family: var(--font-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-xl);
}
.thank-you-content .lead {
font-size: var(--font-size-xl);
color: var(--color-gray-600);
margin-bottom: var(--spacing-4xl);
line-height: var(--line-height-relaxed);
}
.next-steps {
background: var(--color-white);
padding: var(--spacing-3xl);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
margin-bottom: var(--spacing-4xl);
text-align: left;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--spacing-4xl);
}
.next-steps h3 {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
color: var(--color-primary);
margin-bottom: var(--spacing-xl);
text-align: center;
}
.next-steps ul {
list-style: none;
padding: 0;
}
.next-steps li {
padding: var(--spacing-lg) 0;
font-size: var(--font-size-lg);
color: var(--color-gray-700);
border-bottom: 1px solid var(--color-gray-200);
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.next-steps li:last-child {
border-bottom: none;
}
.contact-urgency {
background: rgba(46, 184, 92, 0.05);
padding: var(--spacing-3xl);
border-radius: var(--radius-2xl);
border: 1px solid rgba(46, 184, 92, 0.1);
margin-bottom: var(--spacing-4xl);
}
.contact-urgency h4 {
font-family: var(--font-primary);
font-size: var(--font-size-xl);
color: var(--color-gray-900);
margin-bottom: var(--spacing-xl);
}
.urgent-contacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.urgent-contact {
display: flex;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-xl);
background: var(--color-white);
border-radius: var(--radius-xl);
text-decoration: none;
transition: all var(--transition-normal);
box-shadow: var(--shadow-md);
border: 2px solid transparent;
}
.urgent-contact:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
.urgent-contact .contact-icon {
font-size: var(--font-size-3xl);
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border-radius: var(--radius-full);
flex-shrink: 0;
}
.urgent-contact .contact-info {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.urgent-contact .contact-info strong {
font-family: var(--font-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-gray-900);
}
.urgent-contact .contact-info span {
font-size: var(--font-size-base);
color: var(--color-gray-600);
}
.return-actions {
display: flex;
gap: var(--spacing-xl);
justify-content: center;
flex-wrap: wrap;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3) translateY(-30px);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Contact Page */
.contact-intro {
text-align: center;
margin-bottom: 50px;
}
.contact-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
margin-top: 40px;
}
.contact-form {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 25px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.contact-info-section {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
height: fit-content;
}
.contact-item-detailed {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.contact-icon {
width: 50px;
height: 50px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.social-icons {
display: flex;
gap: 15px;
margin-top: 15px;
}
.social-icons a {
width: 40px;
height: 40px;
background: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.social-icons a:hover {
background: #27AE60;
}
.offices-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
}
.offices-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.office-card {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Active menu item */
.nav-links a.active {
color: var(--color-primary);
background: rgba(46, 184, 92, 0.1);
}
/* Tablet Design */
@media (max-width: 1024px) and (min-width: 769px) {
.segments {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.segment {
padding: 25px;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.segments {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
}
.hero h1 {
font-size: var(--font-size-5xl);
}
.hero p {
font-size: var(--font-size-lg);
}
.section h2 {
font-size: var(--font-size-3xl);
}
}
/* Tablet Styles */
@media (max-width: 1024px) and (min-width: 769px) {
.clients {
gap: 30px;
padding: var(--spacing-5xl) var(--spacing-lg);
}
.client-item img {
height: 160px;
max-width: 320px;
padding: var(--spacing-3xl);
}
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.segments {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.stats {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
}
}
@media (max-width: 768px) {
/* Header responsive improvements */
.header-contact {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
text-align: center;
}
.contact-left,
.contact-right {
justify-self: center;
}
.header-logo {
order: -1;
}
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #000000;
padding: 0;
border-radius: 0;
overflow: hidden;
}
.nav-links.active {
display: flex;
animation: slideDown 0.3s ease-out;
}
.nav-links li {
border-bottom: 1px solid #333333;
}
.nav-links li:last-child {
border-bottom: none;
}
.nav-links a {
padding: 20px 25px;
border-radius: 0;
color: white;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.footer-contact {
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
text-align: center;
}
.footer-contact .contact-item {
justify-self: center;
}
.footer-logo {
order: -1;
}
.btn {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.hero {
padding: 80px 0 60px;
min-height: 60vh;
}
.page-hero {
padding: 80px 0 50px;
}
.page-hero h1 {
font-size: 2.5rem;
}
.page-hero p {
font-size: 1.1rem;
}
/* Header responsive */
.header-top .container,
.header-top-bar .container {
flex-direction: column;
gap: 15px;
}
.header-contact {
flex-direction: column;
gap: 15px;
text-align: center;
}
.header-logo {
position: static;
transform: none;
order: -1;
}
.contact-left,
.contact-right {
justify-content: center;
padding: 0;
}
.logo,
.header-logo {
grid-column: 1;
order: -1;
}
.header-logo img,
.logo img {
height: 110px;
}
.hero-video {
display: none; /* Desabilita vídeo em mobile para economizar dados */
}
.hero-background::before {
display: block; /* Mostra apenas a imagem de fundo em mobile */
}
.hero {
min-height: 60vh;
padding: var(--spacing-5xl) 0 var(--spacing-4xl);
}
.hero h1 {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-xl);
}
.hero p {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-3xl);
}
.stats {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
margin: var(--spacing-2xl) 0;
}
.cards,
.certs {
grid-template-columns: 1fr;
}
.segments {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.segment {
padding: var(--spacing-xl);
}
.segment:hover {
transform: translateY(-6px) scale(1.01);
}
.section {
padding: var(--spacing-5xl) 0;
}
.section:first-of-type,
.solutions-section {
padding-top: var(--spacing-5xl);
}
.section h2 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-3xl);
}
/* Page-specific responsive */
.solutions-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.offices-grid {
grid-template-columns: 1fr;
}
.segments {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.segments-detailed {
gap: 20px;
}
.segment-detailed {
margin-bottom: 20px;
}
.segment-header {
padding: 20px;
flex-direction: column;
text-align: center;
gap: 15px;
}
.segment-content {
padding: 20px;
}
.cert-detailed {
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}
.cert-image-large {
text-align: center;
}
.cert-image-large img {
max-width: 150px;
}
.news-main {
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}
.contact-content {
grid-template-columns: 1fr;
gap: 30px;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-form,
.contact-info-section {
padding: 25px;
}
.newsletter-form {
flex-direction: column;
max-width: 300px;
}
.news-grid {
grid-template-columns: 1fr;
}
.clients {
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: var(--spacing-2xl) var(--spacing-md);
}
.client-item {
flex: 0 0 calc(50% - 15px);
}
.client-item img {
height: 120px;
max-width: 240px;
padding: var(--spacing-xl);
}
.cookie-actions {
flex-direction: column;
}
.section {
padding: 40px 0;
}
.section:first-of-type,
.solutions-section {
padding-top: 60px;
}
.section h2 {
font-size: 2rem;
}
/* Thank you page responsive */
.thank-you-hero {
padding: var(--spacing-5xl) 0;
min-height: 60vh;
}
.thank-you-content h1 {
font-size: var(--font-size-3xl);
}
.thank-you-content .lead {
font-size: var(--font-size-lg);
}
.next-steps,
.contact-urgency {
padding: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
}
.urgent-contacts {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.urgent-contact {
padding: var(--spacing-lg);
}
.return-actions {
flex-direction: column;
align-items: center;
}
.return-actions .btn {
width: 100%;
max-width: 300px;
}
/* Reviews section responsive */
.reviews-section {
padding: var(--spacing-5xl) 0;
}
.reviews-header {
margin-bottom: var(--spacing-3xl);
}
.rating-badge {
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-xl);
text-align: center;
}
.rating-info {
text-align: center;
}
.review-card {
flex: 0 0 calc(100% - 40px);
margin-right: var(--spacing-xl);
padding: var(--spacing-xl);
}
.review-header {
flex-direction: column;
gap: var(--spacing-md);
align-items: flex-start;
}
.reviewer-info {
width: 100%;
}
.review-time {
align-self: flex-end;
}
.carousel-controls {
gap: var(--spacing-lg);
margin-top: var(--spacing-2xl);
}
.carousel-btn {
width: 44px;
height: 44px;
font-size: var(--font-size-xl);
}
}
/* Tablet responsive for reviews */
@media (max-width: 1024px) and (min-width: 769px) {
.review-card {
flex: 0 0 calc(50% - 16px);
}
.rating-badge {
padding: var(--spacing-xl) var(--spacing-2xl);
}
}
/* Estilos para ícones SVG das redes sociais */
.social-icon svg {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.social-icon:hover svg {
transform: scale(1.1);
}
/* Estilos para ícones de contato */
.contact-icon svg {
width: 24px;
height: 24px;
color: white;
}
/* === PÁGINA DE SOLUÇÕES === */
.solutions-hero {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
color: white;
padding: var(--spacing-6xl) 0;
overflow: hidden;
position: relative;
}
.solutions-hero .hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--spacing-5xl);
align-items: center;
}
.solutions-hero .hero-text .hero-badge {
display: inline-block;
background: rgba(46, 184, 92, 0.9);
color: white;
padding: 10px 20px;
border-radius: 25px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-lg);
box-shadow: 0 4px 12px rgba(46, 184, 92, 0.3);
border: 1px solid rgba(46, 184, 92, 1);
}
.solutions-hero h1 {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-lg);
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
line-height: 1.1;
}
.solutions-hero .lead {
font-size: var(--font-size-xl);
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-2xl);
line-height: 1.6;
}
.hero-stats {
display: flex;
gap: var(--spacing-2xl);
margin-top: var(--spacing-2xl);
}
.stat-item {
text-align: center;
padding: var(--spacing-xl);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
flex: 1;
}
.stat-number {
display: block;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: #2EB85C;
margin-bottom: 8px;
}
.stat-label {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.hero-visual {
position: relative;
}
.hero-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.hero-image img {
width: 100%;
height: 350px;
object-fit: cover;
object-position: center;
border-radius: var(--radius-lg);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(46, 184, 92, 0.1) 0%, rgba(46, 184, 92, 0.05) 100%);
z-index: 2;
}
/* Floating cards removidos para melhor usabilidade */
/* Solutions Overview */
.solutions-overview {
padding: var(--spacing-6xl) 0;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-5xl);
}
.section-header h2 {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-lg);
}
.section-header p {
font-size: var(--font-size-lg);
color: var(--color-gray-600);
}
.solutions-tabs {
background: white;
border-radius: var(--radius-xl);
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.tab-navigation {
display: flex;
background: var(--color-gray-50);
padding: var(--spacing-md);
gap: var(--spacing-md);
}
.tab-btn {
flex: 1;
padding: var(--spacing-lg) var(--spacing-xl);
border: none;
background: transparent;
border-radius: var(--radius-md);
font-weight: var(--font-weight-medium);
color: var(--color-gray-600);
cursor: pointer;
transition: all 0.3s ease;
}
.tab-btn.active,
.tab-btn:hover {
background: var(--color-primary);
color: white;
}
.modal-content {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
padding: 40px 32px;
max-width: 600px;
width: 90vw;
min-height: 480px;
max-height: 98vh;
@media (max-width: 600px) {
.modal-content {
min-width: 100vw;
max-width: 100vw;
min-height: 98vh;
max-height: 98vh;
padding: 8px 2px;
}
}
overflow: visible;
position: relative;
z-index: 20000;
/* Garantir que dropdowns/selects abram por cima do modal */
select, .dropdown-menu, .custom-select, .modal-content select {
position: relative;
z-index: 21000;
}
/* Para selects nativos, garantir que o menu não seja cortado */
.modal-content select:focus {
outline: 2px solid var(--color-primary);
}
/* Para dropdowns customizados (Bootstrap/Tailwind) */
.dropdown-menu {
position: absolute !important;
left: 0;
top: 100%;
z-index: 21000 !important;
min-width: 100%;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
background: #fff;
border-radius: 8px;
overflow: visible;
}
/* Evitar corte em telas pequenas */
@media (max-width: 600px) {
.modal-content {
min-width: 98vw;
max-width: 98vw;
padding: 16px 4px;
}
.dropdown-menu {
min-width: 100vw;
left: -16px;
}
}
margin: 0;
position: fixed;
top: 32px;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 10001;
box-sizing: border-box;
overflow: visible;
}
}
.solution-badge {
display: inline-block;
background: rgba(46, 184, 92, 0.1);
color: var(--color-primary);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-lg);
}
.solution-badge.highlight-badge {
background: rgba(255, 193, 7, 0.2);
color: #856404;
}
.solution-detailed h3 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-lg);
}
.solution-description {
font-size: var(--font-size-lg);
color: var(--color-gray-600);
margin-bottom: var(--spacing-2xl);
line-height: 1.6;
}
.solution-highlights {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-2xl);
}
.highlight-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-lg);
}
.highlight-icon {
font-size: var(--font-size-2xl);
flex-shrink: 0;
}
.highlight-content h4 {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-xs);
}
.highlight-content p {
color: var(--color-gray-600);
font-size: var(--font-size-sm);
}
.solution-benefits h4 {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-lg);
}
.solution-benefits ul {
list-style: none;
padding: 0;
}
.solution-benefits li {
padding: var(--spacing-sm) 0;
position: relative;
padding-left: var(--spacing-xl);
}
.solution-benefits li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
.solution-visual {
position: relative;
}
.solution-visual img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: var(--radius-lg);
}
.stats-overlay {
position: absolute;
bottom: var(--spacing-lg);
left: var(--spacing-lg);
right: var(--spacing-lg);
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
display: flex;
gap: var(--spacing-xl);
}
.stats-overlay .stat {
text-align: center;
}
.stats-overlay .stat-number {
display: block;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.stats-overlay .stat-label {
font-size: var(--font-size-xs);
color: var(--color-gray-600);
}
/* Process Section */
.process-section {
background: var(--color-gray-50);
padding: var(--spacing-6xl) 0;
}
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-3xl);
}
.process-step {
text-align: center;
background: white;
padding: var(--spacing-3xl);
border-radius: var(--radius-lg);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.process-step:hover {
transform: translateY(-5px);
}
.step-number {
width: 60px;
height: 60px;
background: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0 auto var(--spacing-lg);
}
.step-content h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-md);
}
.step-content p {
color: var(--color-gray-600);
font-size: var(--font-size-sm);
}
/* === PÁGINA INCORPORADORA === */
.incorporadora-hero {
background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
padding: var(--spacing-6xl) 0;
color: white;
min-height: 80vh;
display: flex;
align-items: center;
}
.incorporadora-hero .hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--spacing-5xl);
align-items: center;
}
.incorporadora-hero .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
color: white;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-lg);
backdrop-filter: blur(10px);
}
.incorporadora-hero h1 {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-lg);
line-height: 1.1;
}
.incorporadora-hero .lead {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-2xl);
line-height: 1.6;
opacity: 0.9;
}
.hero-cta {
display: flex;
gap: var(--spacing-lg);
}
.hero-video {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.hero-video img {
width: 100%;
height: 300px;
object-fit: cover;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform 0.3s ease;
}
.play-button:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.awards-badge {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-lg);
background: rgba(255,255,255,0.95);
color: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--radius-md);
text-align: center;
backdrop-filter: blur(10px);
}
.badge-title {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}
.badge-subtitle {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
}
/* Diferenciais */
.diferenciais-section {
padding: var(--spacing-6xl) 0;
}
.diferenciais-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-2xl);
}
.diferencial-item {
background: white;
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
text-align: center;
transition: transform 0.3s ease;
}
.diferencial-item:hover {
transform: translateY(-5px);
}
.diferencial-icon {
margin-bottom: var(--spacing-lg);
}
.diferencial-item h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-md);
color: var(--color-primary);
}
.diferencial-item p {
color: var(--color-gray-600);
line-height: 1.6;
}
/* Empreendimentos */
.empreendimentos-section {
background: var(--color-gray-50);
padding: var(--spacing-6xl) 0;
}
.empreendimentos-filter {
display: flex;
justify-content: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-4xl);
}
.filter-btn {
padding: var(--spacing-md) var(--spacing-xl);
border: 2px solid var(--color-gray-200);
background: white;
border-radius: var(--radius-full);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn.active,
.filter-btn:hover {
border-color: var(--color-primary);
background: var(--color-primary);
color: white;
}
.empreendimentos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--spacing-2xl);
}
.empreendimento-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.empreendimento-card:hover {
transform: translateY(-5px);
}
.card-image {
position: relative;
height: 250px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.empreendimento-card:hover .card-image img {
transform: scale(1.05);
}
.card-badge {
position: absolute;
top: var(--spacing-lg);
left: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: white;
}
.card-badge.lancamento {
background: #ff6b6b;
}
.card-badge.obras {
background: #4ecdc4;
}
.card-badge.entregue {
background: var(--color-primary);
}
.card-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.empreendimento-card:hover .card-overlay {
opacity: 1;
}
.btn-white {
background: white;
color: var(--color-primary);
}
.card-content {
padding: var(--spacing-xl);
}
.card-content h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.location {
color: var(--color-gray-500);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-md);
}
.description {
color: var(--color-gray-600);
line-height: 1.6;
margin-bottom: var(--spacing-lg);
}
.card-details {
border-top: 1px solid var(--color-gray-200);
padding-top: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.detail {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-sm);
}
.label {
color: var(--color-gray-500);
font-size: var(--font-size-sm);
}
.value {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.card-price {
text-align: center;
padding: var(--spacing-lg);
background: var(--color-gray-50);
border-radius: var(--radius-md);
}
.price-from {
display: block;
color: var(--color-gray-500);
font-size: var(--font-size-sm);
}
.price-value {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.progress-bar {
background: var(--color-gray-200);
height: 8px;
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
margin-top: var(--spacing-lg);
}
.progress-fill {
height: 100%;
background: var(--color-primary);
transition: width 0.3s ease;
}
.progress-text {
position: absolute;
top: -25px;
right: 0;
font-size: var(--font-size-xs);
color: var(--color-gray-600);
}
.satisfaction-badge,
.early-bird {
text-align: center;
padding: var(--spacing-md);
background: rgba(46, 184, 92, 0.1);
border-radius: var(--radius-md);
}
.satisfaction-rate,
.discount {
display: block;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.satisfaction-text,
.early-text {
font-size: var(--font-size-sm);
color: var(--color-gray-600);
}
/* Processo de Compra */
.processo-compra {
padding: var(--spacing-6xl) 0;
}
.processo-steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: var(--spacing-xl);
align-items: center;
}
.step-item {
text-align: center;
}
.step-item .step-number {
width: 60px;
height: 60px;
background: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0 auto var(--spacing-lg);
}
.step-connector {
width: 100%;
height: 2px;
background: var(--color-gray-300);
position: relative;
}
.step-connector::after {
content: "";
position: absolute;
right: 0;
top: -4px;
width: 0;
height: 0;
border-left: 8px solid var(--color-gray-300);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* Contato Incorporadora */
.contato-incorporadora {
background: var(--color-gray-50);
padding: var(--spacing-6xl) 0;
}
.contato-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-5xl);
}
.contato-info h2 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-lg);
}
.contato-info p {
font-size: var(--font-size-lg);
color: var(--color-gray-600);
margin-bottom: var(--spacing-2xl);
line-height: 1.6;
}
.especialistas {
margin-bottom: var(--spacing-2xl);
}
.especialista {
display: flex;
align-items: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
padding: var(--spacing-lg);
background: white;
border-radius: var(--radius-lg);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.especialista img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.especialista-avatar {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.avatar-placeholder {
width: 60px;
height: 60px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
color: white;
}
/* Ícones inline para substituir emojis */
.location svg,
.especialista-info svg {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.especialista-info h4 {
margin-bottom: var(--spacing-xs);
}
.especialista-info p {
color: var(--color-gray-500);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-xs);
}
.contato-direto {
display: flex;
gap: var(--spacing-lg);
}
.btn-whatsapp {
background: #25D366;
color: white;
}
.btn-whatsapp:hover {
background: #20b858;
}
.contato-form {
background: white;
padding: var(--spacing-3xl);
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.incorporadora-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.btn-full {
width: 100%;
justify-content: center;
gap: var(--spacing-sm);
}
/* Responsive */
@media (max-width: 1024px) {
.solutions-hero .hero-content,
.incorporadora-hero .hero-content,
.solution-detailed,
.contato-content {
grid-template-columns: 1fr;
gap: var(--spacing-3xl);
}
.hero-stats {
justify-content: center;
}
/* Floating cards removidos */
.diferenciais-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.empreendimentos-grid {
grid-template-columns: 1fr;
}
.processo-steps {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.step-connector {
height: 40px;
width: 2px;
margin: 0 auto;
}
.step-connector::after {
top: auto;
bottom: -4px;
left: -4px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid var(--color-gray-300);
border-bottom: none;
}
}
@media (max-width: 768px) {
.solutions-hero,
.incorporadora-hero {
padding: var(--spacing-4xl) 0;
text-align: center;
}
.solutions-hero h1,
.incorporadora-hero h1 {
font-size: var(--font-size-3xl);
}
.hero-cta,
.contato-direto {
flex-direction: column;
align-items: center;
}
.tab-navigation {
flex-wrap: wrap;
}
.tab-content {
padding: var(--spacing-2xl);
}
.solution-highlights {
gap: var(--spacing-md);
}
.highlight-item {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
}
.process-steps {
gap: var(--spacing-md);
}
.empreendimentos-filter {
flex-wrap: wrap;
gap: var(--spacing-md);
}
.empreendimentos-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.incorporadora-form .form-row {
grid-template-columns: 1fr;
}
.especialista {
flex-direction: column;
text-align: center;
}
}
/* ===== PÁGINA DE SEGMENTOS ===== */
.segments-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
}
.segments-hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 2;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(46,184,92,0.4) 50%, rgba(0,0,0,0.85) 100%);
z-index: 2;
}
.segments-hero .container {
position: relative;
z-index: 3;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: white;
}
.hero-subtitle {
display: inline-block;
background: rgba(46, 184, 92, 0.2);
color: #2EB85C;
padding: 8px 16px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
border: 1px solid rgba(46, 184, 92, 0.3);
}
.segments-hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 30px;
background: linear-gradient(135deg, #fff 0%, #2EB85C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.segments-hero p {
font-size: 1.3rem;
line-height: 1.6;
margin-bottom: 50px;
opacity: 0.9;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 60px;
}
.hero-stat {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.hero-stat:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.08);
}
.hero-stat .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 800;
color: #2EB85C;
margin-bottom: 8px;
}
.hero-stat .stat-text {
font-size: 0.95rem;
opacity: 0.9;
}
.segments-main {
padding: 100px 0;
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}
.section-header {
text-align: center;
max-width: 600px;
margin: 0 auto 80px;
}
.section-header h2 {
font-size: 2.8rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.section-header p {
font-size: 1.2rem;
color: #666;
line-height: 1.6;
}
.segments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.segment-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
transition: all 0.4s ease;
border: 1px solid rgba(46, 184, 92, 0.1);
position: relative;
}
.segment-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(46, 184, 92, 0.15);
border-color: rgba(46, 184, 92, 0.3);
}
.segment-image {
position: relative;
height: 200px;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.segment-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(46,184,92,0.85) 0%, rgba(39,174,96,0.85) 100%);
}
.segment-icon {
width: 60px;
height: 60px;
color: white;
position: relative;
z-index: 2;
opacity: 0.9;
}
.segment-info {
padding: 30px;
}
.segment-info h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
line-height: 1.3;
}
.segment-info > p {
color: #666;
line-height: 1.6;
margin-bottom: 25px;
}
.segment-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
}
.feature-tag {
background: rgba(46, 184, 92, 0.1);
color: #2EB85C;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(46, 184, 92, 0.2);
}
.regulation-badge {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ff6b35, #f7931e);
color: white;
padding: 10px 15px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
width: fit-content;
}
.regulation-badge svg {
width: 16px;
height: 16px;
}
.segment-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 15px 20px;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.segment-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(46, 184, 92, 0.3);
background: linear-gradient(135deg, #27AE60 0%, #2EB85C 100%);
}
.segment-btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.segment-btn:hover svg {
transform: translateX(5px);
}
.excellence-section {
padding: 100px 0;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: white;
position: relative;
overflow: hidden;
}
.excellence-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.excellence-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
.excellence-text h2 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 25px;
background: linear-gradient(135deg, #fff 0%, #2EB85C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
line-height: 1.2;
}
.excellence-text > p {
font-size: 1.2rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 50px;
}
.excellence-stats {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}
.excellence-stats .stat-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 30px;
background: rgba(255, 255, 255, 0.08);
border-radius: 20px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.4s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.excellence-stats .stat-item:hover {
transform: translateX(10px);
background: rgba(255, 255, 255, 0.08);
}
.stat-icon {
width: 24px;
height: 24px;
color: #2EB85C;
flex-shrink: 0;
margin-top: 5px;
}
.stat-content {
flex: 1;
}
.stat-content .stat-number {
display: block;
font-size: 1.8rem;
font-weight: 800;
color: #2EB85C;
margin-bottom: 5px;
}
.stat-content .stat-label {
display: block;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.stat-content .stat-desc {
font-size: 0.9rem;
opacity: 0.7;
}
.excellence-visual {
position: relative;
}
.excellence-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.excellence-card .card-header h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 30px;
color: #2EB85C;
}
.presence-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.presence-item:last-child {
border-bottom: none;
}
.presence-item .region {
font-weight: 600;
color: #2EB85C;
min-width: 100px;
}
.presence-item .cities {
font-size: 0.9rem;
opacity: 0.8;
text-align: right;
}
/* ===== PÁGINA DE NOTÍCIAS - IMAGENS ===== */
.news-featured .news-main {
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.news-image {
position: relative;
height: 300px;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-main:hover .news-image img {
transform: scale(1.05);
}
.news-image .news-date {
position: absolute;
top: 20px;
left: 20px;
background: rgba(46, 184, 92, 0.9);
color: white;
padding: 12px 16px;
border-radius: 10px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.news-image .news-date .day {
display: block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.news-image .news-date .month {
display: block;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
}
.news-card {
position: relative;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid rgba(46, 184, 92, 0.1);
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(46, 184, 92, 0.15);
}
.news-card-image {
position: relative;
height: 200px;
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-card:hover .news-card-image img {
transform: scale(1.1);
}
.news-card-image .news-date {
position: absolute;
top: 15px;
right: 15px;
background: rgba(46, 184, 92, 0.9);
color: white;
padding: 8px 12px;
border-radius: 8px;
text-align: center;
font-size: 0.9rem;
backdrop-filter: blur(10px);
}
.news-card-image .news-date .day {
display: block;
font-weight: 700;
line-height: 1;
}
.news-card-image .news-date .month {
display: block;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
opacity: 0.9;
}
.news-card-content {
padding: 25px;
}
.news-card-content h3 {
color: #1a1a1a;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
}
.news-card-content p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.news-card-content .link {
color: #2EB85C;
font-weight: 600;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.news-card-content .link:hover {
color: #27AE60;
}
/* Garantir que todas as imagens carreguem corretamente */
.news-card-image img,
.news-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: #f8f9fa;
}
/* Fallback para cards sem imagem */
.news-card:not(:has(.news-card-image)) {
border-top: 4px solid #2EB85C;
}
.news-card:not(:has(.news-card-image)) .news-date {
background: #2EB85C;
color: white;
padding: 15px;
border-radius: 10px 10px 0 0;
text-align: center;
margin-bottom: 0;
}
.news-card:not(:has(.news-card-image)) .news-date .day {
display: block;
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
}
.news-card:not(:has(.news-card-image)) .news-date .month {
display: block;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
padding: 18px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
background: white;
border-color: rgba(255, 255, 255, 0.4);
}
.cta-btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.cta-btn:hover svg {
transform: translateX(5px);
}
/* ===== PÁGINAS DE SERVIÇOS ===== */
.service-hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Estilos específicos para página soluções */
.solutions-hero .hero-content {
position: relative;
z-index: 4;
color: white;
}
.solutions-hero .hero-text {
position: relative;
z-index: 5;
}
.solutions-hero h1,
.solutions-hero .lead,
.solutions-hero .hero-badge {
color: white !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.solutions-hero .stat-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.solutions-hero .stat-number {
color: #2EB85C !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.solutions-hero .stat-label {
color: white !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.service-hero .hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.service-hero .hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-hero .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(46,184,92,0.4) 50%, rgba(0,0,0,0.8) 100%);
z-index: 2;
}
.service-hero .container {
position: relative;
z-index: 3;
}
.hero-breadcrumb {
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.hero-breadcrumb a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.hero-breadcrumb a:hover {
color: #2EB85C;
}
.hero-breadcrumb span {
margin: 0 8px;
}
.service-hero h1 {
font-size: 3.5rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.6;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.stat-card {
text-align: center;
padding: 30px 20px;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
border-color: rgba(46, 184, 92, 0.4);
}
.stat-card .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 800;
color: #2EB85C;
margin-bottom: 8px;
}
.stat-card .stat-label {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
font-weight: 500;
}
.how-it-works {
padding: 100px 0;
background: #f8f9fa;
}
.process-timeline {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
align-items: start;
}
.process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #f0f0f0;
transition: all 0.3s ease;
position: relative;
}
.process-step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(46, 184, 92, 0.15);
border-color: #2EB85C;
}
.step-number {
width: 90px;
height: 90px;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
box-shadow: 0 10px 30px rgba(46, 184, 92, 0.4);
margin-bottom: 25px;
position: relative;
z-index: 2;
}
.step-content h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.step-content p {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
font-size: 0.95rem;
}
.step-content ul {
list-style: none;
padding: 0;
}
.step-content ul li {
position: relative;
padding-left: 25px;
margin-bottom: 8px;
color: #666;
}
.step-content ul li::before {
content: '✓';
position: absolute;
left: 0;
color: #2EB85C;
font-weight: 600;
}
.services-detailed {
padding: 100px 0;
background: white;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 60px;
}
.service-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid rgba(46, 184, 92, 0.1);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(46, 184, 92, 0.15);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.service-icon svg {
width: 30px;
height: 30px;
color: white;
}
.service-card h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.service-card p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.regulation-banner {
background: linear-gradient(135deg, #ff6b35, #f7931e);
color: white;
padding: 60px 0;
}
.regulation-content {
display: flex;
align-items: center;
gap: 30px;
}
.regulation-icon svg {
width: 60px;
height: 60px;
}
.regulation-text h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 15px;
}
.hierarchy-levels,
.construction-types,
.sectors-served,
.modalities-section {
padding: 80px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.levels-grid,
.types-grid,
.sectors-grid,
.modalities-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 50px;
position: relative;
z-index: 2;
}
.level-card,
.type-card,
.sector-card,
.modality-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 1px solid #f0f0f0;
transition: all 0.3s ease;
position: relative;
z-index: 3;
}
.type-card:hover,
.level-card:hover,
.sector-card:hover,
.modality-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(46, 184, 92, 0.15);
border-color: #2EB85C;
}
.level-examples,
.type-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 15px;
}
.level-examples span,
.type-features span {
background: rgba(46, 184, 92, 0.1);
color: #2EB85C;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
/* Remove any decorative elements that might cause visual issues */
.construction-types *::before,
.construction-types *::after {
display: none !important;
}
.types-grid::before,
.types-grid::after {
display: none !important;
}
/* FAQ Styles */
.faq-categories {
padding: 60px 0;
background: white;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.category-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 20px;
background: white;
border: 2px solid #f0f0f0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
color: #666;
}
.category-btn:hover {
border-color: #2EB85C;
color: #2EB85C;
}
.category-btn.active {
background: #2EB85C;
border-color: #2EB85C;
color: white;
}
.faq-content {
padding: 80px 0;
background: #f8f9fa;
}
.faq-group {
margin-bottom: 60px;
}
.faq-group h2 {
font-size: 2rem;
color: #1a1a1a;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #2EB85C;
}
.faq-item {
background: white;
margin-bottom: 15px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
overflow: hidden;
}
.faq-question {
width: 100%;
padding: 25px 30px;
background: none;
border: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: #1a1a1a;
transition: all 0.3s ease;
}
.faq-question:hover {
background: #f8f9fa;
}
.faq-question i {
color: #2EB85C;
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer p {
padding: 0 30px 25px;
color: #666;
line-height: 1.6;
margin: 0;
}
.faq-contact {
padding: 80px 0;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
color: white;
text-align: center;
}
.contact-content h2 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.contact-content p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
}
.contact-options {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
}
.contact-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 30px;
background: rgba(255,255,255,0.15);
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50px;
color: white;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.contact-btn:hover {
background: white;
color: #2EB85C;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.categories-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.category-btn {
padding: 12px 15px;
font-size: 0.9rem;
}
.faq-question {
padding: 20px;
font-size: 1rem;
}
.faq-answer p {
padding: 0 20px 20px;
}
.contact-options {
flex-direction: column;
align-items: center;
}
.contact-content h2 {
font-size: 2rem;
}
}
/* Ticket System Styles */
.ticket-hero {
background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
color: white;
}
.ticket-login {
padding: 80px 0;
background: #f8f9fa;
min-height: 70vh;
display: flex;
align-items: center;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
width: 100%;
max-width: 450px;
overflow-y: auto;
max-height: 95vh;
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h2 {
color: #1a1a1a;
margin-bottom: 10px;
}
.login-tabs {
display: flex;
margin-bottom: 30px;
border-radius: 12px;
background: #f8f9fa;
padding: 5px;
}
.tab-btn {
flex: 1;
padding: 12px 8px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
color: #666;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.tab-btn.active {
background: #2EB85C;
color: white;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #f0f0f0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #2EB85C;
}
.login-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #2EB85C 0%, #27AE60 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(46, 184, 92, 0.3);
}
.login-help {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
font-size: 0.9rem;
color: #666;
text-align: center;
}
.ticket-dashboard {
padding: 40px 0 80px;
background: #f8f9fa;
min-height: 80vh;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding: 25px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
display: flex;
align-items: center;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.stat-icon.aberto {
background: linear-gradient(135deg, #3498db, #2980b9);
}
.stat-icon.em-andamento {
background: linear-gradient(135deg, #f39c12, #e67e22);
}
.stat-icon.resolvido {
background: linear-gradient(135deg, #2EB85C, #27ae60);
}
.stat-icon.total {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.stat-content h3 {
margin: 0 0 5px 0;
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
}
.stat-content p {
margin: 0;
color: #666;
font-weight: 500;
}
/* Dashboard visibility classes */
.dashboard-hidden {
display: none !important;
}
.export-hidden {
display: none !important;
}
/* Modal visibility class */
.modal-active {
display: flex !important;
}
/* Download link hidden */
.download-link-hidden {
display: none !important;
}
/* Register Section */
.ticket-register {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: 80vh;
}
/* Password Reset Section */
.ticket-reset {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: 80vh;
}
.reset-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
}
.reset-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 450px;
}
.reset-header {
text-align: center;
margin-bottom: 30px;
}
.reset-header h2 {
color: #1a1a1a;
margin-bottom: 10px;
}
.reset-header p {
color: #666;
margin: 0;
}
.reset-form .form-group,
.verification-form .form-group {
margin-bottom: 20px;
}
.reset-form label,
.verification-form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.reset-form input,
.reset-form select,
.verification-form input {
width: 100%;
padding: 12px 15px;
border: 2px solid #f0f0f0;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.reset-form input:focus,
.reset-form select:focus,
.verification-form input:focus {
outline: none;
border-color: #2EB85C;
}
.reset-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.reset-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}
.reset-help {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.reset-help a {
color: #2EB85C;
text-decoration: none;
font-weight: 600;
}
.reset-help a:hover {
text-decoration: underline;
}
.user-verification {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
border-left: 4px solid #2EB85C;
}
.user-verification h4 {
color: #1a1a1a;
margin: 0 0 15px 0;
}
.user-verification p {
margin: 8px 0;
color: #555;
}
.verification-note {
font-style: italic;
color: #666 !important;
font-size: 0.9rem;
margin-top: 15px !important;
}
.register-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 600px;
}
.register-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
.register-header {
text-align: center;
margin-bottom: 30px;
}
.register-header h2 {
color: #1a1a1a;
margin-bottom: 10px;
}
.register-header p {
color: #666;
margin: 0;
}
.register-form .form-group {
margin-bottom: 20px;
}
.register-form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.register-form input,
.register-form select {
width: 100%;
padding: 12px 15px;
border: 2px solid #f0f0f0;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.register-form input:focus,
.register-form select:focus {
outline: none;
border-color: #2EB85C;
}
.register-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #2EB85C, #27ae60);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(46, 184, 92, 0.3);
}
.register-help {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.register-help p {
color: #666;
font-size: 0.9rem;
margin: 0;
}
.user-info {
display: flex;
align-items: center;
gap: 15px;
}
.user-avatar i {
font-size: 3rem;
color: #2EB85C;
}
.user-details h3 {
margin: 0;
color: #1a1a1a;
}
.user-role {
background: #2EB85C;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.logout-btn {
padding: 10px 20px;
background: #dc3545;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.logout-btn:hover {
background: #c82333;
}
.action-buttons {
display: flex;
gap: 15px;
margin-bottom: 30px;
}
.action-btn {
padding: 12px 25px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.action-btn.primary {
background: #2EB85C;
color: white;
}
.action-btn.primary:hover {
background: #27AE60;
}
.action-btn:not(.primary) {
background: white;
color: #666;
border: 2px solid #f0f0f0;
}
.tickets-filter {
margin-bottom: 30px;
}
.filter-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 20px;
background: white;
border: 2px solid #f0f0f0;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
color: #666;
transition: all 0.3s ease;
}
.filter-btn.active {
background: #2EB85C;
color: white;
border-color: #2EB85C;
}
.tickets-list {
display: grid;
gap: 20px;
}
.ticket-item {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border-left: 4px solid #f0f0f0;
transition: all 0.3s ease;
}
.ticket-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.ticket-item.aberto {
border-left-color: #dc3545;
}
.ticket-item.em-andamento {
border-left-color: #ffc107;
}
.ticket-item.resolvido {
border-left-color: #28a745;
}
.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.ticket-id {
font-weight: 700;
color: #2EB85C;
font-size: 1.1rem;
}
.ticket-badges {
display: flex;
gap: 10px;
}
.status-badge,
.priority-badge {
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge.aberto {
background: #dc3545;
color: white;
}
.status-badge.em-andamento {
background: #ffc107;
color: #333;
}
.status-badge.resolvido {
background: #28a745;
color: white;
}
.priority-badge.baixa {
background: #e9ecef;
color: #666;
}
.priority-badge.media {
background: #fff3cd;
color: #856404;
}
.priority-badge.alta {
background: #f8d7da;
color: #721c24;
}
.priority-badge.urgente {
background: #dc3545;
color: white;
}
.ticket-content h4 {
margin: 0 0 10px 0;
color: #1a1a1a;
}
.ticket-description-preview {
color: #666;
font-size: 0.9rem;
line-height: 1.4;
margin: 0 0 15px 0;
font-style: italic;
}
.ticket-meta {
display: flex;
gap: 20px;
color: #666;
font-size: 0.9rem;
flex-wrap: wrap;
}
.ticket-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.ticket-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
.btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
}
.btn.primary {
background: #2EB85C;
color: white;
}
.btn.secondary {
background: #6c757d;
color: white;
}
.btn.small {
padding: 6px 12px;
font-size: 0.9rem;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
border-radius: 15px;
width: 95%;
max-width: 600px;
max-height: 95vh;
overflow-y: auto;
margin: 10px auto;
}
.modal-content.large {
max-width: 800px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
border-bottom: 1px solid #f0f0f0;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
}
.ticket-form {
padding: 25px;
}
.form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 30px;
}
.ticket-detail-content {
padding: 25px;
}
.ticket-detail-info {
display: grid;
gap: 15px;
margin-bottom: 25px;
}
.detail-row {
display: flex;
gap: 10px;
}
.ticket-description,
.ticket-response {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
padding: 40px 32px;
max-width: 600px;
width: 100%;
margin: 60px auto;
position: relative;
z-index: 10001;
box-sizing: border-box;
}
@media (max-width: 700px) {
.modal-content {
max-width: 98vw;
padding: 24px 8px;
margin: 10px auto;
max-height: 98vh;
overflow-y: auto;
}
}
@media (min-width: 701px) {
.modal-content {
left: 50%;
transform: translateX(-50%);
position: absolute;
right: auto;
}
}
@media (max-width: 768px) {
.login-card {
margin: 20px;
padding: 30px 20px;
}
.tab-btn {
font-size: 0.8rem;
padding: 10px 5px;
}
.dashboard-header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.action-buttons {
flex-direction: column;
}
.ticket-meta {
flex-direction: column;
gap: 10px;
}
.modal-content {
width: 95%;
margin: 10px;
}
}
/* Layout específico para process-timeline */
@media (max-width: 900px) {
.process-timeline {
grid-template-columns: 1fr !important;
gap: 30px;
}
}
/* Responsividade para Segmentos */
@media (max-width: 1024px) {
.segments-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.excellence-content {
grid-template-columns: 1fr;
gap: 50px;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 768px) {
.segments-hero h1 {
font-size: 2.5rem;
}
.segments-hero p {
font-size: 1.1rem;
}
.section-header h2 {
font-size: 2.2rem;
}
.excellence-text h2 {
font-size: 2.2rem;
}
.excellence-card {
padding: 25px;
}
.presence-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.presence-item .cities {
text-align: left;
}
/* Responsividade para notícias */
.news-image {
height: 220px;
}
.news-card-image {
height: 160px;
}
.news-grid {
grid-template-columns: 1fr;
gap: 20px;
}
/* ===== PÁGINA CERTIFICAÇÕES ===== */
.page-hero {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: white;
padding: 100px 0 80px;
text-align: center;
}
.page-hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
}
.page-hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
opacity: 0.9;
}
.stats-section {
background: var(--color-primary);
color: white;
padding: 80px 0;
text-align: center;
}
.stats-section h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 20px;
}
.stats-section p {
font-size: 1.1rem;
margin-bottom: 60px;
opacity: 0.9;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
max-width: 900px;
margin: 0 auto;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 4rem;
font-weight: 900;
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}
.certifications-detailed {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.certifications-detailed .section-header {
padding: 40px 0;
min-height: 100vh;
display: flex;
align-items: flex-start;
margin-bottom: 80px;
}
.certifications-detailed .section-header h2 {
font-size: 3rem;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 20px;
}
.certifications-detailed .section-header p {
font-size: 1.2rem;
color: #6c757d;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.certifications-grid {
display: grid;
grid-template-columns: 1fr;
gap: 60px;
margin-top: 60px;
}
.cert-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 50px rgba(0,0,0,0.1);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.cert-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 70px rgba(46, 184, 92, 0.15);
}
.cert-header {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 2px solid #f0f0f0;
}
.cert-image {
width: 120px;
height: 120px;
background: #f8f9fa;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border: 2px solid #e9ecef;
}
.cert-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.cert-title h3 {
font-size: 2rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.cert-category {
background: linear-gradient(135deg, #2EB85C, #27AE60);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.cert-benefits {
margin-top: 30px;
padding: 25px;
background: #f8f9fa;
border-radius: 15px;
border-left: 4px solid #2EB85C;
}
.cert-benefits h4 {
color: #2EB85C;
font-weight: 600;
margin-bottom: 15px;
}
.cert-benefits ul {
list-style: none;
padding: 0;
}
.cert-benefits ul li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #666;
}
.cert-benefits ul li::before {
content: '✓';
position: absolute;
left: 0;
color: #2EB85C;
font-weight: 600;
}
/* Responsividade para páginas de serviços - Mobile */
.service-hero h1 {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.stat-card {
padding: 20px;
}
.stat-card .stat-number {
font-size: 2rem;
}
.process-timeline {
grid-template-columns: 1fr;
gap: 30px;
}
.process-step {
padding: 25px;
}
/* Certificações responsivo */
.page-hero {
padding: 80px 0 60px;
}
.page-hero h1 {
font-size: 2.5rem;
}
.page-hero p {
font-size: 1.1rem;
}
.stats-section {
padding: 60px 0;
}
.stats-section h2 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.stat-number {
font-size: 3rem;
}
.step-number {
width: 60px;
height: 60px;
margin: 0 auto 20px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.service-card {
padding: 30px 25px;
}
.levels-grid,
.types-grid,
.sectors-grid,
.modalities-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.type-card,
.level-card,
.sector-card,
.modality-card {
padding: 25px;
}
.regulation-content {
flex-direction: column;
text-align: center;
gap: 20px;
}
.regulation-text h2 {
font-size: 1.5rem;
}
}
/* Media queries para páginas de serviços - Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
.services-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.levels-grid,
.types-grid,
.sectors-grid,
.modalities-grid {
grid-template-columns: 1fr;
gap: 25px;
gap: 20px;
}
.hero-stats {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* ===== MODERN TECH STYLES ===== */
/* Floating Shapes Animation */
.floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
.shape {
position: absolute;
background: linear-gradient(45deg, rgba(46, 184, 92, 0.1), rgba(44, 90, 160, 0.1));
border-radius: 50%;
animation: float 20s infinite linear;
}
.shape-1 {
width: 120px;
height: 120px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 80px;
height: 80px;
top: 70%;
left: 80%;
animation-delay: -5s;
}
.shape-3 {
width: 60px;
height: 60px;
top: 10%;
left: 70%;
animation-delay: -10s;
}
.shape-4 {
width: 100px;
height: 100px;
top: 60%;
left: 20%;
animation-delay: -15s;
}
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
opacity: 0.7;
}
50% {
transform: translateY(-30px) rotate(180deg);
opacity: 1;
}
100% {
transform: translateY(0px) rotate(360deg);
opacity: 0.7;
}
}
/* Tech Badge */
.tech-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(46, 184, 92, 0.2);
border: 1px solid rgba(46, 184, 92, 0.5);
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 30px;
backdrop-filter: blur(10px);
animation: slideInDown 1s ease-out;
}
.pulse-dot {
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(46, 184, 92, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(46, 184, 92, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(46, 184, 92, 0);
}
}
/* Glitch Text Effect */
.glitch-text {
font-size: 4rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 30px;
position: relative;
color: var(--color-white);
animation: slideInUp 1s ease-out 0.3s both;
}
.glitch-text:hover {
animation: glitch 0.5s;
}
@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
/* Typewriter Effect */
.typewriter-text {
font-size: 1.3rem;
line-height: 1.6;
margin-bottom: 50px;
opacity: 0.9;
animation: slideInUp 1s ease-out 0.6s both;
}
/* Modern Stats */
.modern-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 60px 0;
animation: slideInUp 1s ease-out 0.9s both;
}
.modern-stat {
position: relative;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px 20px;
transition: all 0.3s ease;
overflow: hidden;
}
.modern-stat:hover {
transform: translateY(-10px) scale(1.02);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(46, 184, 92, 0.5);
box-shadow: 0 20px 40px rgba(46, 184, 92, 0.2);
}
.stat-bg-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(46, 184, 92, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.modern-stat:hover .stat-bg-effect {
transform: translateX(100%);
}
/* Counter Animation */
.counter {
animation: countUp 2s ease-out;
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Modern Button */
.modern-btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 15px 40px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
overflow: hidden;
margin-right: 30px;
animation: slideInUp 1s ease-out 1.2s both;
}
.modern-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(46, 184, 92, 0.4);
}
.btn-bg {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.modern-btn:hover .btn-bg {
left: 100%;
}
/* Scroll Indicator */
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0.7;
animation: fadeIn 1s ease-out 1.5s both;
}
.mouse {
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
position: relative;
}
.wheel {
width: 2px;
height: 6px;
background: rgba(255, 255, 255, 0.5);
border-radius: 1px;
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
animation: scroll 2s infinite;
}
@keyframes scroll {
0% {
top: 6px;
opacity: 1;
}
100% {
top: 20px;
opacity: 0;
}
}
/* Hero CTA Container */
.hero-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-top: 40px;
}
/* Slide Animations */
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Responsive Modern Hero */
@media (max-width: 768px) {
.modern-hero {
min-height: 90vh;
padding: 60px 0;
}
.glitch-text {
font-size: 2.5rem;
}
.typewriter-text {
font-size: 1.1rem;
}
.modern-stats {
grid-template-columns: 1fr;
gap: 20px;
}
.hero-cta {
flex-direction: column;
gap: 20px;
}
.floating-shapes .shape {
display: none;
}
}
/* Estilos para validações e contadores de caracteres */
.char-counter {
color: var(--color-gray-600) !important;
font-size: 0.75rem !important;
display: block !important;
margin-top: 4px !important;
text-align: right !important;
font-family: var(--font-secondary);
}
.char-counter.warning {
color: var(--color-warning) !important;
}
.char-counter.danger {
color: var(--color-danger) !important;
}
/* Melhorias nos campos de entrada */
.form-group input:invalid {
border-color: var(--color-danger);
box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.1);
}
.form-group input:valid {
border-color: var(--color-success);
}
.form-group textarea:invalid {
border-color: var(--color-danger);
box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.1);
}
.form-group textarea:valid {
border-color: var(--color-success);
}
/* Indicador de força da senha */
.password-strength {
margin-top: 5px;
height: 4px;
border-radius: 2px;
background: var(--color-gray-200);
overflow: hidden;
}
.password-strength-bar {
height: 100%;
transition: all 0.3s ease;
border-radius: 2px;
}
.strength-weak { background: var(--color-danger); width: 25%; }
.strength-fair { background: var(--color-warning); width: 50%; }
.strength-good { background: var(--color-info); width: 75%; }
.strength-strong { background: var(--color-success); width: 100%; }
/* Tooltips para validação */
.field-tooltip {
position: absolute;
background: var(--color-gray-900);
color: var(--color-white);
padding: 8px 12px;
border-radius: 4px;
font-size: 0.75rem;
z-index: 1000;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.field-tooltip.show {
opacity: 1;
}
.field-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--color-gray-900);
}
/* Estilos para primeiro acesso */
.tab-btn.primeiro-acesso {
background: linear-gradient(135deg, var(--color-info), var(--color-primary));
color: white;
font-weight: 600;
}
.tab-btn.primeiro-acesso:hover {
background: linear-gradient(135deg, var(--color-primary), var(--color-info));
transform: translateY(-2px);
}
.tab-btn.primeiro-acesso.active {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-info));
box-shadow: 0 4px 12px rgba(46, 184, 92, 0.3);
}
.primeiro-acesso-form {
animation: slideIn 0.3s ease;
}
.form-hidden {
display: none !important;
}
.helper-text {
color: #666;
font-size: 0.85em;
margin-top: 4px;
display: block;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Login tabs responsivo */
@media (max-width: 768px) {
.login-tabs {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.tab-btn {
padding: 12px 8px;
font-size: 0.85rem;
}
.tab-btn i {
margin-right: 4px;
}
}
/* ========================================
TRABALHE CONOSCO PAGE
======================================== */
/* ========================================
TRABALHE CONOSCO PAGE
======================================== */
/* Hero Trabalhe Conosco */
.hero-trabalhe-conosco {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(46, 184, 92, 0.9), rgba(44, 90, 160, 0.9)),
url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--color-white);
text-align: center;
padding: 100px 20px;
}
.hero-trabalhe-conosco .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.hero-trabalhe-conosco .container {
position: relative;
z-index: 2;
}
.hero-trabalhe-conosco h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
letter-spacing: -1px;
}
.hero-trabalhe-conosco .hero-subtitle {
font-size: 1.5rem;
margin-bottom: 40px;
opacity: 0.95;
text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.btn-hero-primary,
.btn-hero-secondary {
padding: 18px 40px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-hero-primary {
background: var(--color-white);
color: var(--color-primary);
}
.btn-hero-primary:hover {
background: var(--color-primary);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.btn-hero-secondary {
background: transparent;
color: var(--color-white);
border: 3px solid var(--color-white);
}
.btn-hero-secondary:hover {
background: var(--color-white);
color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.trabalhe-conosco-section {
padding: 80px 0;
background-color: var(--color-gray-100);
}
.intro-content {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
}
.intro-content h2 {
font-size: 2.5rem;
color: var(--color-dark);
margin-bottom: 20px;
}
.intro-content p {
font-size: 1.1rem;
color: var(--color-gray-700);
line-height: 1.8;
}
/* Benefícios */
.beneficios-section {
margin-bottom: 80px;
}
.beneficios-section h2 {
text-align: center;
font-size: 2.5rem;
color: var(--color-dark);
margin-bottom: 50px;
}
.beneficios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.beneficio-card {
background: var(--color-white);
padding: 40px 30px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.beneficio-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(46, 184, 92, 0.15);
}
.beneficio-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.beneficio-icon i {
font-size: 2rem;
color: var(--color-white);
}
.beneficio-card h3 {
font-size: 1.3rem;
color: var(--color-dark);
margin-bottom: 10px;
}
.beneficio-card p {
color: var(--color-gray-600);
line-height: 1.6;
}
/* Candidatura */
.candidatura-section {
background: var(--color-white);
padding: 60px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-bottom: 80px;
}
.candidatura-section h2 {
text-align: center;
font-size: 2.5rem;
color: var(--color-dark);
margin-bottom: 10px;
}
.section-subtitle {
text-align: center;
color: var(--color-gray-600);
font-size: 1.1rem;
margin-bottom: 40px;
}
.candidatura-form {
max-width: 800px;
margin: 0 auto;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
color: var(--color-dark);
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--color-gray-300);
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: var(--font-primary);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(46, 184, 92, 0.1);
}
.form-group small {
display: block;
margin-top: 5px;
color: var(--color-gray-600);
font-size: 0.85rem;
}
.file-upload {
position: relative;
}
.file-upload input[type="file"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.file-upload-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px;
border: 2px dashed var(--color-gray-400);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: var(--color-gray-100);
}
.file-upload-label:hover {
border-color: var(--color-primary);
background: rgba(46, 184, 92, 0.05);
}
.file-upload-label i {
font-size: 1.5rem;
color: var(--color-primary);
}
.file-upload-label span {
color: var(--color-gray-700);
font-weight: 500;
}
.file-name {
display: block;
margin-top: 10px;
color: var(--color-primary);
font-weight: 500;
}
.checkbox-group {
margin-top: 30px;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-weight: normal;
}
.checkbox-label input[type="checkbox"] {
width: auto;
margin-top: 3px;
cursor: pointer;
accent-color: var(--color-primary);
}
.checkbox-label span {
color: var(--color-gray-700);
line-height: 1.6;
}
.candidatura-form .btn {
width: 100%;
margin-top: 20px;
padding: 16px;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Vagas */
.vagas-section {
margin-bottom: 40px;
}
.vagas-section h2 {
text-align: center;
font-size: 2.5rem;
color: var(--color-dark);
margin-bottom: 10px;
}
.vagas-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-top: 40px;
}
.vaga-card {
background: var(--color-white);
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.vaga-card:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
transform: translateY(-3px);
}
.vaga-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
gap: 10px;
}
.vaga-header h3 {
font-size: 1.4rem;
color: var(--color-dark);
margin: 0;
flex: 1;
}
.vaga-badge {
background: var(--color-primary);
color: var(--color-white);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.vaga-info {
margin-bottom: 15px;
}
.vaga-info p {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-gray-600);
font-size: 0.9rem;
margin-bottom: 8px;
}
.vaga-info i {
color: var(--color-primary);
width: 16px;
}
.vaga-descricao {
color: var(--color-gray-700);
line-height: 1.6;
margin-bottom: 20px;
}
.vaga-card .btn {
width: 100%;
}
/* LinkedIn CTA */
.linkedin-cta {
text-align: center;
margin-top: 60px;
padding: 40px;
background: linear-gradient(135deg, #0077B5, #005885);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 119, 181, 0.3);
}
.btn-linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--color-white);
color: #0077B5;
padding: 18px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
border: 3px solid transparent;
}
.btn-linkedin:hover {
background: #0077B5;
color: var(--color-white);
border-color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.btn-linkedin i {
font-size: 1.5rem;
}
.linkedin-subtitle {
color: var(--color-white);
margin-top: 15px;
font-size: 0.95rem;
opacity: 0.95;
}
/* Responsive */
@media (max-width: 768px) {
.hero-trabalhe-conosco {
min-height: 500px;
padding: 60px 20px;
}
.hero-trabalhe-conosco h1 {
font-size: 2.5rem;
}
.hero-trabalhe-conosco .hero-subtitle {
font-size: 1.1rem;
}
.hero-cta {
flex-direction: column;
gap: 15px;
}
.btn-hero-primary,
.btn-hero-secondary {
width: 100%;
max-width: 300px;
}
.trabalhe-conosco-section {
padding: 40px 0;
}
.intro-content h2,
.beneficios-section h2,
.candidatura-section h2,
.vagas-section h2 {
font-size: 1.8rem;
}
.beneficios-grid {
grid-template-columns: 1fr;
}
.candidatura-section {
padding: 30px 20px;
}
.form-row {
grid-template-columns: 1fr;
}
.vagas-list {
grid-template-columns: 1fr;
}
}