/* Reset e Base - OTIMIZADO PARA MOBILE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Otimizações de Performance */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Reduzir animações em dispositivos com preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Otimizações de performance para mobile */
html {
scroll-behavior: smooth;
font-size: 16px;
/* Prevenção de zoom em iOS */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
color: var(--gray-800);
background: linear-gradient(135deg, var(--gray-50) 0%, var(--light-blue) 100%);
min-height: 100vh;
overflow-x: hidden;
/* Otimizações de performance */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
:root {
/* Cores do tema azul */
--primary-blue: #1e3a8a;
--secondary-blue: #3b82f6;
--accent-blue: #60a5fa;
--light-blue: #dbeafe;
--dark-blue: #1e40af;
/* Cores de suporte */
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Gradientes */
--gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
--gradient-secondary: linear-gradient(135deg, var(--secondary-blue) 0%, var(--accent-blue) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-blue) 0%, var(--light-blue) 100%);
/* Sombras */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 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);
/* Glassmorphism */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
/* Neumorphism */
--neu-light: #ffffff;
--neu-dark: #e5e7eb;
--neu-shadow-light: 5px 5px 10px rgba(0, 0, 0, 0.1);
--neu-shadow-dark: -5px -5px 10px rgba(255, 255, 255, 0.8);
/* Transições */
--transition-fast: 0.2s ease-in-out;
--transition-normal: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
/* Border radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
}
/* Container - OTIMIZADO PARA MOBILE */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
/* Otimizações de performance */
contain: layout;
}
/* Header - OTIMIZADO PARA MOBILE */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--glass-border);
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
will-change: background, box-shadow;
padding: 0.35rem 0;
/* Otimizações de performance */
contain: layout style;
transform: translateZ(0);
min-height: 50px;
}
/* Header quando está no topo (estado inicial) */
.header.header-top {
padding: 0.45rem 0;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
min-height: 55px;
}
/* Header quando está scrolled (estado compacto) */
.header.header-scrolled {
padding: 0.3rem 0;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
min-height: 45px;
}
/* Transições suaves e naturais */
.header {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Transições específicas para elementos internos */
.header .nav-content,
.header .logo-container,
.header .company-name,
.header .nav-menu,
.header .nav-link {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Fallback para navegadores sem backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
.header {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}
.seo-card,
.service-card,
.why-choose-item,
.faq-item,
.region-card,
.avaliacao-stat,
.avaliacao-card,
.stat-card,
.about-text-card,
.about-mission-card,
.feature-item {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
}
.nav-container {
padding: 0.05rem 0;
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 42px;
}
.logo-container {
display: flex;
align-items: center;
gap: 0.35rem;
}
.logo {
width: 26px;
height: 26px;
border-radius: var(--radius-lg);
object-fit: cover;
box-shadow: var(--shadow-md);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.company-name {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.75rem;
font-weight: 700;
background: linear-gradient(135deg,
#1e3a8a 0%,
#3b82f6 50%,
#60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
max-width: 200px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
letter-spacing: 0.025em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
filter: drop-shadow(0 1px 3px rgba(59, 130, 246, 0.3));
}
.company-name-line1,
.company-name-line2 {
display: block;
white-space: nowrap;
overflow: visible;
text-overflow: unset;
background: linear-gradient(135deg,
#1e3a8a 0%,
#3b82f6 50%,
#60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.company-name-line1 {
font-size: 0.75rem;
line-height: 1;
margin-bottom: 0.1rem;
}
.company-name-line2 {
font-size: 0.65rem;
line-height: 1;
opacity: 0.9;
font-weight: 600;
}
.company-name::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.1) 0%,
rgba(147, 197, 253, 0.1) 100%);
border-radius: 0.375rem;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.company-name:hover {
transform: translateY(-1px);
filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.4));
}
.company-name-line1:hover,
.company-name-line2:hover {
filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.4));
}
.company-name:hover::before {
opacity: 1;
}
/* Ajustes para o header compacto */
.header.header-scrolled .logo {
width: 26px;
height: 26px;
}
.header.header-scrolled .company-name {
font-size: 0.7rem;
filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.25));
}
.header.header-scrolled .company-name-line1 {
font-size: 0.7rem;
}
.header.header-scrolled .company-name-line2 {
font-size: 0.6rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 1rem;
align-items: center;
margin: 0;
padding: 0;
}
.nav-link {
text-decoration: none;
color: var(--gray-700);
font-weight: 500;
font-size: 0.7rem;
padding: 0.2rem 0.35rem;
border-radius: var(--radius-md);
transition: var(--transition-fast);
position: relative;
white-space: nowrap;
}
.nav-link:hover {
color: var(--primary-blue);
background: var(--light-blue);
transform: translateY(-2px);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: var(--transition-normal);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 80%;
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
gap: 4px;
z-index: 1001;
position: relative;
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background: var(--primary-blue);
border-radius: 2px;
transition: var(--transition-fast);
}
/* Hero Section */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0 80px;
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-primary);
z-index: -2;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
z-index: -1;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.hero-text {
color: var(--white);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-title-container {
margin-bottom: 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.hero-title {
font-family: 'Montserrat', sans-serif;
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 0.25rem;
line-height: 1.2;
letter-spacing: 0.5px;
position: relative;
padding: 1.25rem 2rem;
border-radius: 20px;
overflow: hidden;
/* Fundo azul diamantado ultra premium */
background:
radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.9) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.8) 0%, transparent 50%),
radial-gradient(circle at 40% 70%, rgba(29, 78, 216, 0.7) 0%, transparent 50%),
radial-gradient(circle at 90% 90%, rgba(59, 130, 246, 0.6) 0%, transparent 50%),
linear-gradient(135deg,
rgba(30, 58, 138, 0.95) 0%,
rgba(59, 130, 246, 0.9) 25%,
rgba(37, 99, 235, 0.85) 50%,
rgba(29, 78, 216, 0.9) 75%,
rgba(30, 58, 138, 0.95) 100%);
/* Glassmorphism ultra premium */
backdrop-filter: blur(25px) saturate(200%);
-webkit-backdrop-filter: blur(25px) saturate(200%);
/* Bordas premium com gradiente */
border: 3px solid transparent;
background-clip: padding-box;
/* Sombras premium em camadas */
box-shadow:
0 32px 64px rgba(30, 58, 138, 0.4),
0 16px 32px rgba(59, 130, 246, 0.3),
0 8px 16px rgba(0, 0, 0, 0.2),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.1);
/* Texto premium com gradiente */
background-clip: text;
color: transparent;
background-image: linear-gradient(135deg,
#ffffff 0%,
#f0f9ff 30%,
#dbeafe 60%,
#ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Sombra de texto premium */
text-shadow: none;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
will-change: transform, box-shadow;
transform: translateZ(0);
}
/* Padrão diamantado com pseudo-elementos */
.hero-title::before {
content: '';
position: absolute;
inset: -3px;
padding: 3px;
background: linear-gradient(45deg,
rgba(59, 130, 246, 0.8) 0%,
rgba(255, 255, 255, 0.6) 12.5%,
rgba(37, 99, 235, 0.7) 25%,
rgba(255, 255, 255, 0.5) 37.5%,
rgba(29, 78, 216, 0.6) 50%,
rgba(255, 255, 255, 0.4) 62.5%,
rgba(59, 130, 246, 0.5) 75%,
rgba(255, 255, 255, 0.3) 87.5%,
rgba(30, 58, 138, 0.4) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
animation: diamondShine 3s ease-in-out infinite;
}
/* Efeito de brilho diamantado */
.hero-title::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg,
rgba(255, 255, 255, 0.1) 45deg,
rgba(255, 255, 255, 0.2) 90deg,
transparent 135deg,
rgba(255, 255, 255, 0.1) 180deg,
rgba(255, 255, 255, 0.2) 225deg,
transparent 270deg,
rgba(255, 255, 255, 0.1) 315deg,
transparent 360deg);
animation: rotateDiamond 8s linear infinite;
pointer-events: none;
opacity: 0.7;
}
.hero-title:hover {
transform: translateY(-4px) scale(1.02);
/* Sombras de hover ultra premium */
box-shadow:
0 48px 96px rgba(30, 58, 138, 0.5),
0 24px 48px rgba(59, 130, 246, 0.4),
0 12px 24px rgba(0, 0, 0, 0.3),
inset 0 3px 6px rgba(255, 255, 255, 0.4),
inset 0 -3px 6px rgba(0, 0, 0, 0.15);
/* Intensificar o brilho no hover */
background-image: linear-gradient(135deg,
#ffffff 0%,
#f0f9ff 20%,
#dbeafe 40%,
#ffffff 60%,
#f0f9ff 80%,
#ffffff 100%);
}
/* Animações premium */
@keyframes diamondShine {
0%, 100% {
opacity: 0.8;
transform: rotate(0deg);
}
50% {
opacity: 1;
transform: rotate(2deg);
}
}
@keyframes rotateDiamond {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hero-subtitle {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
opacity: 0.95;
color: #e0f2fe;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
}
.hero-description {
font-size: 1rem;
margin-bottom: 1rem;
opacity: 0.9;
line-height: 1.6;
color: #f0f9ff;
text-align: center;
max-width: 600px;
}
.hero-services {
font-size: 0.95rem;
margin-bottom: 2rem;
opacity: 0.85;
line-height: 1.6;
color: #e0f2fe;
max-width: 500px;
text-align: center;
}
.hero-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
}
.hero-img {
max-width: 100%;
height: auto;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
animation: float 6s ease-in-out infinite;
/* Prevenir tremor em dispositivos móveis */
will-change: transform;
transform: translateZ(0);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* CTA Button */
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--gradient-secondary);
color: var(--white);
text-decoration: none;
border-radius: var(--radius-xl);
font-weight: 600;
font-size: 1.125rem;
transition: var(--transition-normal);
box-shadow: var(--shadow-lg);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.cta-button::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: var(--transition-slow);
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
/* ===== WHATSAPP BUTTON ULTRA MODERNO 2024 ===== */
.cta-button.modern {
position: relative;
padding: 1rem 2rem;
background: linear-gradient(135deg,
rgba(37, 211, 102, 0.9) 0%,
rgba(25, 195, 125, 0.95) 50%,
rgba(16, 185, 129, 1) 100%);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 8px 32px rgba(37, 211, 102, 0.25),
0 4px 16px rgba(37, 211, 102, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
transform: translateY(0) scale(1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 16px;
overflow: hidden;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.95rem;
}
.cta-button.modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%);
transition: left 0.6s ease;
}
.cta-button.modern::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
z-index: 1;
}
.cta-button.modern:hover {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 20px 40px rgba(37, 211, 102, 0.4),
0 8px 24px rgba(37, 211, 102, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
border-color: rgba(255, 255, 255, 0.5);
background: linear-gradient(135deg,
rgba(37, 211, 102, 1) 0%,
rgba(25, 195, 125, 1) 50%,
rgba(16, 185, 129, 1) 100%);
}
.cta-button.modern:hover::before {
left: 100%;
}
.cta-button.modern:hover::after {
width: 300px;
height: 300px;
}
.cta-button.modern:active {
transform: translateY(-2px) scale(1.02);
transition: all 0.1s ease;
}
/* Conteúdo do botão ultra moderno */
.cta-content {
display: flex;
align-items: center;
gap: 0.875rem;
position: relative;
z-index: 3;
justify-content: center;
}
.cta-icon {
font-size: 1.25rem;
animation: rocketPulse 2s ease-in-out infinite;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
@keyframes rocketPulse {
0%, 100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
50% {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 4px 8px rgba(37, 211, 102, 0.4));
}
}
.cta-text {
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
letter-spacing: 0.5px;
}
/* Status Indicator Ultra Moderno */
.status-indicator {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 900;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow:
0 4px 12px rgba(34, 197, 94, 0.4),
0 2px 6px rgba(34, 197, 94, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: statusPulse 2s ease-in-out infinite;
z-index: 4;
}
@keyframes statusPulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 4px 12px rgba(34, 197, 94, 0.4),
0 2px 6px rgba(34, 197, 94, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.1);
box-shadow:
0 6px 16px rgba(34, 197, 94, 0.6),
0 3px 8px rgba(34, 197, 94, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}
.cta-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg,
rgba(37, 211, 102, 0.2) 0%,
rgba(25, 195, 125, 0.3) 50%,
rgba(16, 185, 129, 0.2) 100%);
border-radius: 18px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
filter: blur(8px);
}
.cta-button.modern:hover .cta-glow {
opacity: 1;
}
.cta-button.large {
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
}
.whatsapp-icon {
font-size: 1.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Sections */
section {
padding: 80px 0;
}
.section-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
color: var(--primary-blue);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 1.25rem;
text-align: center;
color: var(--gray-600);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Services Section */
.services {
background: var(--white);
position: relative;
}
.services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, var(--gray-50), transparent);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.service-card {
background: rgba(255, 255, 255, 0.95);
padding: 2.5rem;
border-radius: var(--radius-2xl);
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.service-card:hover::before {
opacity: 1;
}
.service-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.service-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
transition: all 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.service-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-blue);
margin-bottom: 1rem;
transition: all 0.3s ease;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-card:hover .service-title {
transform: translateY(-2px);
}
.service-description {
color: var(--gray-600);
line-height: 1.6;
}
/* Regions Section */
.regions {
background: var(--gray-50);
position: relative;
}
.regions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.region-card {
background: rgba(255, 255, 255, 0.95);
padding: 2.5rem;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.region-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.region-card:hover::before {
opacity: 1;
}
.region-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.region-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.region-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-blue);
transition: all 0.3s ease;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.region-card:hover .region-title {
transform: translateY(-2px);
}
.region-badge {
background: var(--gradient-primary);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 600;
}
.region-description {
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1rem;
}
.region-cta {
margin-top: 1rem;
}
.cta-button.small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
/* About Section */
.about {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 0;
}
.about .container {
position: relative;
z-index: 1;
}
/* Estatísticas Premium */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.stat-card {
padding: 2rem 1.5rem;
text-align: center;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 8px 16px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.stat-card:hover::before {
opacity: 1;
}
.stat-card:hover .stat-icon {
transform: scale(1.15);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.stat-card:hover .stat-number {
transform: translateY(-3px);
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-card:hover .stat-label {
color: var(--primary-blue);
transform: translateY(-2px);
}
.stat-icon {
font-size: 2.5rem;
margin-bottom: 1.25rem;
display: block;
animation: float 3s ease-in-out infinite;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: all 0.3s ease;
}
.stat-number {
font-size: 2.8rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 0.75rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.stat-label {
font-size: 1rem;
color: var(--gray-700);
font-weight: 600;
transition: all 0.3s ease;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
margin-bottom: 4rem;
}
.about-text-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.about-text-card,
.about-mission-card {
padding: 2rem;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.about-text-card::before,
.about-mission-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.about-text-card:hover::before,
.about-mission-card:hover::before {
opacity: 1;
}
.about-text-card:hover,
.about-mission-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.about-subtitle {
font-size: 1.3rem;
font-weight: 600;
color: var(--primary-blue);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-text-card p,
.about-mission-card p {
font-size: 1rem;
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 1rem;
}
.about-text-card p:last-child,
.about-mission-card p:last-child {
margin-bottom: 0;
}
.about-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.feature-item {
padding: 1.75rem;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-item:hover {
transform: translateY(-10px) scale(1.03);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.feature-item:hover::before {
opacity: 1;
}
.feature-icon-container {
width: 60px;
height: 60px;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
box-shadow:
0 8px 20px rgba(59, 130, 246, 0.3),
0 2px 8px rgba(59, 130, 246, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-icon-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-xl);
}
.feature-item:hover .feature-icon-container {
transform: scale(1.15) rotate(8deg);
box-shadow:
0 12px 30px rgba(59, 130, 246, 0.4),
0 4px 12px rgba(59, 130, 246, 0.3);
}
.feature-item:hover .feature-icon-container::before {
opacity: 1;
}
.feature-item:hover .feature-icon {
transform: scale(1.1);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.feature-item:hover .feature-content h3 {
transform: translateY(-2px);
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feature-icon {
font-size: 1.5rem;
color: var(--white);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
transition: all 0.3s ease;
}
.feature-content h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 0.75rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.feature-content p {
color: var(--gray-600);
line-height: 1.6;
font-size: 0.9rem;
}
/* CTA Premium */
.about-cta {
margin-top: 4rem;
}
.cta-card {
padding: 3rem;
text-align: center;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.cta-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.cta-card:hover::before {
opacity: 1;
}
.cta-card h3 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-card p {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Responsividade */
@media (max-width: 768px) {
/* Header mobile mais compacto */
.header.header-top {
padding: 0.4rem 0;
}
.header {
padding: 0.4rem 0;
}
.nav-container {
padding: 0.05rem 0;
}
.logo {
width: 22px;
height: 22px;
}
.company-name {
font-size: 0.7rem;
max-width: 160px;
letter-spacing: 0.02em;
filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.25));
}
.company-name-line1 {
font-size: 0.7rem;
}
.company-name-line2 {
font-size: 0.6rem;
}
.nav-link {
font-size: 0.65rem;
padding: 0.15rem 0.25rem;
}
/* CORREÇÃO: Ajustar padding do hero para evitar sobreposição com header */
.hero {
padding: 100px 0 60px; /* Reduzido para compensar header menor */
min-height: calc(100vh - 50px); /* Ajustar altura mínima */
}
/* CORREÇÃO: Menu mobile funcional */
.mobile-menu-toggle {
display: flex;
z-index: 1002; /* Aumentar z-index */
}
.nav-menu {
position: fixed;
top: 100%;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
padding: 1rem;
box-shadow: var(--shadow-lg);
transform: translateY(0);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
border-top: 1px solid var(--glass-border);
max-height: calc(100vh - 100px);
overflow-y: auto;
pointer-events: none; /* Impedir interação quando fechado */
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto; /* Permitir interação quando aberto */
}
.nav-menu .nav-link {
font-size: 0.9rem;
padding: 0.8rem 1rem;
text-align: center;
border-radius: var(--radius-md);
margin: 0.3rem 0;
width: 100%;
display: block;
transition: all 0.3s ease;
}
.nav-menu .nav-link:hover {
background: var(--light-blue);
transform: translateX(5px);
}
/* CORREÇÃO: Hero content responsivo */
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
padding: 0 1rem;
}
.hero-text {
text-align: center;
align-items: center;
order: 1; /* Texto primeiro */
}
.hero-image {
order: 2; /* Imagem depois */
}
/* CORREÇÃO: Imagem estável sem tremores */
.hero-img {
width: 100%;
max-width: 400px;
height: auto;
display: block;
margin: 0 auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
/* Remover animações que podem causar tremores */
transform: none !important;
animation: none !important;
transition: none !important;
will-change: auto !important;
}
.hero-title {
font-size: 1.8rem;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
border-radius: 16px;
/* Reduzir complexidade das animações em tablet */
animation: none;
}
.hero-title::after {
animation-duration: 12s; /* Animação mais lenta em tablets */
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.hero-description {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.hero-services {
font-size: 0.85rem;
margin-bottom: 1.5rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-features {
grid-template-columns: 1fr;
}
.section-title {
font-size: 2rem;
}
.container {
padding: 0 1.5rem;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.stat-card {
padding: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-features {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.stat-card {
padding: 1.75rem;
}
.stat-icon {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.stat-number {
font-size: 2.2rem;
}
.about-text-card,
.about-mission-card {
padding: 1.75rem;
}
.feature-item {
padding: 1.5rem;
}
.feature-icon-container {
width: 55px;
height: 55px;
}
.feature-icon {
font-size: 1.4rem;
}
.cta-card {
padding: 2rem;
}
.cta-card h3 {
font-size: 1.5rem;
}
/* SEO Content Responsividade Tablet */
.seo-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.seo-card {
padding: 2rem;
}
.seo-card-header h3 {
font-size: 1.25rem;
}
.why-choose-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.why-choose-title {
font-size: 1.75rem;
}
.seo-cta-card {
padding: 2.5rem;
}
.seo-cta-card h3 {
font-size: 1.75rem;
}
.cta-buttons {
gap: 0.75rem;
}
}
@media (max-width: 480px) {
/* Header mobile ainda mais compacto */
.header.header-top {
padding: 0.35rem 0;
}
.header {
padding: 0.35rem 0;
}
.nav-container {
padding: 0.03rem 0;
}
.logo {
width: 18px;
height: 18px;
}
.company-name {
font-size: 0.65rem;
max-width: 140px;
letter-spacing: 0.015em;
filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.2));
}
.company-name-line1 {
font-size: 0.65rem;
}
.company-name-line2 {
font-size: 0.55rem;
}
/* CORREÇÃO: Ajustar padding do hero para telas muito pequenas */
.hero {
padding: 90px 0 40px; /* Reduzir padding para telas pequenas */
min-height: calc(100vh - 45px);
}
.section-title {
font-size: 1.75rem;
}
.hero-title {
font-size: 1.5rem;
padding: 0.3rem 0.6rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-description {
font-size: 0.85rem;
}
.hero-services {
font-size: 0.8rem;
}
/* CORREÇÃO: Menu mobile para telas pequenas */
.nav-menu {
padding: 0.8rem;
}
.nav-menu .nav-link {
font-size: 0.85rem;
padding: 0.7rem 0.8rem;
margin: 0.2rem 0;
}
.container {
padding: 0 1rem;
}
.hero-content {
gap: 1.5rem;
padding: 0 0.5rem;
}
/* CORREÇÃO: Imagem ainda mais estável */
.hero-img {
max-width: 300px;
/* Garantir estabilidade total em telas pequenas */
transform: none !important;
animation: none !important;
transition: none !important;
will-change: auto !important;
}
/* Desabilitar animações para usuários com preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
.hero-img {
animation: none !important;
transform: none !important;
}
/* Desabilitar todas as animações para usuários com preferência de movimento reduzido */
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.stats-container {
grid-template-columns: 1fr;
gap: 1rem;
}
.stat-card {
padding: 1.25rem;
}
.stat-number {
font-size: 1.8rem;
}
.seo-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.why-choose-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.cta-buttons {
flex-direction: column;
gap: 0.5rem;
}
.cta-button {
width: 100%;
justify-content: center;
}
}
/* Contact Section Modernizada */
.contact {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 0;
}
.contact .container {
position: relative;
z-index: 1;
}
/* ===== LAYOUT ULTRA MODERNO PARA CONTATO ===== */
.contact-grid-ultra-modern {
display: flex;
flex-direction: column;
gap: 3rem;
margin-bottom: 4rem;
}
.contact-row-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.contact-row-regions {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
}
.contact-card-regions {
max-width: 600px;
width: 100%;
padding: 2.5rem;
border-radius: 2rem;
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 2px solid transparent;
background-clip: padding-box;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 10px 20px -5px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.2) 100%);
will-change: transform, box-shadow;
contain: layout style;
}
.contact-card-regions::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.12) 0%,
rgba(147, 197, 253, 0.08) 25%,
rgba(99, 102, 241, 0.1) 50%,
rgba(59, 130, 246, 0.08) 75%,
rgba(16, 185, 129, 0.06) 100%);
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2rem;
z-index: 1;
}
.contact-card-regions::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg at 50% 50%,
rgba(59, 130, 246, 0.08) 0deg,
rgba(147, 197, 253, 0.05) 60deg,
rgba(99, 102, 241, 0.06) 120deg,
rgba(16, 185, 129, 0.04) 180deg,
rgba(59, 130, 246, 0.08) 240deg,
rgba(147, 197, 253, 0.05) 300deg,
rgba(59, 130, 246, 0.08) 360deg);
animation: rotateRegionsGradient 25s linear infinite;
opacity: 0.3;
z-index: 0;
border-radius: 50%;
}
@keyframes rotateRegionsGradient {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.contact-card-regions:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 35px 70px -12px rgba(0, 0, 0, 0.2),
0 15px 30px -5px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}
.contact-card-regions:hover::before {
opacity: 1;
}
/* Animação sutil de entrada para o card das regiões */
@keyframes regionsCardFloat {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.contact-card-regions {
animation: regionsCardFloat 0.8s ease-out;
}
.contact-card-regions:hover::before {
opacity: 1;
}
.contact-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.contact-icon-container {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
#3b82f6 0%,
#1d4ed8 25%,
#6366f1 50%,
#8b5cf6 75%,
#3b82f6 100%);
border-radius: 50%;
box-shadow:
0 15px 30px rgba(59, 130, 246, 0.4),
0 8px 16px rgba(99, 102, 241, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
position: relative;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform, box-shadow;
}
.contact-icon-container::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: conic-gradient(from 0deg,
#3b82f6, #1d4ed8, #6366f1, #8b5cf6, #3b82f6);
border-radius: 50%;
z-index: -1;
animation: rotateIconBorder 10s linear infinite;
opacity: 0.7;
}
@keyframes rotateIconBorder {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.contact-card-regions:hover .contact-icon-container {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 20px 40px rgba(59, 130, 246, 0.5),
0 10px 20px rgba(99, 102, 241, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.contact-icon {
font-size: 1.8rem;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
animation: iconPulseRegions 3s ease-in-out infinite;
}
@keyframes iconPulseRegions {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.contact-card-regions:hover .contact-icon {
transform: scale(1.2) rotate(10deg);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.contact-card-header h3 {
font-size: 1.75rem;
font-weight: 800;
background: linear-gradient(135deg,
#1e3a8a 0%,
#3b82f6 25%,
#6366f1 50%,
#8b5cf6 75%,
#1e3a8a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
letter-spacing: -0.02em;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-card-regions:hover .contact-card-header h3 {
transform: translateY(-2px);
filter: drop-shadow(0 2px 4px rgba(30, 58, 138, 0.3));
}
.contact-card-content {
position: relative;
z-index: 2;
}
.regions-info-ultra-modern {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: 2rem;
}
.regions-info-ultra-modern .region-tag {
background: linear-gradient(135deg,
#3b82f6 0%,
#1d4ed8 25%,
#6366f1 50%,
#8b5cf6 75%,
#3b82f6 100%);
color: white;
padding: 0.7rem 1.4rem;
border-radius: 2.5rem;
font-size: 0.9rem;
font-weight: 600;
box-shadow:
0 8px 20px rgba(59, 130, 246, 0.4),
0 4px 8px rgba(99, 102, 241, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
overflow: hidden;
will-change: transform, box-shadow;
}
.regions-info-ultra-modern .region-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.regions-info-ultra-modern .region-tag:hover::before {
left: 100%;
}
.regions-info-ultra-modern .region-tag:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 12px 30px rgba(59, 130, 246, 0.5),
0 6px 15px rgba(99, 102, 241, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg,
#1d4ed8 0%,
#3b82f6 25%,
#6366f1 50%,
#8b5cf6 75%,
#1d4ed8 100%);
}
/* Destaque das Regiões - Ultra Premium */
.regions-highlight {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(135deg,
#3b82f6 0%,
#1d4ed8 25%,
#6366f1 50%,
#8b5cf6 75%,
#3b82f6 100%);
border: 2px solid transparent;
background-clip: padding-box;
padding: 1rem 2rem;
border-radius: 3rem;
box-shadow:
0 15px 35px rgba(59, 130, 246, 0.4),
0 5px 15px rgba(99, 102, 241, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform, box-shadow;
}
.regions-highlight::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.regions-highlight:hover::before {
left: 100%;
}
.regions-highlight:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 20px 45px rgba(59, 130, 246, 0.5),
0 8px 20px rgba(99, 102, 241, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.highlight-icon {
font-size: 1.4rem;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
animation: iconBounceRegions 2s ease-in-out infinite;
}
@keyframes iconBounceRegions {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.regions-highlight:hover .highlight-icon {
transform: scale(1.2) rotate(10deg);
}
.highlight-text {
font-weight: 700;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
}
/* Otimizações de Performance para o Card de Regiões Ultra Premium */
@media (prefers-reduced-motion: reduce) {
.contact-card-regions::after,
.contact-icon-container::before {
animation: none;
}
.contact-icon,
.highlight-icon {
animation: none;
}
}
/* Otimização para conexões lentas */
@media (max-width: 768px) {
.contact-card-regions::after {
display: none;
}
.contact-icon-container::before {
display: none;
}
}
.regions-highlight:hover::before {
left: 100%;
}
.highlight-icon {
font-size: 1.5rem;
/* animation: sparkle 2s ease-in-out infinite; */
filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}
.highlight-text {
text-align: center;
}
.highlight-text strong {
color: #d97706;
font-size: 1rem;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
letter-spacing: 0.025em;
}
@keyframes sparkle {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.1) rotate(180deg);
opacity: 0.8;
}
}
/* Animação sutil para o título da empresa */
@keyframes title-glow {
0%, 100% {
filter: drop-shadow(0 1px 3px rgba(59, 130, 246, 0.3));
}
50% {
filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.5));
}
}
/* Animação removida para melhor performance - Ruleset vazio removido */
/* Grid original mantido para compatibilidade */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.contact-card {
padding: 2rem;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.contact-card:hover::before {
opacity: 1;
}
.contact-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-icon-container {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
transition: all 0.3s ease;
}
.contact-card:hover .contact-icon-container {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
.contact-icon {
font-size: 1.5rem;
color: var(--primary-blue);
}
.contact-card-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--primary-blue);
margin: 0;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-card-content {
position: relative;
}
.contact-number {
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 0.5rem;
}
.contact-description {
color: var(--gray-600);
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.contact-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--gradient-primary);
color: var(--white);
text-decoration: none;
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.contact-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
.contact-cta.secondary {
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}
.contact-cta.secondary:hover {
box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4);
}
/* Botão Email Super Moderno - Seção Contato */
.contact-cta.email-modern {
position: relative;
background: linear-gradient(135deg,
#ff6b6b 0%,
#ee5a24 25%,
#fd79a8 50%,
#fdcb6e 75%,
#6c5ce7 100%);
background-size: 300% 300%;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 15px 35px rgba(255, 107, 107, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(0);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
animation: gradient-shift 4s ease infinite;
overflow: hidden;
}
.contact-cta.email-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
transition: left 0.6s ease;
}
.contact-cta.email-modern:hover::before {
left: 100%;
}
.contact-cta.email-modern:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 25px 50px rgba(255, 107, 107, 0.4),
0 10px 25px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
animation-duration: 2s;
}
.contact-cta.email-modern:active {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 15px 30px rgba(255, 107, 107, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1);
}
.contact-cta.email-modern .email-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
#ff6b6b, #ee5a24, #fd79a8, #fdcb6e, #6c5ce7, #ff6b6b);
background-size: 400% 400%;
border-radius: inherit;
opacity: 0;
z-index: -1;
filter: blur(12px);
transition: opacity 0.3s ease;
animation: gradient-glow 3s ease infinite;
}
.contact-cta.email-modern:hover .email-glow {
opacity: 0.7;
}
.contact-cta.email-modern .cta-icon {
font-size: 1rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
animation: email-pulse 2s ease-in-out infinite;
position: relative;
z-index: 2;
}
.contact-cta.email-modern span {
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
color: var(--white);
position: relative;
z-index: 2;
}
/* Horários */
.hours-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.hours-item:last-child {
border-bottom: none;
}
.hours-day {
font-weight: 600;
color: var(--gray-700);
font-size: 0.9rem;
}
.hours-time {
color: var(--gray-600);
font-size: 0.9rem;
}
/* Regiões */
.regions-info {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.region-tag {
background: rgba(59, 130, 246, 0.1);
color: var(--primary-blue);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-md);
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* CTA Section */
.contact-cta-section {
margin-top: 4rem;
}
.contact-cta-card {
padding: 3rem;
text-align: center;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.contact-cta-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-cta-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.contact-cta-card:hover::before {
opacity: 1;
}
.contact-cta-card h3 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-cta-card p {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Footer */
.footer {
background: var(--gray-900);
color: var(--white);
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h4 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--accent-blue);
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.footer-logo-img {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
}
.footer-company-name {
font-size: 1.25rem;
font-weight: 600;
color: var(--accent-blue);
}
.footer-description {
color: var(--gray-400);
line-height: 1.6;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: var(--gray-400);
text-decoration: none;
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--accent-blue);
}
.footer-whatsapp {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--accent-blue);
text-decoration: none;
font-weight: 500;
margin-bottom: 0.5rem;
transition: var(--transition-fast);
}
.footer-whatsapp:hover {
color: var(--light-blue);
}
.footer-hours {
color: var(--gray-400);
font-size: 0.875rem;
}
.footer-bottom {
border-top: 1px solid var(--gray-700);
padding-top: 1rem;
text-align: center;
}
.footer-copyright {
color: var(--gray-400);
margin-bottom: 0.5rem;
}
.footer-seo {
color: var(--gray-500);
font-size: 0.875rem;
}
/* Responsividade */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 100%;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
padding: 1rem;
box-shadow: var(--shadow-lg);
transform: translateY(0);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
border-top: 1px solid var(--glass-border);
max-height: calc(100vh - 100px);
overflow-y: auto;
pointer-events: none; /* Impedir interação quando fechado */
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto; /* Permitir interação quando aberto */
}
.nav-menu .nav-link {
font-size: 0.9rem;
padding: 0.6rem 0.8rem;
text-align: center;
border-radius: var(--radius-md);
margin: 0.2rem 0;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-text {
text-align: center;
align-items: center;
}
.hero-title {
font-size: 1.8rem;
padding: 1rem 1.5rem;
border-radius: 16px;
/* Manter efeitos premium em tablet mas com menor intensidade */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.hero-title::after {
animation-duration: 10s; /* Animação mais lenta em tablets */
opacity: 0.5; /* Reduzir intensidade */
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-description {
font-size: 0.9rem;
}
.hero-services {
font-size: 0.85rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-features {
grid-template-columns: 1fr;
}
.section-title {
font-size: 2rem;
}
.container {
padding: 0 1.5rem;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 1.75rem;
}
.hero-title {
font-size: 1.5rem;
padding: 0.8rem 1.2rem;
border-radius: 14px;
/* Simplificar efeitos em mobile para melhor performance */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow:
0 16px 32px rgba(30, 58, 138, 0.3),
0 8px 16px rgba(59, 130, 246, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.2);
}
.hero-title::before {
animation: none; /* Desabilitar animação complexa em mobile */
}
.hero-title::after {
display: none; /* Remover efeito rotativo em mobile para performance */
}
.hero-subtitle {
font-size: 1rem;
}
.hero-description {
font-size: 0.85rem;
}
.hero-services {
font-size: 0.8rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
.cta-button {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
.service-card,
.region-card {
padding: 1.5rem;
}
.contact-item {
padding: 1rem;
}
.contact-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.stats-container {
grid-template-columns: 1fr;
gap: 1rem;
}
.stat-card {
padding: 1.25rem;
}
.stat-icon {
font-size: 1.8rem;
margin-bottom: 0.75rem;
}
.stat-number {
font-size: 1.8rem;
}
.about-text-card,
.about-mission-card {
padding: 1.25rem;
}
.feature-item {
padding: 1rem;
}
.feature-icon-container {
width: 50px;
height: 50px;
}
.feature-icon {
font-size: 1.2rem;
}
.avaliacao-stat {
padding: 1rem;
}
.avaliacao-stat .stat-icon {
font-size: 1.8rem;
margin-bottom: 0.75rem;
}
.avaliacao-stat .stat-number {
font-size: 1.6rem;
}
.avaliacao-stat .stat-label {
font-size: 0.85rem;
}
.avaliacao-card {
padding: 1.5rem;
}
.star {
font-size: 1rem;
}
}
/* ===== ESTILOS TRANSPORTE EXECUTIVO ===== */
/* Hero específico para transporte executivo - Otimizado para performance */
.transporte-hero {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1d4ed8 100%);
will-change: background;
}
.transporte-hero .hero-title {
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.car-showcase {
text-align: center;
color: var(--white);
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
will-change: transform;
transform: translateZ(0);
}
.car-icon {
font-size: 4rem;
margin-bottom: 1rem;
animation: float 6s ease-in-out infinite;
}
.car-showcase h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--white);
}
.car-showcase p {
font-size: 1rem;
opacity: 0.9;
color: #e0f2fe;
}
/* Estilos Premium para Imagem do Carro */
.car-image-container {
position: relative;
margin-bottom: 1.5rem;
border-radius: var(--radius-2xl);
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1);
transform: translateZ(0);
will-change: transform;
transition: all var(--transition-slow);
}
.car-image-container:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.car-image {
width: 100%;
height: auto;
max-width: 400px;
display: block;
border-radius: var(--radius-2xl);
transition: all var(--transition-normal);
filter: brightness(1.1) contrast(1.1);
}
.car-image-container:hover .car-image {
filter: brightness(1.2) contrast(1.2) saturate(1.1);
}
.car-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(30, 58, 138, 0.1) 0%,
rgba(59, 130, 246, 0.05) 50%,
rgba(96, 165, 250, 0.1) 100%);
border-radius: var(--radius-2xl);
opacity: 0;
transition: opacity var(--transition-normal);
}
.car-image-container:hover .car-image-overlay {
opacity: 1;
}
.car-image-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
var(--primary-blue),
var(--secondary-blue),
var(--accent-blue),
var(--primary-blue));
border-radius: var(--radius-2xl);
opacity: 0;
z-index: -1;
filter: blur(8px);
transition: opacity var(--transition-normal);
animation: glow-pulse 3s ease-in-out infinite;
}
.car-image-container:hover .car-image-glow {
opacity: 0.6;
}
.car-info {
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 1rem;
}
.car-info h3 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--white) 0%, #e0f2fe 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.car-info p {
font-size: 1.1rem;
opacity: 0.9;
color: #e0f2fe;
margin-bottom: 1rem;
}
.car-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.feature-badge {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--transition-fast);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.feature-badge:hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.2) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes glow-pulse {
0%, 100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
/* Botão secundário */
.cta-button.secondary {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.cta-button.secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
}
/* Seção de Serviços */
.servicos {
background: var(--white);
position: relative;
}
.servicos::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, var(--gray-50), transparent);
}
.servicos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.servico-card {
background: var(--white);
padding: 2rem;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
text-align: center;
transition: var(--transition-normal);
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
will-change: transform;
transform: translateZ(0);
}
.servico-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: var(--transition-normal);
}
.servico-card:hover::before {
transform: scaleX(1);
}
.servico-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.servico-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.servico-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
}
.servico-description {
color: var(--gray-600);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.servico-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.service-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
justify-content: center;
}
.feature-tag {
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.1) 0%,
rgba(147, 197, 253, 0.1) 100%);
color: var(--primary-blue);
padding: 0.375rem 0.875rem;
border-radius: var(--radius-lg);
font-size: 0.8rem;
font-weight: 600;
border: 1px solid rgba(59, 130, 246, 0.2);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.feature-tag:hover {
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.2) 0%,
rgba(147, 197, 253, 0.2) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
font-weight: 500;
border: 1px solid var(--accent-blue);
}
/* Seção de Diferenciais */
.diferenciais {
background: linear-gradient(135deg, var(--gray-50) 0%, var(--light-blue) 100%);
position: relative;
}
.diferenciais-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.diferencial-item {
background: var(--white);
padding: 2rem;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
text-align: center;
transition: var(--transition-normal);
border: 1px solid var(--gray-200);
}
.diferencial-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.diferencial-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.diferencial-item h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
}
.diferencial-item p {
color: var(--gray-600);
line-height: 1.6;
}
/* Seção de Agendamento */
.agendamento {
background: var(--white);
position: relative;
}
.agendamento-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
.agendamento-info h3,
.agendamento-contato h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 2rem;
text-align: center;
}
.agendamento-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.step {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.step-number {
background: var(--gradient-primary);
color: var(--white);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
flex-shrink: 0;
}
.step-content h4 {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-blue);
margin-bottom: 0.5rem;
}
.step-content p {
color: var(--gray-600);
line-height: 1.5;
}
.contato-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contato-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-decoration: none;
color: inherit;
transition: var(--transition-normal);
border: 2px solid transparent;
}
.contato-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.contato-card.whatsapp:hover {
border-color: #25d366;
}
.contato-card.telefone:hover {
border-color: var(--primary-blue);
}
.contato-card.email:hover {
border-color: var(--accent-blue);
}
.contato-icon {
font-size: 2rem;
flex-shrink: 0;
}
/* Animações otimizadas para performance */
.animate-in {
animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Otimizações de performance */
.servico-card,
.diferencial-item,
.step,
.contato-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.servico-card.animate-in,
.diferencial-item.animate-in,
.step.animate-in,
.contato-card.animate-in {
opacity: 1;
transform: translateY(0);
}
.contato-info h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-blue);
margin-bottom: 0.25rem;
}
.contato-info p {
color: var(--gray-600);
margin-bottom: 0.5rem;
}
.contato-action {
color: var(--accent-blue);
font-weight: 500;
font-size: 0.9rem;
}
/* Responsividade */
@media (max-width: 768px) {
.agendamento-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.servicos-grid {
grid-template-columns: 1fr;
}
.diferenciais-grid {
grid-template-columns: 1fr;
}
.car-showcase {
padding: 1.5rem;
}
.car-image-container {
margin-bottom: 1rem;
border-radius: var(--radius-xl);
}
.car-image {
max-width: 350px;
border-radius: var(--radius-xl);
}
.car-info {
padding: 0.75rem;
margin-top: 0.75rem;
}
.car-info h3 {
font-size: 1.5rem;
}
.car-info p {
font-size: 1rem;
}
.car-features {
gap: 0.375rem;
}
.feature-badge {
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
}
/* Estilos para telas muito pequenas */
.car-image-container {
margin-bottom: 0.75rem;
border-radius: var(--radius-lg);
}
.car-image {
max-width: 300px;
border-radius: var(--radius-lg);
}
.car-info {
padding: 0.5rem;
margin-top: 0.5rem;
}
.car-info h3 {
font-size: 1.25rem;
}
.car-info p {
font-size: 0.9rem;
}
.car-features {
gap: 0.25rem;
flex-direction: column;
align-items: center;
}
.feature-badge {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
width: auto;
}
.car-icon {
font-size: 3rem;
}
}
@media (max-width: 480px) {
.servico-card,
.diferencial-item {
padding: 1.5rem;
}
.step {
flex-direction: column;
text-align: center;
}
.contato-card {
flex-direction: column;
text-align: center;
}
}
/* Animações de entrada */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Classes de animação */
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.animate-fade-in-left {
animation: fadeInLeft 0.6s ease-out;
}
.animate-fade-in-right {
animation: fadeInRight 0.6s ease-out;
}
/* Scroll suave para links internos */
html {
scroll-behavior: smooth;
}
/* Melhorias de acessibilidade */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Foco visível para navegação por teclado */
.nav-link:focus,
.cta-button:focus,
.contact-link:focus {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
/* Melhorias de performance */
img {
max-width: 100%;
height: auto;
}
/* Loading states */
.loading {
opacity: 0.7;
pointer-events: none;
}
/* Glassmorphism adicional para elementos especiais */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
/* Neumorphism para inputs (se necessário) */
.neu-input {
background: var(--neu-light);
border: none;
border-radius: var(--radius-lg);
padding: 1rem;
box-shadow: var(--neu-shadow-light), var(--neu-shadow-dark);
transition: var(--transition-fast);
}
.neu-input:focus {
outline: none;
box-shadow: inset var(--neu-shadow-light), inset var(--neu-shadow-dark);
}
/* ===== ESTILOS FAQ ===== */
.faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.faq-item {
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
overflow: hidden;
transition: var(--transition-normal);
}
.faq-item:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.faq-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
cursor: pointer;
background: linear-gradient(135deg, #f8fafc, #e2e8f0); /* Fundo claro para melhor contraste */
color: var(--gray-800);
transition: var(--transition-normal);
border: 1px solid var(--gray-200);
}
.faq-header:hover {
background: linear-gradient(135deg, #e2e8f0, #cbd5e1); /* Hover mais escuro mas ainda legível */
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.faq-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-800); /* Mudança para preto */
}
.faq-toggle {
font-size: 1.5rem;
font-weight: bold;
color: var(--gray-800); /* Mudança para preto */
transition: var(--transition-normal);
user-select: none;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-content p {
padding: 0 2rem 1.5rem;
margin: 0;
color: var(--gray-700);
line-height: 1.6;
}
.faq-item.expanded .faq-header {
background: linear-gradient(135deg, #e2e8f0, #cbd5e1); /* Estado expandido com fundo mais escuro */
border-color: var(--primary-blue);
}
.faq-item.expanded .faq-toggle {
transform: rotate(180deg);
}
/* Garantir que todos os itens FAQ tenham o mesmo comportamento */
.faq-item {
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
overflow: hidden;
transition: var(--transition-normal);
margin-bottom: 1rem;
}
.faq-item:last-child {
margin-bottom: 0;
}
/* Responsividade do FAQ */
@media (max-width: 768px) {
.faq-header {
padding: 1rem 1.5rem;
}
.faq-header h3 {
font-size: 1rem;
}
.faq-content p {
padding: 0 1.5rem 1rem;
}
}
/* ===== FOOTER ULTRA MODERNO ===== */
.footer-ultra-modern {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
position: relative;
color: white;
overflow: hidden;
}
.footer-wave-modern {
position: absolute;
top: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.footer-wave-modern svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 120px;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
position: relative;
z-index: 1;
}
.footer-main-modern {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 3rem;
padding: 4rem 0 2rem;
}
/* Brand Section */
.footer-brand-modern {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-brand-header-modern {
display: flex;
align-items: center;
gap: 1rem;
}
.footer-logo-modern {
position: relative;
width: 60px;
height: 60px;
}
.footer-logo-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.footer-logo-glow-modern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-brand-modern:hover .footer-logo-glow-modern {
opacity: 1;
}
.footer-brand-modern:hover .footer-logo-img {
transform: scale(1.1);
}
.footer-brand-text-modern {
display: flex;
flex-direction: column;
}
.footer-company-name-modern {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.footer-company-subtitle-modern {
font-size: 1rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.footer-description-modern {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-size: 0.95rem;
}
.footer-quick-contact {
margin-top: 1rem;
}
.footer-whatsapp-modern {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
color: white;
text-decoration: none;
border-radius: 2rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.footer-whatsapp-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}
.whatsapp-icon-modern {
font-size: 1.2rem;
}
/* Links Section */
.footer-links-modern {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-title-modern {
font-size: 1.1rem;
font-weight: 600;
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-title-modern::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #60a5fa 0%, transparent 100%);
border-radius: 1px;
}
.footer-links-list-modern {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-link-modern {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-link-modern:hover {
color: white;
transform: translateX(5px);
}
/* Contact Section */
.footer-contact-modern {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-hours-modern {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hours-item-modern {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hours-icon-modern {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.hours-info-modern {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hours-day-modern {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.hours-time-modern {
font-size: 0.9rem;
color: white;
font-weight: 600;
}
.footer-cta-modern {
margin-top: 1rem;
}
.footer-cta-button-modern {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
text-decoration: none;
border-radius: 0.75rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
width: 100%;
justify-content: center;
}
.footer-cta-button-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
.cta-icon-modern {
font-size: 1.1rem;
}
/* Divider */
.footer-divider-modern {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
margin: 2rem 0;
}
/* Bottom Section */
.footer-bottom-modern {
padding: 2rem 0;
}
.footer-bottom-content-modern {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright-modern {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-copyright-modern p {
margin: 0;
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
}
.footer-motto-modern {
color: rgba(255, 255, 255, 0.6) !important;
font-style: italic;
font-size: 0.8rem !important;
}
.footer-seo-modern {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.seo-tag-modern {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.seo-tag-modern:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.footer-back-to-top-modern {
display: flex;
justify-content: center;
}
.back-to-top-btn-modern {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.back-to-top-btn-modern:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.arrow-up-modern {
font-size: 1.2rem;
}
/* ===== ESTILOS AVALIAÇÕES MODERNIZADOS ===== */
.avaliacoes {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.avaliacoes::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 0;
}
.avaliacoes .container {
position: relative;
z-index: 1;
}
/* Estatísticas de Avaliações */
.avaliacoes-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.avaliacao-stat {
padding: 2rem 1.5rem;
text-align: center;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.avaliacao-stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.avaliacao-stat:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.avaliacao-stat:hover::before {
opacity: 1;
}
.avaliacao-stat .stat-icon {
font-size: 2.5rem;
margin-bottom: 1.25rem;
display: block;
animation: float 3s ease-in-out infinite;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: all 0.3s ease;
}
.avaliacao-stat:hover .stat-icon {
transform: scale(1.1);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.avaliacao-stat .stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 0.75rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.avaliacao-stat:hover .stat-number {
transform: translateY(-2px);
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.avaliacao-stat .stat-label {
font-size: 1rem;
color: var(--gray-700);
font-weight: 600;
transition: all 0.3s ease;
}
.avaliacao-stat:hover .stat-label {
color: var(--primary-blue);
transform: translateY(-1px);
}
.avaliacoes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.avaliacao-card {
padding: 2rem;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.avaliacao-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.avaliacao-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.avaliacao-card:hover::before {
opacity: 1;
}
.avaliacao-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.avaliacao-stars {
display: flex;
gap: 0.25rem;
}
.star {
font-size: 1.1rem;
color: #fbbf24;
animation: starPulse 2s ease-in-out infinite;
transition: all 0.3s ease;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.avaliacao-card:hover .star {
transform: scale(1.1);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.star:nth-child(2) { animation-delay: 0.2s; }
.star:nth-child(3) { animation-delay: 0.4s; }
.star:nth-child(4) { animation-delay: 0.6s; }
.star:nth-child(5) { animation-delay: 0.8s; }
.avaliacao-card:hover .star {
transform: scale(1.1);
color: #f59e0b;
}
@keyframes starPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.avaliacao-date {
background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
color: var(--white);
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
}
.avaliacao-content {
position: relative;
}
.avaliacao-text {
font-style: italic;
color: var(--gray-700);
line-height: 1.7;
margin: 0 0 1.5rem 0;
font-size: 1rem;
position: relative;
}
.avaliacao-text::before {
content: '"';
font-size: 3rem;
color: var(--accent-blue);
position: absolute;
top: -1rem;
left: -0.5rem;
font-family: serif;
opacity: 0.3;
}
.avaliacao-author {
display: flex;
align-items: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.author-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.author-info strong {
color: var(--primary-blue);
font-weight: 600;
font-size: 1rem;
}
.company {
color: var(--gray-600);
font-size: 0.875rem;
font-weight: 500;
}
.author-avatar {
font-size: 2rem;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--light-blue), var(--accent-blue));
border-radius: var(--radius-full);
flex-shrink: 0;
}
.author-info {
flex: 1;
}
.author-name {
margin: 0 0 0.25rem 0;
color: var(--primary-blue);
font-weight: 600;
font-size: 1.1rem;
}
.author-company {
margin: 0;
color: var(--gray-600);
font-size: 0.875rem;
font-weight: 500;
}
/* CTA das Avaliações Modernizado */
.avaliacoes-cta {
margin-top: 4rem;
}
.avaliacoes-cta-card {
padding: 3rem;
text-align: center;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.avaliacoes-cta-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.avaliacoes-cta-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.avaliacoes-cta-card:hover::before {
opacity: 1;
}
.avaliacoes-cta-card h3 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.avaliacoes-cta-card p {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Responsividade das Avaliações */
@media (max-width: 768px) {
.avaliacoes-stats {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.avaliacao-stat {
padding: 1.5rem;
}
.avaliacao-stat .stat-icon {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.avaliacao-stat .stat-number {
font-size: 1.8rem;
}
.avaliacao-stat .stat-label {
font-size: 0.9rem;
}
.avaliacoes-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.avaliacao-card {
padding: 1.5rem;
}
.avaliacao-text {
font-size: 0.95rem;
}
.avaliacoes-cta-card {
padding: 2rem;
}
.avaliacoes-cta-card h3 {
font-size: 1.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-button.secondary {
width: 100%;
max-width: 300px;
}
.cta-button.email-modern {
width: 100%;
max-width: 300px;
padding: 1rem 2rem;
}
.cta-button.email-modern .cta-icon {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.avaliacoes-stats {
grid-template-columns: 1fr;
}
.avaliacao-stat {
padding: 1rem;
}
.avaliacao-stat .stat-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.avaliacao-stat .stat-number {
font-size: 1.75rem;
}
.avaliacao-stat .stat-label {
font-size: 0.9rem;
}
.avaliacao-card {
padding: 1rem;
}
.avaliacao-header {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.avaliacoes-cta-card {
padding: 1.5rem;
}
.avaliacoes-cta-card h3 {
font-size: 1.25rem;
}
}
/* ===== FOOTER MODERNIZADO ===== */
.footer {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
color: var(--white);
position: relative;
margin-top: 4rem;
}
.footer-wave {
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: 60px;
overflow: hidden;
}
.footer-wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 60px;
}
.footer-wave .shape-fill {
fill: var(--white);
}
.footer-content {
padding: 3rem 0 1rem 0;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2rem;
}
.footer-brand {
max-width: 350px;
}
.footer-brand-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.footer-logo-container {
position: relative;
flex-shrink: 0;
}
.footer-logo {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent-blue);
box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
transition: all 0.3s ease;
}
.footer-logo-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
animation: logoGlow 3s ease-in-out infinite alternate;
}
.footer-brand:hover .footer-logo {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(96, 165, 250, 0.6);
}
@keyframes logoGlow {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.6; transform: scale(1.05); }
}
.footer-brand-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.footer-company-name {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
color: var(--white);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
letter-spacing: 0.5px;
line-height: 1.2;
}
.footer-company-subtitle {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: var(--accent-blue);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
line-height: 1.2;
}
.footer-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-size: 0.9rem;
font-weight: 400;
}
.footer-social {
display: flex;
gap: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-blue), var(--secondary-blue));
color: var(--white);
text-decoration: none;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.social-link:hover::before {
left: 100%;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 10px 25px rgba(96, 165, 250, 0.4);
}
.social-icon {
font-size: 1.2rem;
z-index: 1;
}
.footer-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--white);
position: relative;
padding-bottom: 0.5rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--accent-blue);
border-radius: 1px;
}
.footer-links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-links-column h5 {
font-size: 1rem;
font-weight: 600;
color: var(--accent-blue);
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-link {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
font-size: 0.9rem;
padding: 0.25rem 0;
}
.footer-link:hover {
color: var(--white);
transform: translateX(5px);
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
color: var(--white);
text-decoration: none;
background: linear-gradient(135deg, #25D366, #128C7E);
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
margin-bottom: 1rem;
}
.footer-whatsapp:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}
.whatsapp-emoji {
font-size: 1.8rem;
animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.footer-hours {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hours-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
}
.hours-icon {
font-size: 1rem;
opacity: 0.8;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--dark-blue);
font-weight: 600;
background: var(--white);
padding: 1rem;
border-radius: var(--radius-lg);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition-normal);
border: 1px solid rgba(96, 165, 250, 0.1);
}
.contact-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.contact-icon {
font-size: 1.4rem;
opacity: 1;
background: linear-gradient(135deg, var(--accent-blue), var(--secondary-blue));
color: var(--white);
width: 45px;
height: 45px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(96, 165, 250, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-details {
font-size: 1.2rem;
line-height: 1.6;
font-weight: 700;
color: var(--dark-blue);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.contact-details strong {
color: var(--primary-blue);
font-weight: 800;
font-size: 1.2rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.contact-details strong {
color: var(--white);
}
.contact-email {
color: var(--primary-blue);
text-decoration: none;
transition: var(--transition-normal);
font-weight: 600;
border-bottom: 2px solid var(--accent-blue);
padding-bottom: 2px;
}
.contact-email:hover {
color: var(--accent-blue);
border-bottom-color: var(--primary-blue);
transform: translateX(3px);
}
/* Estilo específico para horários */
.contact-item .contact-details {
font-size: 1rem;
font-weight: 700;
color: var(--dark-blue);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.contact-item .contact-details strong {
color: var(--primary-blue);
font-weight: 800;
font-size: 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
letter-spacing: 0.3px;
}
.footer-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 2rem 0;
gap: 1rem;
}
.divider-line {
height: 2px;
flex: 1;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
}
.divider-icon {
font-size: 1.5rem;
animation: dividerPulse 2s ease-in-out infinite;
}
@keyframes dividerPulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.2); opacity: 1; }
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
}
.footer-bottom-content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 2rem;
align-items: center;
}
.footer-copyright {
text-align: left;
}
.footer-copyright p {
margin: 0.5rem 0;
color: var(--white);
font-size: 1rem;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.footer-motto {
font-style: italic;
color: var(--accent-blue) !important;
font-weight: 500;
}
.footer-seo {
text-align: center;
}
.seo-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.seo-tag {
background: rgba(255, 255, 255, 0.15);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: var(--transition-normal);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.seo-tag:hover {
background: rgba(255, 255, 255, 0.25);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
border-color: var(--accent-blue);
}
.footer-back-to-top {
text-align: right;
}
.back-to-top-btn {
background: linear-gradient(135deg, var(--accent-blue), var(--secondary-blue));
border: none;
color: var(--white);
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
}
.back-to-top-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(96, 165, 250, 0.5);
}
.arrow-up {
font-size: 1.2rem;
animation: arrowBounce 2s ease-in-out infinite;
}
@keyframes arrowBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* Responsividade do Footer */
@media (max-width: 1024px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-brand {
grid-column: 1 / -1;
max-width: none;
text-align: center;
}
}
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-brand {
text-align: center;
}
.footer-brand-header {
justify-content: center;
}
.footer-links-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-bottom-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 480px) {
.footer-main {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-logo {
width: 45px;
height: 45px;
}
.footer-company-name {
font-size: 1.2rem;
}
.footer-company-subtitle {
font-size: 0.9rem;
}
.footer-whatsapp {
width: 50px;
height: 50px;
}
.whatsapp-emoji {
font-size: 1.5rem;
}
.seo-tags {
flex-wrap: wrap;
justify-content: center;
}
.seo-tag {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}
/* SEO Content Section - Modernizado */
.seo-content {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.seo-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 0;
}
.seo-content .container {
position: relative;
z-index: 1;
}
.seo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.seo-card {
padding: 2.5rem;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.seo-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.seo-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.seo-card:hover::before {
opacity: 1;
}
.seo-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.seo-icon-container {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
transition: all 0.3s ease;
}
.seo-card:hover .seo-icon-container {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
.seo-icon {
font-size: 1.5rem;
color: var(--primary-blue);
}
.seo-card-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-blue);
margin: 0;
flex: 1;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.seo-card:hover .seo-card-header h3 {
transform: translateY(-2px);
}
.seo-badge {
background: var(--gradient-primary);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.seo-card-content {
margin-bottom: 1.5rem;
}
.seo-card-content p {
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 1rem;
font-size: 1rem;
}
.seo-card-content p:last-child {
margin-bottom: 0;
}
.seo-card-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.seo-feature-tag {
background: rgba(59, 130, 246, 0.1);
color: var(--primary-blue);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 500;
border: 1px solid rgba(59, 130, 246, 0.2);
transition: all 0.3s ease;
}
.seo-feature-tag:hover {
background: rgba(59, 130, 246, 0.2);
transform: translateY(-2px);
}
/* Por que Escolher Section */
.why-choose-section {
margin-bottom: 4rem;
}
.why-choose-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
color: var(--primary-blue);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.why-choose-item {
padding: 2.5rem;
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.1),
-8px -8px 16px rgba(255, 255, 255, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
text-align: center;
}
.why-choose-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.why-choose-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
12px 12px 24px rgba(0, 0, 0, 0.15),
-12px -12px 24px rgba(255, 255, 255, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.why-choose-item:hover::before {
opacity: 1;
}
.why-choose-icon-container {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
transition: all 0.3s ease;
}
.why-choose-item:hover .why-choose-icon-container {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
.why-choose-icon {
font-size: 2rem;
color: var(--primary-blue);
}
.why-choose-item h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--primary-blue);
margin-bottom: 1rem;
transition: all 0.3s ease;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.why-choose-item:hover h4 {
transform: translateY(-2px);
}
.why-choose-item p {
color: var(--gray-600);
line-height: 1.6;
font-size: 0.95rem;
}
/* SEO CTA Modernizado */
.seo-cta {
margin-top: 4rem;
}
.seo-cta-card {
padding: 3rem;
text-align: center;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.seo-cta-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.seo-cta-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.seo-cta-card:hover::before {
opacity: 1;
}
.seo-cta-card h3 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.seo-cta-card .cta-subtitle {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-button.secondary {
padding: 1.2rem 2.5rem;
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(100, 116, 139, 0.3);
transform: translateY(0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-button.secondary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(100, 116, 139, 0.4);
border-color: rgba(255, 255, 255, 0.4);
}
/* Botão Email Super Moderno */
.cta-button.email-modern {
position: relative;
background: linear-gradient(135deg,
#ff6b6b 0%,
#ee5a24 25%,
#fd79a8 50%,
#fdcb6e 75%,
#6c5ce7 100%);
background-size: 300% 300%;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 15px 35px rgba(255, 107, 107, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(0);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
animation: gradient-shift 4s ease infinite;
overflow: hidden;
}
.cta-button.email-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
transition: left 0.6s ease;
}
.cta-button.email-modern:hover::before {
left: 100%;
}
.cta-button.email-modern:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 25px 50px rgba(255, 107, 107, 0.4),
0 10px 25px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
animation-duration: 2s;
}
.cta-button.email-modern:active {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 15px 30px rgba(255, 107, 107, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1);
}
.email-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
#ff6b6b, #ee5a24, #fd79a8, #fdcb6e, #6c5ce7, #ff6b6b);
background-size: 400% 400%;
border-radius: inherit;
opacity: 0;
z-index: -1;
filter: blur(12px);
transition: opacity 0.3s ease;
animation: gradient-glow 3s ease infinite;
}
.cta-button.email-modern:hover .email-glow {
opacity: 0.7;
}
.cta-button.email-modern .cta-content {
position: relative;
z-index: 2;
}
.cta-button.email-modern .cta-icon {
font-size: 1.5rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
animation: email-pulse 2s ease-in-out infinite;
}
.cta-button.email-modern .cta-text {
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
color: var(--white);
}
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes gradient-glow {
0%, 100% {
background-position: 0% 50%;
opacity: 0.4;
}
50% {
background-position: 100% 50%;
opacity: 0.8;
}
}
@keyframes email-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.faq-item {
background: rgba(255, 255, 255, 0.95);
padding: 2.5rem;
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.faq-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-2xl);
}
.faq-item:hover::before {
opacity: 1;
}
.faq-item:hover {
transform: translateY(-4px) scale(1.01);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.98);
}
.faq-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--gray-800); /* Mudança para preto */
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.faq-item:hover h3 {
transform: translateY(-2px);
}
.faq-item p {
color: var(--gray-600);
line-height: 1.6;
}
/* Responsividade para página de SEO */
@media (max-width: 768px) {
.seo-content-grid {
grid-template-columns: 1fr;
}
.why-choose-grid {
grid-template-columns: 1fr;
}
.faq-grid {
grid-template-columns: 1fr;
}
.seo-card,
.why-choose-item,
.faq-item,
.service-card,
.region-card {
padding: 1.5rem;
}
}
/* Responsividade para Footer Ultra Moderno */
@media (max-width: 1024px) {
.footer-main-modern {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-links-modern {
grid-column: 1 / -1;
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.footer-main-modern {
grid-template-columns: 1fr;
gap: 2rem;
padding: 3rem 0 2rem;
}
.footer-links-modern {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-brand-header-modern {
justify-content: center;
text-align: center;
}
.footer-description-modern {
text-align: center;
}
.footer-quick-contact {
display: flex;
justify-content: center;
}
.footer-whatsapp-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}
.footer-hours-modern {
gap: 0.75rem;
}
.hours-item-modern {
padding: 0.5rem;
}
.footer-bottom-content-modern {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.footer-seo-modern {
order: -1;
}
.seo-tag-modern {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
}
}
@media (max-width: 480px) {
.footer-container {
padding: 0 0.5rem;
}
.footer-main-modern {
padding: 2rem 0 1.5rem;
gap: 1.5rem;
}
.footer-brand-header-modern {
flex-direction: column;
gap: 0.75rem;
}
.footer-logo-modern {
width: 50px;
height: 50px;
}
.footer-company-name-modern {
font-size: 1.25rem;
}
.footer-company-subtitle-modern {
font-size: 0.9rem;
}
.footer-description-modern {
font-size: 0.85rem;
}
.footer-whatsapp-modern {
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.footer-title-modern {
font-size: 1rem;
margin-bottom: 1rem;
}
.footer-link-modern {
font-size: 0.85rem;
}
.hours-item-modern {
padding: 0.5rem;
gap: 0.75rem;
}
.hours-icon-modern {
font-size: 1rem;
width: 20px;
}
.hours-day-modern {
font-size: 0.8rem;
}
.hours-time-modern {
font-size: 0.85rem;
}
.footer-cta-button-modern {
padding: 0.75rem 1rem;
font-size: 0.85rem;
}
.footer-copyright-modern p {
font-size: 0.8rem;
}
.footer-motto-modern {
font-size: 0.75rem !important;
}
.seo-tag-modern {
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
}
.back-to-top-btn-modern {
width: 45px;
height: 45px;
}
.arrow-up-modern {
font-size: 1rem;
}
}
/* Responsividade para seção de contato */
@media (max-width: 768px) {
/* Layout ultra moderno responsivo */
.contact-grid-ultra-modern {
gap: 2rem;
}
.contact-row-main {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.contact-card-regions {
max-width: 100%;
padding: 2rem;
}
.regions-info-ultra-modern {
gap: 0.5rem;
}
.regions-info-ultra-modern .region-tag {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
/* Responsividade para regions-highlight */
.regions-highlight {
padding: 0.875rem 1.25rem;
gap: 0.625rem;
}
.highlight-icon {
font-size: 1.375rem;
}
.highlight-text strong {
font-size: 0.9rem;
}
/* Grid original responsivo */
.contact-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.contact-card {
padding: 1.5rem;
}
.contact-card-header {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.contact-icon-container {
width: 50px;
height: 50px;
}
.contact-icon {
font-size: 1.25rem;
}
.contact-cta-card {
padding: 2rem 1.5rem;
}
.contact-cta-card h3 {
font-size: 1.5rem;
}
.contact-cta-card p {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-button.secondary {
width: 100%;
max-width: 300px;
}
.cta-button.email-modern {
width: 100%;
max-width: 300px;
padding: 1rem 2rem;
}
.cta-button.email-modern .cta-icon {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
/* Layout ultra moderno para telas pequenas */
.contact-card-regions {
padding: 1.5rem;
}
.regions-info-ultra-modern .region-tag {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
/* Responsividade para regions-highlight em mobile */
.regions-highlight {
padding: 0.75rem 1rem;
gap: 0.5rem;
margin-top: 1.25rem;
}
.highlight-icon {
font-size: 1.25rem;
}
.highlight-text strong {
font-size: 0.85rem;
line-height: 1.3;
}
/* Cards originais para telas pequenas */
.contact-card {
padding: 1rem;
}
.contact-card-header h3 {
font-size: 1.1rem;
}
.contact-number {
font-size: 1rem;
}
.contact-description {
font-size: 0.85rem;
}
.contact-cta {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.contact-cta.email-modern {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.contact-cta.email-modern .cta-icon {
font-size: 0.9rem;
}
.contact-cta-card {
padding: 1.5rem 1rem;
}
.contact-cta-card h3 {
font-size: 1.25rem;
}
.contact-cta-card p {
font-size: 0.9rem;
}
.region-tag {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
}
.hours-day,
.hours-time {
font-size: 0.85rem;
}
}
/* ===== OTIMIZAÇÕES DE PERFORMANCE PARA MOBILE ===== */
/* Prevenção de layout shift em imagens */
img {
max-width: 100%;
height: auto;
display: block;
contain: layout style;
}
/* Otimização de animações para mobile */
@media (max-width: 768px) {
/* Reduzir complexidade de animações em mobile */
.glassmorphism::before,
.neumorphism::before {
animation: none;
}
/* Otimizar transições */
.service-card,
.region-card,
.seo-card,
.avaliacao-card,
.contact-card,
.stat-card,
.feature-item,
.why-choose-item {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Reduzir blur em mobile para performance */
.header {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Otimizar glassmorphism em mobile */
.glassmorphism {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Otimizações específicas para telas muito pequenas */
@media (max-width: 480px) {
/* Reduzir ainda mais as animações */
* {
animation-duration: 0.2s !important;
transition-duration: 0.2s !important;
}
/* Desabilitar animações complexas */
.stat-icon,
.seo-icon,
.contact-icon {
animation: none;
}
/* Otimizar grids */
.services-grid,
.regions-grid,
.seo-grid,
.avaliacoes-grid,
.contact-grid {
gap: 1rem;
}
/* Reduzir padding em cards */
.service-card,
.region-card,
.seo-card,
.avaliacao-card,
.contact-card {
padding: 1rem;
}
}
/* Otimizações de performance para conexões lentas */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Otimizações para conexões lentas */
.slow-connection * {
animation-duration: 0.1s !important;
transition-duration: 0.1s !important;
}
.slow-connection .glassmorphism::before,
.slow-connection .neumorphism::before {
animation: none !important;
}
.slow-connection .stat-icon,
.slow-connection .seo-icon,
.slow-connection .contact-icon {
animation: none !important;
}
/* Otimizações para movimento reduzido */
.reduced-motion * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.reduced-motion .glassmorphism::before,
.reduced-motion .neumorphism::before,
.reduced-motion .stat-icon,
.reduced-motion .seo-icon,
.reduced-motion .contact-icon {
animation: none !important;
}
/* Otimizações para modo de economia de bateria */
@media (prefers-reduced-motion: reduce) {
.glassmorphism::before,
.neumorphism::before,
.stat-icon,
.seo-icon,
.contact-icon {
animation: none;
}
}
/* Prevenção de CLS - Dimensões fixas para elementos críticos */
.hero-img {
width: 100%;
max-width: 500px;
height: auto;
contain: layout style;
}
.service-card,
.region-card,
.seo-card,
.avaliacao-card,
.contact-card {
min-height: 200px;
contain: layout style;
}
/* Otimização de font-display - Removido @font-face incompleto */
/* ===== BLOG SUPER MODERNO ===== */
/* Blog Hero Section */
.blog-hero {
position: relative;
background: linear-gradient(135deg,
var(--primary-blue) 0%,
var(--secondary-blue) 25%,
var(--accent-blue) 50%,
var(--light-blue) 100%);
padding: 8rem 0 4rem;
overflow: hidden;
min-height: 60vh;
display: flex;
align-items: center;
}
.blog-hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.blog-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}
.blog-hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: center;
}
.blog-hero-text {
color: var(--white);
}
.blog-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.breadcrumb-link {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-link:hover {
color: var(--white);
}
.breadcrumb-separator {
color: rgba(255, 255, 255, 0.6);
}
.breadcrumb-current {
color: var(--white);
font-weight: 500;
}
.blog-hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--white) 0%, rgba(255, 255, 255, 0.9) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.blog-hero-subtitle {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.9);
}
.blog-hero-description {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
max-width: 600px;
}
.blog-hero-stats {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.stat-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-2xl);
padding: 2rem;
text-align: center;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.stat-item:hover::before {
left: 100%;
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--white);
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* Blog Main Layout */
.blog-main {
padding: 4rem 0;
background: var(--gray-50);
min-height: 80vh;
}
.blog-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
/* Blog Posts */
.blog-posts {
display: flex;
flex-direction: column;
gap: 3rem;
}
.blog-post {
background: var(--white);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
position: relative;
}
.blog-post::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue), var(--accent-blue));
}
.blog-post:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
}
.blog-post.featured {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.9) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.post-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid var(--gray-200);
}
.post-category {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
padding: 0.5rem 1rem;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.post-date {
color: var(--gray-500);
font-size: 0.9rem;
font-weight: 500;
}
.post-content {
padding: 2rem;
}
.post-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
}
.post-title-link {
color: var(--gray-800);
text-decoration: none;
transition: color var(--transition-fast);
}
.post-title-link:hover {
color: var(--primary-blue);
}
.post-excerpt {
font-size: 1.1rem;
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 2rem;
}
.post-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--radius-xl);
border: 1px solid var(--gray-200);
transition: all var(--transition-normal);
}
.feature-item:hover {
background: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.feature-icon {
font-size: 2rem;
flex-shrink: 0;
}
.feature-text strong {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 0.5rem;
}
.feature-text p {
color: var(--gray-600);
font-size: 0.95rem;
line-height: 1.5;
}
.post-content-full {
margin-bottom: 2rem;
}
.post-content-full h4 {
font-size: 1.5rem;
font-weight: 600;
color: var(--gray-800);
margin: 2rem 0 1rem;
position: relative;
padding-left: 1rem;
}
.post-content-full h4::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
border-radius: 2px;
}
.post-content-full p {
color: var(--gray-700);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.post-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.post-list li {
position: relative;
padding-left: 2rem;
margin-bottom: 1rem;
color: var(--gray-700);
line-height: 1.6;
}
.post-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--primary-blue);
font-weight: 600;
font-size: 1.1rem;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.benefit-item {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.6) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-xl);
padding: 2rem;
text-align: center;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.benefit-item::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(transparent, rgba(59, 130, 246, 0.1), transparent);
animation: rotate 4s linear infinite;
opacity: 0;
transition: opacity var(--transition-normal);
}
.benefit-item:hover::before {
opacity: 1;
}
.benefit-item:hover {
transform: translateY(-5px) scale(1.02);
background: rgba(255, 255, 255, 0.95);
box-shadow: var(--shadow-xl);
}
.benefit-icon {
font-size: 3rem;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.benefit-content h5 {
font-size: 1.25rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.benefit-content p {
color: var(--gray-600);
line-height: 1.6;
position: relative;
z-index: 2;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.post-cta {
margin: 2rem 0;
text-align: center;
}
.post-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 2rem;
border-top: 1px solid var(--gray-200);
}
.post-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-blue);
}
.author-name {
font-weight: 600;
color: var(--gray-800);
font-size: 1rem;
}
.author-title {
color: var(--gray-500);
font-size: 0.9rem;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background: linear-gradient(135deg, var(--light-blue), rgba(219, 234, 254, 0.8));
color: var(--primary-blue);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-lg);
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* Blog Sidebar */
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.sidebar-widget {
background: var(--white);
border-radius: var(--radius-2xl);
padding: 2rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--gray-200);
transition: all var(--transition-normal);
}
.sidebar-widget:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.widget-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
border-radius: 2px;
}
.search-form {
display: flex;
gap: 0.5rem;
}
.search-input {
flex: 1;
padding: 1rem;
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
font-size: 1rem;
transition: all var(--transition-fast);
background: var(--white);
}
.search-input:focus {
outline: none;
border-color: var(--primary-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-button {
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
border: none;
border-radius: var(--radius-lg);
font-size: 1rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.search-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.categories-list {
list-style: none;
padding: 0;
margin: 0;
}
.categories-list li {
margin-bottom: 0.75rem;
}
.category-link {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--gray-600);
text-decoration: none;
padding: 0.75rem 1rem;
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
font-weight: 500;
}
.category-link:hover {
background: var(--light-blue);
color: var(--primary-blue);
transform: translateX(5px);
}
.category-count {
background: var(--gray-200);
color: var(--gray-600);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
}
.recent-posts-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.recent-post {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.recent-post-thumbnail {
width: 60px;
height: 60px;
border-radius: var(--radius-lg);
overflow: hidden;
flex-shrink: 0;
}
.recent-post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-post-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--gray-800);
text-decoration: none;
line-height: 1.4;
margin-bottom: 0.5rem;
display: block;
transition: color var(--transition-fast);
}
.recent-post-title:hover {
color: var(--primary-blue);
}
.recent-post-date {
color: var(--gray-500);
font-size: 0.8rem;
}
.contact-widget {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.9) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.widget-description {
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.widget-cta {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Newsletter Section */
.newsletter {
background: linear-gradient(135deg,
var(--primary-blue) 0%,
var(--secondary-blue) 50%,
var(--accent-blue) 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: float 20s ease-in-out infinite;
}
.newsletter-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.newsletter-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 1rem;
}
.newsletter-description {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.newsletter-input-group {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.newsletter-input {
flex: 1;
padding: 1.25rem 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--white);
font-size: 1rem;
transition: all var(--transition-normal);
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.newsletter-button {
padding: 1.25rem 2rem;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-xl);
color: var(--white);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.newsletter-button:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.button-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.newsletter-button:hover .button-glow {
left: 100%;
}
.newsletter-privacy {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin: 0;
}
/* Otimizações de scroll para mobile */
@media (max-width: 768px) {
html {
scroll-padding-top: 80px;
}
/* Melhorar performance de scroll */
.header {
transform: translateZ(0);
backface-visibility: hidden;
}
/* Otimizar elementos com scroll */
.hero,
.about,
.seo-content,
.avaliacoes,
.contact,
.footer {
transform: translateZ(0);
backface-visibility: hidden;
}
/* Blog Responsivo - Tablet */
.blog-hero {
padding: 6rem 0 3rem;
min-height: 50vh;
}
.blog-hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.blog-hero-title {
font-size: 2.5rem;
}
.blog-hero-subtitle {
font-size: 1.25rem;
}
.blog-hero-stats {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.stat-item {
padding: 1.5rem 1rem;
}
.stat-number {
font-size: 2rem;
}
.blog-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.blog-sidebar {
order: -1;
}
.post-features {
grid-template-columns: 1fr;
gap: 1rem;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.post-meta {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.newsletter-input-group {
flex-direction: column;
gap: 1rem;
}
.newsletter-button {
width: 100%;
}
}
/* Blog Responsivo - Mobile */
@media (max-width: 480px) {
.blog-hero {
padding: 5rem 0 2rem;
min-height: 40vh;
}
.blog-hero-title {
font-size: 2rem;
}
.blog-hero-subtitle {
font-size: 1.1rem;
}
.blog-hero-description {
font-size: 1rem;
}
.blog-hero-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.stat-item {
padding: 1rem;
}
.stat-number {
font-size: 1.75rem;
}
.stat-label {
font-size: 0.9rem;
}
.blog-main {
padding: 2rem 0;
}
.blog-layout {
gap: 2rem;
}
.sidebar-widget {
padding: 1.5rem;
}
.widget-title {
font-size: 1.25rem;
}
.post-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
padding: 1.5rem 1.5rem 1rem;
}
.post-content {
padding: 1.5rem;
}
.post-title {
font-size: 1.5rem;
}
.post-excerpt {
font-size: 1rem;
}
.feature-item {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.feature-icon {
font-size: 1.5rem;
}
.post-content-full h4 {
font-size: 1.25rem;
}
.benefit-item {
padding: 1.5rem;
}
.benefit-icon {
font-size: 2.5rem;
}
.post-author {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.post-tags {
justify-content: center;
}
.recent-post {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.recent-post-thumbnail {
width: 80px;
height: 80px;
margin: 0 auto;
}
.newsletter {
padding: 3rem 0;
}
.newsletter-title {
font-size: 2rem;
}
.newsletter-description {
font-size: 1rem;
}
.newsletter-input,
.newsletter-button {
padding: 1rem 1.25rem;
}
}
/* Animações do Blog */
.animate-in {
animation: slideInUp 0.6s ease-out forwards;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Performance optimizations para blog */
.blog-post,
.sidebar-widget,
.benefit-item {
will-change: transform;
transform: translateZ(0);
}
/* Lazy loading para imagens do blog */
.recent-post-thumbnail img,
.author-avatar {
transition: opacity 0.3s ease;
}
.recent-post-thumbnail img[loading="lazy"],
.author-avatar[loading="lazy"] {
opacity: 0;
}
.recent-post-thumbnail img[loading="lazy"].loaded,
.author-avatar[loading="lazy"].loaded {
opacity: 1;
}
/* Acessibilidade do blog */
.post-title-link:focus,
.category-link:focus,
.recent-post-title:focus {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
}
/* Estados de carregamento */
.blog-post.loading {
opacity: 0.6;
pointer-events: none;
}
/* SEO otimizations */
.blog-post time {
font-style: italic;
}
.post-content-full h4 {
scroll-margin-top: 100px;
}
/* ===== WEATHER WIDGET ULTRA MODERNO 2024 - OTIMIZADO ===== */
/* ===== WEATHER WIDGET ULTRA MODERNO 2024 - CARDS FINOS ===== */
.weather-widget {
position: relative;
font-family: 'Montserrat', sans-serif;
/* Glassmorphism Ultra Premium */
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 30%,
rgba(241, 245, 249, 0.85) 70%,
rgba(255, 255, 255, 0.9) 100%);
/* Efeito vidro premium */
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
/* Bordas premium com gradiente */
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 20px;
padding: 1rem 1.25rem;
/* Sombras premium em múltiplas camadas */
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.04),
0 8px 16px rgba(0, 0, 0, 0.03),
0 4px 8px rgba(0, 0, 0, 0.02),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -2px 4px rgba(0, 0, 0, 0.02);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
max-width: 280px;
min-width: 240px;
overflow: hidden;
margin-top: 1.25rem;
z-index: 5;
will-change: transform, box-shadow;
transform: translateZ(0);
}
/* Borda gradiente premium para o weather widget */
.weather-widget::before {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.3) 0%,
rgba(255, 255, 255, 0.5) 25%,
rgba(168, 85, 247, 0.2) 50%,
rgba(255, 255, 255, 0.4) 75%,
rgba(59, 130, 246, 0.25) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
}
/* Efeito de brilho sutil */
.weather-widget::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.8) 50%,
transparent 100%);
z-index: 1;
}
.weather-widget:hover {
transform: translateY(-4px) scale(1.02);
/* Sombras de hover ultra premium */
box-shadow:
0 48px 96px rgba(0, 0, 0, 0.08),
0 24px 48px rgba(0, 0, 0, 0.06),
0 12px 24px rgba(0, 0, 0, 0.04),
0 6px 12px rgba(0, 0, 0, 0.03),
inset 0 3px 6px rgba(255, 255, 255, 0.9),
inset 0 -3px 6px rgba(0, 0, 0, 0.03);
/* Efeito brilho premium */
background: linear-gradient(135deg,
rgba(255, 255, 255, 1) 0%,
rgba(248, 250, 252, 0.95) 30%,
rgba(241, 245, 249, 0.9) 70%,
rgba(255, 255, 255, 0.95) 100%);
}
.weather-widget:hover::after {
opacity: 1;
}
.weather-content {
display: flex;
align-items: center;
gap: 1.25rem;
position: relative;
z-index: 2;
}
/* Ícone do clima ultra moderno e fino */
.weather-icon {
font-size: 2rem;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
/* Neumorphism premium */
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(248, 250, 252, 0.8) 50%,
rgba(241, 245, 249, 0.7) 100%);
border-radius: 18px;
border: 2px solid transparent;
background-clip: padding-box;
/* Sombras neumórficas premium */
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.06),
-8px -8px 16px rgba(255, 255, 255, 0.8),
inset 2px 2px 4px rgba(255, 255, 255, 0.9),
inset -2px -2px 4px rgba(0, 0, 0, 0.04);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
/* Borda gradiente premium para o ícone do clima */
.weather-icon::before {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.4) 0%,
rgba(255, 255, 255, 0.6) 25%,
rgba(168, 85, 247, 0.3) 50%,
rgba(255, 255, 255, 0.5) 75%,
rgba(59, 130, 246, 0.35) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
}
.weather-icon::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.weather-widget:hover .weather-icon::before {
opacity: 1;
}
.weather-info {
flex: 1;
min-width: 0;
}
/* Temperatura ultra moderna e fina */
.weather-temp {
font-family: 'Montserrat', sans-serif;
font-size: 1.75rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.375rem;
letter-spacing: -0.5px;
/* Gradiente de texto premium */
background: linear-gradient(135deg,
#1e293b 0%,
#475569 30%,
#64748b 60%,
#334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* Sombra de texto premium */
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(0, 0, 0, 0.05);
position: relative;
}
.weather-temp::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
rgba(59, 130, 246, 0.3) 0%,
transparent 100%);
border-radius: 1px;
}
.weather-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Localização ultra moderna e fina */
.weather-location {
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.75px;
display: flex;
align-items: center;
/* Cor premium com gradiente sutil */
background: linear-gradient(135deg,
#64748b 0%,
#475569 50%,
#6b7280 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
gap: 0.25rem;
opacity: 0.9;
}
.weather-location::before {
content: '📍';
font-size: 0.7rem;
opacity: 0.8;
}
/* Elemento de chuva ultra moderno e fino */
.weather-rain {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
gap: 0.25rem;
color: #059669;
/* Badge premium com glassmorphism */
background: linear-gradient(135deg,
rgba(16, 185, 129, 0.15) 0%,
rgba(5, 150, 105, 0.1) 50%,
rgba(16, 185, 129, 0.08) 100%);
padding: 0.2rem 0.4rem;
border-radius: 12px;
border: 1.5px solid rgba(16, 185, 129, 0.2);
width: fit-content;
/* Sombra premium */
box-shadow:
0 4px 8px rgba(16, 185, 129, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.weather-rain::before {
content: '💧';
font-size: 0.75rem;
animation: rain-drop 2s ease-in-out infinite;
}
/* Status indicator ultra moderno e fino */
.weather-status {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.65rem;
color: #6b7280;
font-weight: 500;
margin-top: 0.375rem;
padding: 0.2rem 0.4rem;
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
opacity: 0.9;
}
.weather-status .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
animation: pulse-green-weather 2s ease-in-out infinite;
box-shadow:
0 0 8px rgba(34, 197, 94, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
}
.weather-status .status-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 3px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: pulse-inner-weather 2s ease-in-out infinite;
}
.weather-status.updating .status-dot {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
animation: pulse-yellow-weather 1s ease-in-out infinite;
box-shadow:
0 0 8px rgba(245, 158, 11, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.weather-status.error .status-dot {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
animation: pulse-red-weather 1s ease-in-out infinite;
box-shadow:
0 0 8px rgba(239, 68, 68, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Estados do clima - Ultra Modernos */
.weather-widget.sunny .weather-icon {
background: linear-gradient(135deg,
rgba(251, 191, 36, 0.15) 0%,
rgba(245, 158, 11, 0.1) 100%);
border-color: rgba(251, 191, 36, 0.25);
box-shadow:
0 8px 24px rgba(251, 191, 36, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.weather-widget.rainy .weather-icon {
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.15) 0%,
rgba(37, 99, 235, 0.1) 100%);
border-color: rgba(59, 130, 246, 0.25);
box-shadow:
0 8px 24px rgba(59, 130, 246, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.weather-widget.cloudy .weather-icon {
background: linear-gradient(135deg,
rgba(107, 114, 128, 0.15) 0%,
rgba(75, 85, 99, 0.1) 100%);
border-color: rgba(107, 114, 128, 0.25);
box-shadow:
0 8px 24px rgba(107, 114, 128, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.weather-widget.stormy .weather-icon {
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.15) 0%,
rgba(124, 58, 237, 0.1) 100%);
border-color: rgba(139, 92, 246, 0.25);
box-shadow:
0 8px 24px rgba(139, 92, 246, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.weather-widget.snowy .weather-icon {
background: linear-gradient(135deg,
rgba(219, 234, 254, 0.2) 0%,
rgba(147, 197, 253, 0.15) 100%);
border-color: rgba(147, 197, 253, 0.3);
box-shadow:
0 8px 24px rgba(147, 197, 253, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.weather-widget.foggy .weather-icon {
background: linear-gradient(135deg,
rgba(156, 163, 175, 0.15) 0%,
rgba(107, 114, 128, 0.1) 100%);
border-color: rgba(156, 163, 175, 0.25);
box-shadow:
0 8px 24px rgba(156, 163, 175, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Animações Otimizadas */
@keyframes pulse-green-weather {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes pulse-yellow-weather {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes pulse-red-weather {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes pulse-inner-weather {
0%, 100% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.3);
}
}
@keyframes rain-drop {
0%, 100% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(-2px);
opacity: 0.8;
}
}
/* Responsividade Ultra Otimizada para Mobile */
/* Responsividade Ultra Otimizada - Cards Finos */
@media (max-width: 768px) {
/* Botão WhatsApp moderno responsivo */
.cta-button.modern {
padding: 0.875rem 1.75rem;
font-size: 0.9rem;
border-radius: 14px;
}
.cta-icon {
font-size: 1.125rem;
}
.status-indicator {
width: 18px;
height: 18px;
font-size: 0.6rem;
top: -6px;
right: -6px;
}
/* Widget de clima responsivo - mais fino */
.weather-widget {
max-width: 260px;
min-width: 220px;
padding: 0.875rem 1rem;
margin-top: 1rem;
border-radius: 16px;
transform: translateZ(0);
will-change: auto;
}
.weather-content {
gap: 0.875rem;
}
.weather-icon {
font-size: 1.75rem;
width: 44px;
height: 44px;
border-radius: 14px;
}
.weather-temp {
font-size: 1.5rem;
}
.weather-location {
font-size: 0.7rem;
letter-spacing: 0.5px;
}
.weather-rain {
font-size: 0.65rem;
padding: 0.15rem 0.35rem;
border-radius: 8px;
}
.weather-status {
font-size: 0.6rem;
padding: 0.15rem 0.35rem;
border-radius: 8px;
}
}
@media (max-width: 480px) {
/* Botão WhatsApp ultra compacto */
.cta-button.modern {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
border-radius: 12px;
}
.cta-icon {
font-size: 1rem;
}
.status-indicator {
width: 16px;
height: 16px;
font-size: 0.55rem;
top: -5px;
right: -5px;
}
/* Widget de clima ultra compacto */
.weather-widget {
max-width: 240px;
min-width: 200px;
padding: 0.75rem 0.875rem;
margin-top: 0.875rem;
border-radius: 14px;
}
.weather-content {
gap: 0.75rem;
}
.weather-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
border-radius: 12px;
}
.weather-temp {
font-size: 1.375rem;
}
.weather-location {
font-size: 0.65rem;
letter-spacing: 0.4px;
}
.weather-rain {
font-size: 0.6rem;
padding: 0.125rem 0.3rem;
border-radius: 6px;
}
.weather-status {
font-size: 0.55rem;
padding: 0.125rem 0.3rem;
border-radius: 6px;
}
}
/* Otimizações de Performance */
@media (prefers-reduced-motion: reduce) {
.weather-widget,
.weather-icon,
.weather-status .status-dot,
.weather-status .status-dot::after,
.weather-rain::before {
animation: none !important;
transition: none !important;
}
}
/* Melhorias para dispositivos de baixa performance */
@media (max-width: 360px) {
.weather-widget {
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.weather-widget:hover {
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
}
/* ===== OTIMIZAÇÕES CRÍTICAS DE PERFORMANCE ===== */
/* Reduzir animações em dispositivos móveis para melhor performance */
@media (max-width: 768px) {
.whatsapp-smart,
.weather-widget,
.cta-button {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-smart:hover,
.weather-widget:hover {
transform: translateY(-1px) scale(1.005);
}
/* Reduzir complexidade de sombras em mobile */
.whatsapp-smart {
box-shadow:
0 8px 16px rgba(37, 211, 102, 0.15),
0 2px 4px rgba(0, 0, 0, 0.06) !important;
}
.weather-widget {
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(0, 0, 0, 0.02) !important;
}
}
/* Otimizações para dispositivos com baixa memória */
@media (max-width: 480px) {
/* Desabilitar backdrop-filter em dispositivos antigos */
.whatsapp-smart,
.weather-widget {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.95);
}
/* Simplificar gradientes */
.whatsapp-smart {
background: #25d366 !important;
}
/* Reduzir will-change para economizar memória */
.whatsapp-smart,
.weather-widget {
will-change: auto;
}
}
/* Otimizações para conexões lentas */
@media (prefers-reduced-data: reduce) {
.whatsapp-smart,
.weather-widget {
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.whatsapp-smart {
background: #25d366 !important;
}
}
/* Animações */
@keyframes weather-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
@keyframes pulse-yellow {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Responsividade */
@media (max-width: 768px) {
.weather-widget {
padding: 0.875rem 1rem;
max-width: 260px;
min-width: 220px;
margin-top: 1.25rem;
}
.weather-content {
gap: 0.875rem;
}
.weather-icon {
font-size: 1.75rem;
width: 42px;
height: 42px;
}
.weather-temp {
font-size: 1.375rem;
}
.weather-location {
font-size: 0.75rem;
}
.weather-rain {
font-size: 0.7rem;
}
.weather-status {
font-size: 0.65rem;
}
/* Responsividade para service-features em tablet */
.service-features {
gap: 0.4rem;
margin: 0.9rem 0;
}
.feature-tag {
padding: 0.325rem 0.75rem;
font-size: 0.775rem;
}
}
@media (max-width: 480px) {
.weather-widget {
padding: 0.75rem 0.875rem;
max-width: 240px;
min-width: 200px;
margin-top: 1rem;
}
.weather-content {
gap: 0.75rem;
}
.weather-icon {
font-size: 1.5rem;
width: 36px;
height: 36px;
}
.weather-temp {
font-size: 1.25rem;
}
.weather-location {
font-size: 0.7rem;
}
.weather-rain {
font-size: 0.65rem;
}
.weather-status {
font-size: 0.6rem;
}
.weather-status span:not(.status-dot) {
display: none;
}
/* Responsividade para service-features */
.service-features {
gap: 0.375rem;
margin: 0.875rem 0;
}
.feature-tag {
padding: 0.3rem 0.7rem;
font-size: 0.75rem;
}
}
/* ===== WHATSAPP SMART BUTTON ULTRA PREMIUM 2025 - GLASSMORPHISM ===== */
.whatsapp-smart {
position: relative;
overflow: visible !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* Glassmorphism Ultra Premium */
background: linear-gradient(135deg,
rgba(37, 211, 102, 0.95) 0%,
rgba(18, 140, 126, 0.9) 30%,
rgba(7, 94, 84, 0.85) 70%,
rgba(37, 211, 102, 0.9) 100%) !important;
/* Efeito vidro premium */
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
/* Sombras premium em camadas */
box-shadow:
0 32px 64px rgba(37, 211, 102, 0.25),
0 16px 32px rgba(37, 211, 102, 0.2),
0 8px 16px rgba(0, 0, 0, 0.1),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
/* Bordas premium com gradiente */
border: 2px solid transparent !important;
background-clip: padding-box;
position: relative;
will-change: transform, box-shadow;
transform: translateZ(0);
}
/* Borda gradiente premium */
.whatsapp-smart::before {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(37, 211, 102, 0.6) 25%,
rgba(255, 255, 255, 0.2) 50%,
rgba(37, 211, 102, 0.4) 75%,
rgba(255, 255, 255, 0.3) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
}
.whatsapp-smart:hover {
transform: translateY(-4px) scale(1.02) !important;
/* Sombras de hover ultra premium */
box-shadow:
0 48px 96px rgba(37, 211, 102, 0.35),
0 24px 48px rgba(37, 211, 102, 0.25),
0 12px 24px rgba(0, 0, 0, 0.15),
inset 0 3px 6px rgba(255, 255, 255, 0.4),
inset 0 -3px 6px rgba(0, 0, 0, 0.1) !important;
/* Efeito brilho premium */
background: linear-gradient(135deg,
rgba(37, 211, 102, 1) 0%,
rgba(18, 140, 126, 0.95) 30%,
rgba(7, 94, 84, 0.9) 70%,
rgba(37, 211, 102, 0.95) 100%) !important;
}
.whatsapp-smart:active {
transform: translateY(-2px) scale(0.99) !important;
transition: all 0.15s ease !important;
box-shadow:
0 16px 32px rgba(37, 211, 102, 0.3),
0 8px 16px rgba(0, 0, 0, 0.12),
inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
}
/* Status Indicator Ultra Premium */
.whatsapp-smart .status-indicator {
position: absolute;
top: -12px;
right: -12px;
display: flex;
align-items: center;
gap: 0.4rem;
/* Glassmorphism premium */
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 50%,
rgba(255, 255, 255, 0.92) 100%);
backdrop-filter: blur(25px) saturate(200%);
-webkit-backdrop-filter: blur(25px) saturate(200%);
/* Borda premium com gradiente */
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 50px;
padding: 0.4rem 0.8rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: #1e293b;
/* Sombras premium em camadas */
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.08),
0 4px 8px rgba(0, 0, 0, 0.04),
inset 0 2px 4px rgba(255, 255, 255, 0.6),
inset 0 -1px 2px rgba(0, 0, 0, 0.02);
z-index: 10;
animation: slideInFromTop 0.6s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
/* Borda gradiente sutil para o status indicator */
.whatsapp-smart .status-indicator::before {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
background: linear-gradient(135deg,
rgba(37, 211, 102, 0.3) 0%,
rgba(255, 255, 255, 0.5) 25%,
rgba(37, 211, 102, 0.2) 50%,
rgba(255, 255, 255, 0.4) 75%,
rgba(37, 211, 102, 0.25) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
animation: pulse-green-ultra 2s ease-in-out infinite;
box-shadow:
0 0 12px rgba(16, 185, 129, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
}
.status-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: pulse-inner 2s ease-in-out infinite;
}
.status-text {
color: #059669;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
font-size: 0.75rem;
}
/* Estados do botão - Ultra Modernos */
.whatsapp-smart.closed {
background: linear-gradient(135deg,
#64748b 0%,
#475569 50%,
#334155 100%) !important;
box-shadow:
0 20px 40px rgba(100, 116, 139, 0.3),
0 8px 16px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
border: 2px solid rgba(255, 255, 255, 0.05) !important;
}
.whatsapp-smart.closed:hover {
background: linear-gradient(135deg,
#475569 0%,
#334155 50%,
#1e293b 100%) !important;
box-shadow:
0 30px 60px rgba(100, 116, 139, 0.4),
0 12px 24px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.whatsapp-smart.closed .cta-icon {
animation: none;
filter: grayscale(0.6) brightness(0.8);
}
.whatsapp-smart.closed .status-dot {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
animation: pulse-red-ultra 2s ease-in-out infinite;
box-shadow:
0 0 12px rgba(239, 68, 68, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.whatsapp-smart.closed .status-text {
color: #dc2626;
}
/* Tooltip Ultra Moderno */
.whatsapp-smart::after {
content: attr(data-tooltip);
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.98) 0%,
rgba(30, 41, 59, 0.95) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1rem 1.2rem;
font-size: 0.9rem;
font-weight: 600;
color: #f1f5f9;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 8px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
white-space: normal;
text-align: center;
line-height: 1.5;
max-width: 320px;
z-index: 1000;
}
.whatsapp-smart::before {
content: '';
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(30, 41, 59, 0.95);
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.whatsapp-smart.closed:hover::after,
.whatsapp-smart.closed:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-8px);
}
/* Animações Otimizadas */
@keyframes pulse-green-ultra {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes pulse-red-ultra {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes pulse-inner {
0%, 100% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
}
@keyframes slideInFromTop {
0% {
opacity: 0;
transform: translateY(-20px) scale(0.8);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsividade Ultra Otimizada para Mobile */
@media (max-width: 768px) {
.whatsapp-smart {
transform: translateZ(0);
will-change: auto;
}
.whatsapp-smart .status-indicator {
top: -8px;
right: -8px;
padding: 0.3rem 0.6rem;
font-size: 0.7rem;
border-radius: 20px;
}
.status-dot {
width: 8px;
height: 8px;
}
.status-dot::after {
width: 3px;
height: 3px;
}
.whatsapp-smart::after {
bottom: -80px;
font-size: 0.8rem;
padding: 0.8rem 1rem;
max-width: 280px;
border-radius: 12px;
}
.whatsapp-smart::before {
bottom: -70px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(30, 41, 59, 0.95);
}
}
@media (max-width: 480px) {
.whatsapp-smart {
/* Otimização para touch devices */
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.whatsapp-smart .status-indicator {
position: static;
margin-top: 0.6rem;
align-self: center;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 100%);
border-radius: 18px;
padding: 0.4rem 0.7rem;
font-size: 0.7rem;
}
.whatsapp-smart::after {
bottom: -90px;
font-size: 0.75rem;
padding: 0.7rem 0.9rem;
max-width: 260px;
border-radius: 10px;
}
.whatsapp-smart::before {
bottom: -80px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(30, 41, 59, 0.95);
}
}
/* Otimizações de Performance */
@media (prefers-reduced-motion: reduce) {
.whatsapp-smart,
.whatsapp-smart .status-indicator,
.status-dot,
.status-dot::after {
animation: none !important;
transition: none !important;
}
}
/* Melhorias para dispositivos de baixa performance */
@media (max-width: 360px) {
.whatsapp-smart {
box-shadow:
0 15px 30px rgba(37, 211, 102, 0.25),
0 5px 10px rgba(0, 0, 0, 0.1) !important;
}
.whatsapp-smart:hover {
box-shadow:
0 20px 40px rgba(37, 211, 102, 0.3),
0 8px 16px rgba(0, 0, 0, 0.12) !important;
}
}
/* ===== MODAL DE PROMOÇÃO ULTRA PREMIUM ===== */
/* Ícone flutuante premium */
.promo-float-icon {
position: fixed;
top: 80px;
right: 15px;
z-index: 998;
opacity: 1;
visibility: visible;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
contain: layout style;
}
.promo-float-content {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Montserrat', sans-serif;
/* Glassmorphism ultra premium */
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 50%,
rgba(255, 255, 255, 0.85) 100%);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
padding: 0.5rem 0.75rem;
border-radius: 16px;
border: 2px solid transparent;
background-clip: padding-box;
/* Sombras premium */
box-shadow:
0 16px 32px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.04),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -1px 2px rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
will-change: transform;
}
/* Borda gradiente premium */
.promo-float-content::before {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
background: linear-gradient(135deg,
rgba(255, 107, 107, 0.6) 0%,
rgba(255, 255, 255, 0.4) 25%,
rgba(238, 90, 36, 0.5) 50%,
rgba(255, 255, 255, 0.3) 75%,
rgba(255, 107, 107, 0.4) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
}
.promo-float-content:hover {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.12),
0 12px 24px rgba(0, 0, 0, 0.08),
inset 0 3px 6px rgba(255, 255, 255, 0.9),
inset 0 -2px 4px rgba(0, 0, 0, 0.03);
}
.promo-float-icon-symbol {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
font-size: 1rem;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
border-radius: 12px;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:
0 6px 12px rgba(238, 90, 36, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: pulse-promo 2s ease-in-out infinite;
}
.promo-float-text {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
padding: 0.375rem 0.75rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:
0 4px 8px rgba(238, 90, 36, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Modal ultra premium */
.promo-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
contain: layout style;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.promo-modal.visible {
opacity: 1;
visibility: visible;
}
.promo-modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
/* Tamanho otimizado para todas as telas */
width: 90%;
max-width: 420px;
min-width: 320px;
max-height: 85vh;
font-family: 'Montserrat', sans-serif;
/* Glassmorphism ultra premium */
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 50%,
rgba(255, 255, 255, 0.92) 100%);
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
border-radius: 24px;
border: 2px solid transparent;
background-clip: padding-box;
overflow: hidden;
/* Sombras premium em camadas */
box-shadow:
0 32px 64px rgba(0, 0, 0, 0.15),
0 16px 32px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.05),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 -2px 4px rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
z-index: 1000;
}
/* Borda gradiente premium para o modal */
.promo-modal-content::before {
content: '';
position: absolute;
inset: -2px;
padding: 2px;
background: linear-gradient(135deg,
rgba(255, 107, 107, 0.4) 0%,
rgba(255, 255, 255, 0.6) 25%,
rgba(238, 90, 36, 0.3) 50%,
rgba(255, 255, 255, 0.5) 75%,
rgba(255, 107, 107, 0.2) 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
z-index: -1;
}
.promo-modal.visible .promo-modal-content {
transform: translate(-50%, -50%) scale(1);
}
/* Header premium */
.promo-modal-header {
background: linear-gradient(135deg,
rgba(255, 107, 107, 0.95) 0%,
rgba(238, 90, 36, 0.9) 50%,
rgba(255, 107, 107, 0.85) 100%);
color: white;
padding: 1rem;
text-align: center;
position: relative;
border-radius: 24px 24px 0 0;
/* Efeito glassmorphism no header */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 4px 8px rgba(238, 90, 36, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.promo-modal-title {
margin: 0;
font-size: 1.2rem;
font-weight: 800;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
letter-spacing: 0.5px;
background: linear-gradient(135deg,
#ffffff 0%,
#fff5f5 50%,
#ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.promo-modal-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
font-weight: bold;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.promo-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Body premium */
.promo-modal-body {
padding: 1.25rem;
text-align: center;
overflow-y: auto;
position: relative;
max-height: calc(85vh - 140px);
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Animação premium */
/* Elementos internos premium */
.promo-modal-icon {
margin: 0;
order: 1;
}
.promo-icon-large {
font-size: 2.5rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.promo-regions-section {
order: 2;
}
.promo-regions-title {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: #374151;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.promo-regions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0;
}
.promo-region-tag {
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 600;
padding: 0.5rem;
border-radius: 12px;
/* Glassmorphism para tags */
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.1) 0%,
rgba(147, 197, 253, 0.05) 100%);
border: 1.5px solid rgba(59, 130, 246, 0.2);
color: #1e40af;
/* Sombra sutil */
box-shadow:
0 4px 8px rgba(59, 130, 246, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.promo-regions-rule {
background: linear-gradient(135deg,
rgba(251, 191, 36, 0.1) 0%,
rgba(245, 158, 11, 0.05) 100%);
border: 1.5px solid rgba(251, 191, 36, 0.3);
border-radius: 12px;
padding: 0.75rem;
margin: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
order: 3;
}
.regions-rule-text {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
color: #92400e;
margin: 0;
line-height: 1.4;
}
.rule-highlight {
font-weight: 700;
color: #d97706;
}
.promo-banner-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
order: 4;
}
.banner-info-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.08) 0%,
rgba(147, 197, 253, 0.04) 100%);
border-radius: 10px;
border: 1px solid rgba(59, 130, 246, 0.15);
}
.banner-info-icon {
font-size: 1rem;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.banner-info-text {
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: #1e40af;
}
.promo-price-section {
margin: 0;
order: 5;
}
.promo-price {
margin-bottom: 0.5rem;
}
.price-amount {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.price-per {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
color: #6b7280;
font-weight: 500;
}
.promo-payment-info {
background: linear-gradient(135deg,
rgba(16, 185, 129, 0.1) 0%,
rgba(5, 150, 105, 0.05) 100%);
border: 1.5px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 0.75rem;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
order: 6;
}
.payment-icon {
font-size: 1rem;
color: #059669;
}
.payment-text {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #059669;
}
.promo-cta {
margin: 0;
padding: 0;
order: 7;
display: flex;
justify-content: center;
align-items: center;
}
.promo-whatsapp-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 2rem;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
color: white !important;
/* Glassmorphism premium */
background: linear-gradient(135deg,
rgba(37, 211, 102, 0.95) 0%,
rgba(18, 140, 126, 0.9) 50%,
rgba(37, 211, 102, 0.85) 100%) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
border: 2px solid transparent;
background-clip: padding-box;
/* Sombras premium */
box-shadow:
0 16px 32px rgba(37, 211, 102, 0.3),
0 8px 16px rgba(0, 0, 0, 0.1),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
will-change: transform;
z-index: 10;
position: relative;
/* Garantir visibilidade do texto */
overflow: visible !important;
white-space: nowrap;
}
.promo-whatsapp-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 24px 48px rgba(37, 211, 102, 0.4),
0 12px 24px rgba(0, 0, 0, 0.15),
inset 0 3px 6px rgba(255, 255, 255, 0.4);
}
.promo-whatsapp-btn span {
color: white !important;
display: inline-block !important;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
z-index: 10;
position: relative;
}
.promo-whatsapp-btn .whatsapp-icon {
font-size: 1.2rem;
animation: pulse 2s infinite;
color: white !important;
display: inline-block !important;
z-index: 10;
position: relative;
}
/* Responsividade ultra premium */
@media (max-width: 768px) {
.promo-float-icon {
right: 12px;
top: 70px;
}
.promo-float-content {
padding: 0.4rem;
gap: 0.375rem;
border-radius: 14px;
}
.promo-float-icon-symbol {
width: 32px;
height: 32px;
font-size: 0.9rem;
border-radius: 10px;
}
.promo-float-text {
font-size: 0.65rem;
padding: 0.3rem 0.6rem;
border-radius: 10px;
}
.promo-modal-content {
width: 85%;
max-width: 380px;
max-height: 85vh;
}
.promo-modal-body {
padding: 1rem;
gap: 0.875rem;
}
.promo-modal-title {
font-size: 1.1rem;
}
.promo-icon-large {
font-size: 2rem;
}
.promo-regions-grid {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.promo-region-tag {
font-size: 0.7rem;
padding: 0.4rem;
}
.price-amount {
font-size: 1.8rem;
}
.promo-whatsapp-btn {
padding: 0.875rem 1.5rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.promo-float-icon {
right: 8px;
top: 60px;
}
.promo-float-content {
padding: 0.35rem;
gap: 0.3rem;
border-radius: 12px;
}
.promo-float-icon-symbol {
width: 28px;
height: 28px;
font-size: 0.8rem;
border-radius: 8px;
}
.promo-float-text {
font-size: 0.6rem;
padding: 0.25rem 0.5rem;
border-radius: 8px;
}
.promo-modal-content {
width: 90%;
max-width: 360px;
max-height: 90vh;
border-radius: 20px;
}
.promo-modal-header {
padding: 0.75rem;
border-radius: 20px 20px 0 0;
}
.promo-modal-title {
font-size: 1rem;
}
.promo-modal-close {
width: 24px;
height: 24px;
top: 0.5rem;
right: 0.5rem;
font-size: 1rem;
}
.promo-modal-body {
padding: 0.875rem;
}
.promo-icon-large {
font-size: 1.8rem;
}
.promo-regions-title {
font-size: 0.8rem;
}
.promo-region-tag {
font-size: 0.65rem;
padding: 0.35rem;
}
.banner-info-text {
font-size: 0.7rem;
}
.price-amount {
font-size: 1.6rem;
}
.price-per {
font-size: 0.7rem;
}
.promo-whatsapp-btn {
padding: 0.75rem 1.25rem;
font-size: 0.85rem;
border-radius: 14px;
}
.whatsapp-icon {
font-size: 1rem;
}
}
/* Animação premium */
@keyframes pulse-promo {
0%, 100% {
transform: scale(1);
box-shadow:
0 6px 12px rgba(238, 90, 36, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.05);
box-shadow:
0 8px 16px rgba(238, 90, 36, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
}