/* ===== VARIÁVEIS CSS RDS TRANSPORTES ===== */
:root {
/* Cores principais */
--cor-azul-primario: #1a3246 ;
--cor-azul-escuro: #1a3246 ;
--cor-whatsapp: #f59e0b;
--cor-texto-secundario: #666;
/* Espaçamentos */
--espacamento-secao-desktop: 100px;
--espacamento-secao-tablet: 60px;
--espacamento-secao-mobile: 40px;
/* Border radius */
--border-radius-pequeno: 8px;
--border-radius-medio: 12px;
--border-radius-grande: 20px;
}
/* ===== HEADER STYLES - RDS TRANSPORTES ===== */
/* Header Superior */
.header-top {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%) !important;
font-size: 0.875rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-top a {
transition: opacity 0.3s ease;
}
.header-top a:hover {
opacity: 0.8;
}
.contact-info i {
font-size: 0.75rem;
opacity: 0.9;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.social-links a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Header Principal */
.main-header {
transition: all 0.3s ease;
z-index: 1000;
}
.main-header.scrolled {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}
.navbar-brand {
transition: transform 0.3s ease;
}
.navbar-brand:hover {
transform: scale(1.05);
}
.logo-img {
max-height: 180px;
width: auto;
transition: all 0.3s ease;
}
/* Menu de Navegação */
.navbar-nav .nav-link {
color: #333 !important;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
position: relative;
transition: all 0.3s ease;
margin: 0 5px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: #1a3246 !important;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 1px;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
width: 80%;
}
/* Dropdown Menu */
.dropdown-menu {
border: none;
border-radius: 12px;
padding: 1rem 0;
margin-top: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.3s ease;
}
.dropdown-item {
color: #333 !important;
font-weight: 500;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), transparent);
color: #1a3246 !important;
border-left-color: #1a3246;
transform: translateX(5px);
}
/* Botão de Ação */
.btn-success {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
border: none;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.btn-success:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-success:active {
transform: translateY(0);
}
/* Mobile Menu Toggle */
.navbar-toggler {
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.navbar-toggler:hover {
background: rgba(0, 102, 204, 0.1);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}
/* Animações */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== RESPONSIVIDADE ===== */
/* Tablets */
@media (max-width: 991.98px) {
.navbar-nav {
padding: 1rem 0;
background: #fff;
border-radius: 12px;
margin-top: 1rem;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
border-radius: 8px;
margin: 0.25rem 0;
}
.navbar-nav .nav-link::after {
display: none;
}
.navbar-nav .nav-link:hover {
background: rgba(0, 102, 204, 0.1);
}
.btn-success {
margin-top: 1rem;
justify-content: center !important;
width: 100%;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.logo-img {
max-height: 180px;
}
.navbar-brand {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.navbar-toggler {
padding: 0.375rem;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.contact-info {
flex-direction: column;
gap: 0.5rem;
}
.contact-info span {
margin-right: 0 !important;
}
.social-links span {
display: none;
}
}
/* ===== PERFORMANCE & ACCESSIBILITY ===== */
/* Reduzir motion para usuários com preferência */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Alto contraste */
@media (prefers-contrast: high) {
.navbar-nav .nav-link {
border: 1px solid transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
border-color: #1a3246;
background: rgba(0, 102, 204, 0.1);
}
}
/* Melhor foco para navegação por teclado */
.nav-link:focus,
.btn:focus,
.dropdown-item:focus {
outline: 2px solid #1a3246;
outline-offset: 2px;
}
/* ===== UTILITÁRIOS ADICIONAIS ===== */
/* Sticky header com transição suave */
.sticky-top {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Loading state para logo */
.logo-img[src=""] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ===== APRESENTAÇÃO EMPRESA 01 - VERSÃO ORIGINAL ===== */
.empresa-apresentacao {
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
overflow: hidden;
}
/* Badge/Tag de destaque */
.empresa-badge {
display: inline-block;
}
.badge-text {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Título da apresentação */
.apresentacao-titulo {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
line-height: 1.2;
margin-bottom: 1.5rem;
position: relative;
}
.apresentacao-titulo::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 2px;
}
/* Texto descritivo */
.apresentacao-texto {
font-size: 1.125rem;
color: #6c757d;
line-height: 1.6;
}
/* Features/Características */
.empresa-features {
margin: 2rem 0;
}
.feature-item {
padding: 1rem 0;
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateX(10px);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.2);
transition: all 0.3s ease;
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
.feature-text strong {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
}
.feature-text small {
color: #6c757d;
font-size: 0.875rem;
}
/* Botões de ação */
.apresentacao-actions {
margin-top: 2rem;
}
.btn-whatsapp {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
border: none;
color: white;
font-weight: 600;
border-radius: 50px;
padding: 0.75rem 2rem;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.btn-whatsapp::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-whatsapp:hover::before {
left: 100%;
}
.btn-whatsapp:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-outline-primary {
border: 2px solid #1a3246;
color: #1a3246;
background: transparent;
font-weight: 600;
border-radius: 50px;
padding: 0.75rem 2rem;
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
/* Visual da apresentação */
.apresentacao-visual {
position: relative;
z-index: 2;
}
.main-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.main-image-wrapper:hover {
transform: translateY(-10px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}
.main-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.main-image-wrapper:hover .main-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(37, 211, 102, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.main-image-wrapper:hover .image-overlay {
opacity: 1;
}
/* Card de estatísticas flutuante */
.stats-card {
bottom: -30px;
right: -30px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
animation: floatCard 3s ease-in-out infinite;
}
@keyframes floatCard {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.stats-content {
display: flex;
align-items: center;
gap: 1rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 1.5rem;
font-weight: 700;
color: #1a3246;
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
color: #6c757d;
font-weight: 500;
margin-top: 0.25rem;
}
.stat-divider {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, #dee2e6, transparent);
}
/* Elementos decorativos flutuantes */
.decorative-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.floating-element {
position: absolute;
width: 60px;
height: 60px;
background: rgba(0, 102, 204, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a3246;
font-size: 1.5rem;
backdrop-filter: blur(10px);
}
.element-1 {
top: 10%;
left: -10%;
animation: float1 6s ease-in-out infinite;
}
.element-2 {
top: 60%;
right: -15%;
animation: float2 8s ease-in-out infinite;
}
.element-3 {
bottom: 20%;
left: -5%;
animation: float3 7s ease-in-out infinite;
}
@keyframes float1 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -20px) rotate(180deg); }
}
@keyframes float2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-30px, 15px) rotate(-180deg); }
}
@keyframes float3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(15px, -25px) rotate(90deg); }
}
/* Background decorativo da seção */
.section-bg-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.bg-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(37, 211, 102, 0.05));
}
.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
animation: rotate 20s linear infinite;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: -100px;
animation: rotate 30s linear infinite reverse;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== SEÇÃO DE NÚMEROS/CONQUISTAS - VERSÃO 01 ===== */
.numeros-conquistas {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.numero-item {
padding: 1.5rem 1rem;
text-align: center;
transition: all 0.3s ease;
border-radius: 12px;
}
.numero-item:hover {
background: rgba(0, 102, 204, 0.05);
transform: translateY(-5px);
}
.numero-icon {
color: #1a3246;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.numero-value {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
line-height: 1;
margin-bottom: 0.25rem;
}
.numero-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== RESPONSIVIDADE - APRESENTAÇÃO EMPRESA 01 ===== */
/* Tablets */
@media (max-width: 991.98px) {
.apresentacao-titulo {
font-size: 2rem;
}
.stats-card {
position: static;
margin-top: 2rem;
transform: none !important;
}
.floating-element {
display: none;
}
.apresentacao-actions {
flex-direction: column;
gap: 1rem;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.empresa-apresentacao {
padding: 3rem 0;
}
.apresentacao-titulo {
font-size: 1.75rem;
text-align: center;
}
.apresentacao-texto {
text-align: center;
font-size: 1rem;
}
.feature-item {
text-align: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
}
.feature-item:hover {
transform: translateY(-5px);
}
.stats-content {
flex-direction: column;
gap: 1rem;
}
.stat-divider {
width: 40px;
height: 1px;
}
.numero-value {
font-size: 2rem;
}
.bg-shape {
display: none;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.apresentacao-titulo {
font-size: 1.5rem;
}
.badge-text {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}
.feature-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.btn-whatsapp,
.btn-outline-primary {
padding: 0.625rem 1.5rem;
font-size: 0.875rem;
}
.stats-card {
padding: 1rem;
}
.stat-number {
font-size: 1.25rem;
}
.numero-item {
padding: 1rem 0.5rem;
}
.numero-value {
font-size: 1.75rem;
}
}
/* ===== ANIMAÇÕES AOS (Animate On Scroll) ===== */
[data-aos] {
opacity: 0;
transition: opacity 0.6s ease;
}
[data-aos].aos-animate {
opacity: 1;
}
/* Otimizações de performance */
.empresa-apresentacao *,
.numeros-conquistas * {
will-change: auto;
}
.empresa-apresentacao:hover *,
.numeros-conquistas:hover * {
will-change: transform;
}
/* ===== CONTADORES ANIMADOS ===== */
.numero-value {
counter-reset: counter;
animation: countUp 2s ease-out;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== APRESENTAÇÃO EMPRESA 2 - VERSÃO ALTERNATIVA ===== */
.apresentacao-empresa-v2 {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
overflow: hidden;
display: flex;
align-items: center;
}
/* Coluna da Imagem - V2 */
.img-container-v2 {
position: relative;
height: 100vh;
overflow: hidden;
}
.img-principal-v2 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: brightness(1.1) contrast(1.05);
}
.img-container-v2:hover .img-principal-v2 {
transform: scale(1.08);
}
/* Overlay com Gradiente - V2 */
.overlay-v2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 102, 204, 0.2) 0%,
rgba(37, 211, 102, 0.15) 50%,
rgba(0, 102, 204, 0.3) 100%
);
z-index: 1;
}
/* Card Flutuante - V2 */
.card-flutuante-v2 {
position: absolute;
top: 15%;
right: 8%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: 3;
animation: floatCardV2 4s ease-in-out infinite;
}
@keyframes floatCardV2 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(1deg); }
}
.card-inner-v2 {
text-align: center;
}
.numero-destaque-v2 {
font-size: 3rem;
font-weight: 800;
color: #1a3246;
line-height: 1;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}
.texto-destaque-v2 {
font-size: 0.875rem;
color: #6c757d;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Elementos Decorativos - V2 */
.decorativo-v2 {
position: absolute;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.3);
z-index: 2;
}
.decorativo-1 {
top: 25%;
left: 10%;
animation: floatDecorativo1V2 6s ease-in-out infinite;
}
.decorativo-2 {
bottom: 25%;
right: 15%;
animation: floatDecorativo2V2 8s ease-in-out infinite;
}
@keyframes floatDecorativo1V2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(15px, -20px) rotate(180deg); }
}
@keyframes floatDecorativo2V2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-20px, 15px) rotate(-180deg); }
}
/* Coluna do Conteúdo - V2 */
.conteudo-v2 {
padding: 4rem 3rem;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
/* Badge de Qualidade - V2 */
.badge-qualidade-v2 {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
animation: badgePulseV2 3s ease-in-out infinite;
width: fit-content;
}
@keyframes badgePulseV2 {
0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4); }
}
.badge-icon-v2 {
margin-right: 0.75rem;
font-size: 1rem;
}
/* Título Principal - V2 */
.titulo-principal-v2 {
font-size: 2.75rem;
font-weight: 700;
color: #2c3e50;
line-height: 1.2;
margin-bottom: 1.5rem;
position: relative;
}
.titulo-principal-v2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 2px;
animation: lineGrowV2 2s ease-out;
}
@keyframes lineGrowV2 {
0% { width: 0; }
100% { width: 80px; }
}
/* Texto Descritivo - V2 */
.descricao-v2 {
margin-bottom: 2.5rem;
}
.texto-principal-v2 {
font-size: 1.125rem;
color: #6c757d;
line-height: 1.7;
margin: 0;
}
/* Benefícios - V2 */
.beneficios-v2 {
margin-bottom: 3rem;
}
.beneficio-item-v2 {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem 0;
transition: all 0.3s ease;
border-radius: 12px;
}
.beneficio-item-v2:hover {
background: rgba(0, 102, 204, 0.05);
transform: translateX(10px);
padding-left: 1rem;
}
.beneficio-icon-v2 {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f59e0b, #20c659);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
margin-right: 1rem;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.beneficio-item-v2:hover .beneficio-icon-v2 {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.beneficio-texto-v2 {
display: flex;
flex-direction: column;
}
.beneficio-texto-v2 strong {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.beneficio-texto-v2 span {
color: #6c757d;
font-size: 0.875rem;
}
/* Botões de Ação - V2 */
.acoes-v2 {
display: flex;
gap: 1rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.btn-whatsapp-v2 {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
min-width: 200px;
justify-content: center;
}
.btn-whatsapp-v2:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5);
color: white;
text-decoration: none;
}
.btn-icon-v2 {
margin-right: 0.75rem;
font-size: 1.2rem;
animation: pulseIconV2 2s ease-in-out infinite;
}
@keyframes pulseIconV2 {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.btn-texto-v2 {
position: relative;
z-index: 2;
}
.btn-pulse-v2 {
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;
}
.btn-whatsapp-v2:hover .btn-pulse-v2 {
left: 100%;
}
.btn-saiba-mais-v2 {
display: inline-flex;
align-items: center;
color: #1a3246;
text-decoration: none;
padding: 1rem 2rem;
border: 2px solid #1a3246;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
min-width: 160px;
justify-content: center;
gap: 0.5rem;
}
.btn-saiba-mais-v2:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
text-decoration: none;
}
.btn-saiba-mais-v2 i {
transition: transform 0.3s ease;
}
.btn-saiba-mais-v2:hover i {
transform: translateX(5px);
}
/* Avaliação - V2 */
.avaliacao-v2 {
text-align: center;
padding: 1.5rem;
background: rgba(255, 193, 7, 0.1);
border-radius: 15px;
border: 1px solid rgba(255, 193, 7, 0.2);
}
.estrelas-v2 {
margin-bottom: 1rem;
}
.estrelas-v2 i {
color: #ffc107;
font-size: 1.25rem;
margin: 0 0.125rem;
animation: estrelaV2 0.5s ease-in-out;
animation-delay: calc(var(--i) * 0.1s);
}
.estrelas-v2 i:nth-child(1) { --i: 1; }
.estrelas-v2 i:nth-child(2) { --i: 2; }
.estrelas-v2 i:nth-child(3) { --i: 3; }
.estrelas-v2 i:nth-child(4) { --i: 4; }
.estrelas-v2 i:nth-child(5) { --i: 5; }
@keyframes estrelaV2 {
0% { transform: scale(0) rotate(0deg); opacity: 0; }
50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
100% { transform: scale(1) rotate(360deg); opacity: 1; }
}
.texto-avaliacao-v2 {
color: #6c757d;
font-size: 0.9rem;
margin: 0;
line-height: 1.5;
}
.texto-avaliacao-v2 strong {
color: #1a3246;
font-weight: 700;
}
/* Formas Decorativas de Fundo - V2 */
.formas-fundo-v2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.forma-1-v2,
.forma-2-v2,
.forma-3-v2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.03), rgba(37, 211, 102, 0.05));
}
.forma-1-v2 {
width: 400px;
height: 400px;
top: -200px;
right: -200px;
animation: rotateFormaV2 25s linear infinite;
}
.forma-2-v2 {
width: 300px;
height: 300px;
bottom: -150px;
left: -150px;
animation: rotateFormaV2 35s linear infinite reverse;
}
.forma-3-v2 {
width: 200px;
height: 200px;
top: 50%;
right: 10%;
animation: rotateFormaV2 20s linear infinite;
}
@keyframes rotateFormaV2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== RESPONSIVIDADE - APRESENTAÇÃO EMPRESA 2 ===== */
/* Tablets - V2 */
@media (max-width: 991.98px) {
.apresentacao-empresa-v2 {
min-height: auto;
}
.img-container-v2 {
height: 60vh;
}
.conteudo-v2 {
height: auto;
padding: 3rem 2rem;
}
.titulo-principal-v2 {
font-size: 2.25rem;
text-align: center;
}
.card-flutuante-v2 {
position: static;
margin: 2rem auto;
max-width: 250px;
}
.decorativo-v2 {
display: none;
}
.acoes-v2 {
justify-content: center;
}
}
/* Mobile - V2 */
@media (max-width: 767.98px) {
.ordem-img-mobile {
order: 2;
}
.apresentacao-empresa-v2 .col-lg-5 {
order: 1;
}
.img-container-v2 {
height: 50vh;
}
.conteudo-v2 {
padding: 2rem 1.5rem;
text-align: center;
}
.titulo-principal-v2 {
font-size: 2rem;
}
.badge-qualidade-v2 {
margin: 0 auto 2rem auto;
}
.beneficio-item-v2 {
text-align: left;
}
.beneficio-item-v2:hover {
transform: translateY(-3px);
padding-left: 0;
}
.acoes-v2 {
flex-direction: column;
align-items: center;
}
.btn-whatsapp-v2,
.btn-saiba-mais-v2 {
width: 100%;
max-width: 280px;
}
}
/* Mobile Small - V2 */
@media (max-width: 575.98px) {
.conteudo-v2 {
padding: 1.5rem 1rem;
}
.titulo-principal-v2 {
font-size: 1.75rem;
}
.badge-qualidade-v2 {
font-size: 0.8rem;
padding: 0.625rem 1.25rem;
}
.beneficio-icon-v2 {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.texto-principal-v2 {
font-size: 1rem;
}
.btn-whatsapp-v2,
.btn-saiba-mais-v2 {
padding: 0.875rem 1.5rem;
font-size: 0.9rem;
}
.numero-destaque-v2 {
font-size: 2.5rem;
}
.card-flutuante-v2 {
padding: 1.5rem 1rem;
}
}
/* ===== APRESENTAÇÃO EMPRESA 3 - VERSÃO EXPERIÊNCIA ===== */
.apresentacao-empresa-v3 {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #f8fafe 50%, #f0f7ff 100%);
overflow: hidden;
display: flex;
align-items: center;
}
/* Conteúdo Principal - V3 */
.conteudo-experiencia-v3 {
background: linear-gradient(135deg, #1a3246 0%, #0052a3 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.conteudo-experiencia-v3::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
transform: skewX(-15deg);
animation: shineEffectV3 3s ease-in-out infinite;
}
@keyframes shineEffectV3 {
0%, 100% { opacity: 0; transform: skewX(-15deg) translateX(-100px); }
50% { opacity: 1; transform: skewX(-15deg) translateX(50px); }
}
.conteudo-wrapper-v3 {
padding: 3rem 2.5rem;
color: white;
text-align: left;
position: relative;
z-index: 2;
max-width: 500px;
}
/* Título Principal - V3 */
.titulo-destaque-v3 {
margin-bottom: 2rem;
position: relative;
}
.titulo-experiencia-v3 {
font-size: 2.75rem;
font-weight: 800;
line-height: 1.1;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
animation: titleSlideInV3 1s ease-out;
}
@keyframes titleSlideInV3 {
0% {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Texto da Experiência - V3 */
.texto-experiencia-v3 {
margin-bottom: 2.5rem;
}
.descricao-experiencia-v3 {
font-size: 1.125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
margin: 0;
animation: textFadeInV3 1s ease-out 0.3s both;
}
.descricao-experiencia-v3 strong {
color: #ffd700;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@keyframes textFadeInV3 {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Botão Principal - V3 */
.acao-principal-v3 {
margin-bottom: 3rem;
}
.btn-consultor-v3 {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #f59e0b 0%, #20c659 100%);
color: white;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 60px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow:
0 8px 25px rgba(37, 211, 102, 0.4),
0 0 0 0 rgba(37, 211, 102, 0.5);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.2);
animation: buttonPulseV3 2s ease-in-out infinite;
}
@keyframes buttonPulseV3 {
0%, 100% {
box-shadow:
0 8px 25px rgba(37, 211, 102, 0.4),
0 0 0 0 rgba(37, 211, 102, 0.5);
}
50% {
box-shadow:
0 12px 35px rgba(37, 211, 102, 0.6),
0 0 0 10px rgba(37, 211, 102, 0);
}
}
.btn-consultor-v3:hover {
background: linear-gradient(135deg, #20c659 0%, #1ea851 100%);
transform: translateY(-3px) scale(1.02);
box-shadow:
0 15px 40px rgba(37, 211, 102, 0.6),
0 0 0 0 rgba(37, 211, 102, 0);
color: white;
text-decoration: none;
}
.btn-icon-consultor-v3 {
margin-right: 0.75rem;
font-size: 1.3rem;
animation: iconBounceV3 2s ease-in-out infinite;
}
@keyframes iconBounceV3 {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.btn-texto-consultor-v3 {
position: relative;
z-index: 2;
}
.btn-efeito-v3 {
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;
}
.btn-consultor-v3:hover .btn-efeito-v3 {
left: 100%;
}
/* Indicadores de Qualidade - V3 */
.indicadores-v3 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.indicador-item-v3 {
text-align: center;
flex: 1;
}
.indicador-numero-v3 {
display: block;
font-size: 1.8rem;
font-weight: 800;
color: #ffd700;
line-height: 1;
margin-bottom: 0.25rem;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.indicador-texto-v3 {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
}
.separador-v3 {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
margin: 0 1rem;
}
/* Certificações - V3 */
.certificacoes-v3 {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.cert-item-v3 {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-weight: 500;
}
.cert-item-v3 i {
margin-right: 0.5rem;
color: #ffd700;
font-size: 1rem;
}
/* Imagem da Experiência - V3 */
.imagem-experiencia-v3 {
height: 100vh;
position: relative;
overflow: hidden;
}
.img-wrapper-v3 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-experiencia-v3 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: brightness(1.1) contrast(1.05) saturate(1.1);
}
.img-wrapper-v3:hover .img-experiencia-v3 {
transform: scale(1.05);
}
/* Overlay Sutil - V3 */
.overlay-sutil-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 102, 204, 0.1) 0%,
transparent 50%,
rgba(37, 211, 102, 0.1) 100%
);
z-index: 1;
}
/* Badge Flutuante - V3 */
.badge-flutuante-v3 {
position: absolute;
top: 8%;
right: 8%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: 3;
animation: floatBadgeV3 4s ease-in-out infinite;
}
@keyframes floatBadgeV3 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(2deg); }
}
.badge-conteudo-v3 {
text-align: center;
color: #1a3246;
}
.badge-conteudo-v3 i {
font-size: 2rem;
color: #ff6b6b;
margin-bottom: 0.5rem;
display: block;
}
.badge-conteudo-v3 span {
font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Elementos Flutuantes - V3 */
.elementos-flutuantes-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 2;
}
.elemento-flutuante-v3 {
position: absolute;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.elemento-1-v3 {
top: 20%;
left: 8%;
animation: floatElement1V3 8s ease-in-out infinite;
}
.elemento-2-v3 {
bottom: 30%;
right: 5%;
animation: floatElement2V3 10s ease-in-out infinite;
}
.elemento-3-v3 {
bottom: 15%;
left: 12%;
animation: floatElement3V3 6s ease-in-out infinite;
}
@keyframes floatElement1V3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -15px) rotate(180deg); }
}
@keyframes floatElement2V3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-15px, 20px) rotate(-180deg); }
}
@keyframes floatElement3V3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(25px, -10px) rotate(90deg); }
}
/* Elementos de Fundo Decorativos - V3 */
.bg-decorativo-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.onda-v3 {
position: absolute;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 102, 204, 0.05));
border-radius: 50%;
}
.onda-1-v3 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
animation: rotateWaveV3 20s linear infinite;
}
.onda-2-v3 {
width: 200px;
height: 200px;
bottom: -100px;
left: -50px;
animation: rotateWaveV3 25s linear infinite reverse;
}
@keyframes rotateWaveV3 {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
.circulo-v3 {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.circulo-1-v3 {
width: 150px;
height: 150px;
top: 30%;
right: 20%;
animation: pulseCircleV3 4s ease-in-out infinite;
}
.circulo-2-v3 {
width: 100px;
height: 100px;
bottom: 40%;
left: 10%;
animation: pulseCircleV3 6s ease-in-out infinite;
}
@keyframes pulseCircleV3 {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.2);
opacity: 0.6;
}
}
/* ===== RESPONSIVIDADE - APRESENTAÇÃO EMPRESA 3 ===== */
/* Tablets - V3 */
@media (max-width: 1199.98px) {
.titulo-experiencia-v3 {
font-size: 2.25rem;
}
.conteudo-wrapper-v3 {
padding: 2.5rem 2rem;
}
.indicadores-v3 {
flex-direction: column;
gap: 1rem;
}
.separador-v3 {
width: 100%;
height: 1px;
margin: 0;
}
}
@media (max-width: 991.98px) {
.apresentacao-empresa-v3 {
min-height: auto;
}
.conteudo-experiencia-v3 {
height: auto;
min-height: 70vh;
}
.imagem-experiencia-v3 {
height: 60vh;
}
.titulo-experiencia-v3 {
font-size: 2rem;
text-align: center;
}
.conteudo-wrapper-v3 {
text-align: center;
}
.badge-flutuante-v3 {
position: static;
margin: 2rem auto;
max-width: 200px;
}
.elementos-flutuantes-v3 {
display: none;
}
}
/* Mobile - V3 */
@media (max-width: 767.98px) {
.apresentacao-empresa-v3 .row {
flex-direction: column-reverse;
}
.conteudo-experiencia-v3 {
min-height: auto;
padding: 0;
}
.conteudo-wrapper-v3 {
padding: 2rem 1.5rem;
}
.titulo-experiencia-v3 {
font-size: 1.75rem;
}
.descricao-experiencia-v3 {
font-size: 1rem;
}
.btn-consultor-v3 {
width: 100%;
max-width: 300px;
padding: 1rem 2rem;
font-size: 0.9rem;
}
.indicadores-v3 {
padding: 1rem;
gap: 0.75rem;
}
.indicador-numero-v3 {
font-size: 1.5rem;
}
.certificacoes-v3 {
justify-content: center;
gap: 1rem;
}
.cert-item-v3 {
font-size: 0.8rem;
}
.imagem-experiencia-v3 {
height: 50vh;
}
}
/* Mobile Small - V3 */
@media (max-width: 575.98px) {
.conteudo-wrapper-v3 {
padding: 1.5rem 1rem;
}
.titulo-experiencia-v3 {
font-size: 1.5rem;
}
.btn-consultor-v3 {
padding: 0.875rem 1.5rem;
font-size: 0.85rem;
}
.btn-icon-consultor-v3 {
font-size: 1.1rem;
margin-right: 0.5rem;
}
.indicadores-v3 {
padding: 0.75rem;
gap: 0.5rem;
}
.indicador-numero-v3 {
font-size: 1.25rem;
}
.indicador-texto-v3 {
font-size: 0.7rem;
}
.badge-flutuante-v3 {
padding: 1rem;
}
.badge-conteudo-v3 i {
font-size: 1.5rem;
}
.badge-conteudo-v3 span {
font-size: 0.75rem;
}
}
/* ===== GALERIA DE FOTOS RDS ===== */
.galeria-fotos-section {
position: relative;
padding: 6rem 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
overflow: hidden;
}
/* Títulos da Galeria */
.galeria-titulo {
font-size: 2.5rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.galeria-titulo::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(135deg, #1a3246, #1a3246);
margin: 1rem auto 0;
border-radius: 2px;
}
.galeria-subtitulo {
font-size: 1.125rem;
color: #6c757d;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.galeria-subtitulo strong {
color: #1a3246;
}
/* Grid da Galeria */
.galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
/* Cards da Galeria */
.galeria-card {
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.galeria-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Tamanhos dos Cards */
.galeria-card-small {
grid-row: span 1;
min-height: 280px;
}
.galeria-card-medium {
grid-row: span 1;
min-height: 350px;
}
.galeria-card-large {
grid-row: span 2;
min-height: 400px;
}
.galeria-card-wide {
grid-column: span 2;
min-height: 300px;
}
/* Container da Imagem */
.galeria-image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.galeria-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s ease;
}
.galeria-card:hover .galeria-image {
transform: scale(1.1);
}
/* Overlay */
.galeria-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
rgba(0, 102, 204, 0.1) 0%,
rgba(0, 68, 153, 0.3) 50%,
rgba(44, 62, 80, 0.7) 100%
);
opacity: 0;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
}
.galeria-card:hover .galeria-overlay {
opacity: 1;
}
/* Play Button */
.galeria-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.galeria-play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
background: white;
}
.galeria-play-btn i {
font-size: 1.5rem;
color: #1a3246;
margin-left: 3px;
}
/* Badge de Preço */
.galeria-price-badge {
position: absolute;
top: 15px;
left: 15px;
background: rgba(0, 102, 204, 0.95);
backdrop-filter: blur(10px);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 700;
font-size: 0.875rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Informações */
.galeria-info {
color: white;
text-align: left;
}
.galeria-item-titulo {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.galeria-item-descricao {
font-size: 0.9rem;
margin-bottom: 1rem;
opacity: 0.9;
line-height: 1.4;
}
.galeria-capacidade {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
}
.galeria-capacidade i {
color: #ffd700;
}
/* Botão de Ação */
.galeria-action {
text-align: center;
}
.btn-galeria-view {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
color: #1a3246;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-galeria-view:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Indicador de Tipo */
.galeria-type-indicator {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
/* Botão Ver Mais */
.galeria-load-more {
margin-top: 3rem;
}
.btn-load-more {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
.btn-load-more:hover {
background: linear-gradient(135deg, #0052a3, #003876);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.4);
}
/* Fallback */
.galeria-fallback {
grid-column: 1 / -1;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
text-align: center;
}
.galeria-fallback .fallback-content {
max-width: 400px;
padding: 3rem 2rem;
}
.galeria-fallback .fallback-icon {
font-size: 4rem;
color: #1a3246;
margin-bottom: 2rem;
}
.galeria-fallback h3 {
font-size: 1.75rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.galeria-fallback p {
font-size: 1rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 2rem;
}
.fallback-social {
display: flex;
gap: 1rem;
justify-content: center;
}
.btn-social {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.btn-social:hover {
background: linear-gradient(135deg, #0052a3, #003876);
transform: translateY(-2px);
color: white;
text-decoration: none;
}
/* Modal da Galeria */
.galeria-modal-content {
background: #1a1a1a;
border: none;
border-radius: 15px;
overflow: hidden;
}
.galeria-modal-header {
background: linear-gradient(135deg, #1a3246, #1a3246);
border-bottom: none;
padding: 1rem 1.5rem;
}
.galeria-modal-header .modal-title {
color: white;
font-weight: 700;
font-size: 1.25rem;
}
.galeria-modal-body {
padding: 0;
position: relative;
}
.galeria-modal-image {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
display: block;
}
.galeria-modal-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 1rem;
}
.btn-modal-nav {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
border: none;
border-radius: 50%;
color: white;
font-size: 1.125rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-modal-nav:hover {
background: rgba(0, 102, 204, 0.8);
transform: scale(1.1);
}
.galeria-modal-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 2rem 1.5rem 1rem;
}
.galeria-modal-footer {
background: #1a1a1a;
border-top: 1px solid #333;
padding: 1rem 1.5rem;
}
.btn-modal-whatsapp {
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
text-decoration: none;
padding: 0.75rem 2rem;
border-radius: 25px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
width: 100%;
justify-content: center;
}
.btn-modal-whatsapp:hover {
background: linear-gradient(135deg, #20c659, #0e6b5c);
transform: translateY(-2px);
color: white;
text-decoration: none;
}
/* Elementos Decorativos */
.galeria-decorativo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.elemento-foto-1,
.elemento-foto-2,
.elemento-foto-3 {
position: absolute;
opacity: 0.05;
}
.elemento-foto-1 {
width: 150px;
height: 150px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: 10%;
right: 5%;
animation: float1 8s ease-in-out infinite;
}
.elemento-foto-2 {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 50%;
bottom: 20%;
left: 8%;
animation: float2 10s ease-in-out infinite;
}
.elemento-foto-3 {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ffd700, #ff8c00);
border-radius: 20% 80% 80% 20% / 80% 20% 20% 80%;
top: 60%;
right: 10%;
animation: float3 12s ease-in-out infinite;
}
/* ===== RESPONSIVIDADE - GALERIA DE FOTOS ===== */
/* Desktop Large */
@media (min-width: 1200px) {
.galeria-grid {
grid-template-columns: repeat(4, 1fr);
}
.galeria-card-wide {
grid-column: span 2;
}
}
/* Desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
.galeria-grid {
grid-template-columns: repeat(3, 1fr);
}
.galeria-card-wide {
grid-column: span 2;
}
}
/* Tablet */
@media (max-width: 991.98px) {
.galeria-fotos-section {
padding: 4rem 0;
}
.galeria-titulo {
font-size: 2.25rem;
}
.galeria-subtitulo {
font-size: 1rem;
}
.galeria-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.galeria-card-wide {
grid-column: span 2;
}
.galeria-card-large {
grid-row: span 1;
min-height: 300px;
}
.galeria-overlay {
padding: 1rem;
}
.galeria-item-titulo {
font-size: 1.125rem;
}
.galeria-item-descricao {
font-size: 0.875rem;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.galeria-fotos-section {
padding: 3rem 0;
}
.galeria-titulo {
font-size: 2rem;
}
.galeria-subtitulo {
font-size: 0.95rem;
}
.galeria-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.galeria-card-wide,
.galeria-card-large,
.galeria-card-medium,
.galeria-card-small {
grid-column: span 1;
grid-row: span 1;
min-height: 280px;
}
.galeria-play-btn {
width: 60px;
height: 60px;
}
.galeria-play-btn i {
font-size: 1.25rem;
}
.galeria-price-badge {
font-size: 0.8125rem;
padding: 0.375rem 0.75rem;
}
.galeria-overlay {
padding: 1.25rem;
}
.galeria-item-titulo {
font-size: 1rem;
}
.galeria-item-descricao {
font-size: 0.8125rem;
}
.btn-galeria-view {
padding: 0.625rem 1.25rem;
font-size: 0.8125rem;
}
.fallback-social {
flex-direction: column;
align-items: center;
}
.btn-social {
padding: 0.625rem 1.25rem;
font-size: 0.8125rem;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.galeria-fotos-section {
padding: 2.5rem 0;
}
.galeria-titulo {
font-size: 1.75rem;
}
.galeria-grid {
gap: 1rem;
}
.galeria-card {
min-height: 250px;
}
.galeria-play-btn {
width: 50px;
height: 50px;
}
.galeria-play-btn i {
font-size: 1rem;
}
.galeria-overlay {
padding: 1rem;
}
.galeria-item-titulo {
font-size: 0.95rem;
}
.galeria-item-descricao {
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.btn-load-more {
padding: 0.875rem 2rem;
font-size: 0.9rem;
}
.elemento-foto-1 {
width: 100px;
height: 100px;
}
.elemento-foto-2 {
width: 80px;
height: 80px;
}
.elemento-foto-3 {
width: 60px;
height: 60px;
}
}
/* Otimizações para Performance */
@media (prefers-reduced-motion: reduce) {
.galeria-card,
.galeria-image,
.galeria-overlay,
.btn-galeria-view,
.elemento-foto-1,
.elemento-foto-2,
.elemento-foto-3 {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.galeria-titulo {
color: #000000;
}
.galeria-card {
border: 2px solid #000000;
}
.galeria-price-badge {
background: #0052a3;
border: 2px solid #ffffff;
}
.btn-galeria-view {
background: #ffffff;
color: #0052a3;
border: 2px solid #0052a3;
}
.btn-load-more {
background: #0052a3;
border: 2px solid #ffffff;
}
}
/* ===== FOOTER RDS ===== */
.elemento-contato-1 {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: 5%;
right: 3%;
animation: float1 12s ease-in-out infinite;
}
.elemento-contato-2 {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 50%;
bottom: 15%;
left: 5%;
animation: float2 15s ease-in-out infinite;
}
.elemento-contato-3 {
width: 150px;
height: 150px;
background: linear-gradient(135deg, #ffd700, #ff8c00);
border-radius: 20% 80% 80% 20% / 80% 20% 20% 80%;
top: 40%;
right: 8%;
animation: float3 18s ease-in-out infinite;
}
.elemento-contato-4 {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f59e0b, #c0392b);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
bottom: 30%;
right: 20%;
animation: float1 20s ease-in-out infinite reverse;
}
/* ===== FOOTER RDS TRANSPORTES ===== */
.footer-rds {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 50%, #002b66 100%);
position: relative;
overflow: hidden;
color: #fff;
margin-top: 60px;
}
/* Efeito de Ondas no Fundo */
.footer-rds::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center top;
background-size: cover;
z-index: 1;
}
.footer-content {
position: relative;
z-index: 2;
padding: 80px 0 40px;
}
/* Seções do Footer */
.footer-section {
margin-bottom: 40px;
}
.footer-section h3 {
color: #fff;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #f59e0b, #128c7e);
border-radius: 2px;
}
/* Links do Footer */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
transition: all 0.3s ease;
}
.footer-links li:hover {
transform: translateX(8px);
}
.footer-links a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
display: flex;
align-items: center;
transition: all 0.3s ease;
position: relative;
}
.footer-links a:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-links a::before {
content: '▶';
font-size: 0.7rem;
margin-right: 10px;
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-links a:hover::before {
opacity: 1;
transform: translateX(3px);
}
/* Informações de Contato */
.contact-info-footer {
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #128c7e);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.2rem;
color: #fff;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 5px 0;
color: #fff;
}
.contact-details p {
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
}
.contact-details a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-details a:hover {
color: #fff;
text-decoration: underline;
}
/* Botão Consultor */
.btn-consultor-footer {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-consultor-footer::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-consultor-footer:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
color: #fff;
text-decoration: none;
}
.btn-consultor-footer:hover::before {
left: 100%;
}
.btn-consultor-footer i {
font-size: 1.2rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Redes Sociais */
.social-media-footer {
margin-top: 20px;
}
.social-links-footer {
display: flex;
gap: 15px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
text-decoration: none;
font-size: 1.3rem;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.social-link:hover::before {
width: 100%;
height: 100%;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.social-link.instagram:hover {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border-color: #bc1888;
}
/* Rodapé Inferior */
.footer-bottom {
background: rgba(0, 0, 0, 0.2);
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 40px;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.copyright {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
.developed-by {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.developed-by strong {
color: #f59e0b;
font-weight: 600;
}
/* Ícones Flutuantes Fixos */
.floating-contact-icons {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 15px;
}
.floating-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.floating-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.floating-icon:hover::before {
width: 100%;
height: 100%;
}
.floating-icon:hover {
transform: scale(1.1);
color: #fff;
text-decoration: none;
}
.floating-icon.location {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}
.floating-icon.phone {
background: linear-gradient(135deg, #4ecdc4, #44a08d);
}
.floating-icon.whatsapp {
background: linear-gradient(135deg, #f59e0b, #128c7e);
animation: whatsappBounce 2s infinite;
}
@keyframes whatsappBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.floating-icon.email {
background: linear-gradient(135deg, #667eea, #764ba2);
}
/* Efeitos Decorativos */
.footer-decorative {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.wave-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom;
background-size: cover;
opacity: 0.3;
}
.floating-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: floatingParticle 20s infinite linear;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; }
.particle:nth-child(9) { left: 90%; animation-delay: 16s; }
@keyframes floatingParticle {
0% {
transform: translateY(100vh) rotateX(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-10vh) rotateX(360deg);
opacity: 0;
}
}
/* ===== RESPONSIVIDADE DO FOOTER ===== */
@media (max-width: 1199.98px) {
.floating-contact-icons {
right: 15px;
}
.floating-icon {
width: 55px;
height: 55px;
font-size: 1.3rem;
}
}
@media (max-width: 991.98px) {
.footer-content {
padding: 60px 0 30px;
}
.footer-section {
margin-bottom: 35px;
}
.contact-item {
padding: 12px;
}
.contact-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.btn-consultor-footer {
padding: 12px 25px;
font-size: 0.9rem;
}
.floating-contact-icons {
right: 10px;
gap: 12px;
}
.floating-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
@media (max-width: 767.98px) {
.footer-rds::before {
height: 60px;
}
.footer-content {
padding: 50px 0 25px;
}
.footer-section {
margin-bottom: 30px;
text-align: center;
}
.footer-section h3 {
font-size: 1.1rem;
margin-bottom: 20px;
}
.footer-section h3::after {
left: 50%;
transform: translateX(-50%);
}
.footer-links li:hover {
transform: none;
}
.contact-item {
flex-direction: column;
text-align: center;
padding: 20px 15px;
}
.contact-icon {
margin-right: 0;
margin-bottom: 10px;
}
.social-links-footer {
justify-content: center;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.floating-contact-icons {
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
transform: none;
flex-direction: row;
gap: 10px;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 30px;
backdrop-filter: blur(10px);
}
.floating-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
@media (max-width: 575.98px) {
.footer-content {
padding: 40px 0 20px;
}
.footer-section h3 {
font-size: 1rem;
margin-bottom: 15px;
}
.footer-links a {
font-size: 0.9rem;
}
.contact-item {
padding: 15px 10px;
}
.contact-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.contact-details h4 {
font-size: 0.9rem;
}
.contact-details p {
font-size: 0.85rem;
}
.btn-consultor-footer {
padding: 10px 20px;
font-size: 0.85rem;
width: 100%;
justify-content: center;
}
.social-link {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
.floating-contact-icons {
bottom: 15px;
right: 15px;
gap: 8px;
padding: 8px;
}
.floating-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
/* Ocultar partículas em telas muito pequenas */
.floating-particles {
display: none;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.footer-rds *,
.floating-contact-icons *,
.floating-particles * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.particle {
display: none;
}
}
@media (prefers-contrast: high) {
.footer-rds {
background: #000 !important;
}
.footer-section h3,
.contact-details h4,
.footer-links a {
color: #fff !important;
}
.contact-item {
background: rgba(255, 255, 255, 0.2) !important;
border-color: #fff !important;
}
.btn-consultor-footer {
background: #fff !important;
color: #000 !important;
}
.social-link {
background: #fff !important;
color: #000 !important;
border-color: #fff !important;
}
}
/* ===== ESTILOS PÁGINA QUEM SOMOS - RDS TRANSPORTES ===== */
/* Hero Section - Quem Somos */
.quem-somos-hero {
position: relative;
padding: 120px 0 100px;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-quem-somos {
position: relative;
z-index: 3;
}
.badge-institucional {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.15));
color: #1a3246;
padding: 12px 20px;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
border: 2px solid rgba(0, 102, 204, 0.2);
margin-bottom: 2rem;
animation: badgeFloat 3s ease-in-out infinite;
}
.badge-institucional i {
font-size: 1rem;
}
@keyframes badgeFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.titulo-quem-somos {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.texto-destaque {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.titulo-quem-somos::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
@keyframes lineGrow {
from { width: 0; }
to { width: 80px; }
}
.subtitulo-quem-somos {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-quem-somos strong {
color: #1a3246;
font-weight: 700;
}
/* Diferenciais Rápidos */
.diferenciais-rapidos {
margin-bottom: 3rem;
}
.diferencial-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.diferencial-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.diferencial-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.diferencial-texto {
display: flex;
flex-direction: column;
}
.diferencial-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.diferencial-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions */
.hero-actions-quem-somos {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.btn-hero-whatsapp {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-hero-whatsapp::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-hero-whatsapp:hover::before {
left: 100%;
}
.btn-hero-whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
.btn-hero-whatsapp i {
font-size: 1.2rem;
animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.btn-hero-saiba-mais {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: #1a3246;
padding: 16px 32px;
border: 2px solid #1a3246;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-hero-saiba-mais:hover {
background: #1a3246;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
text-decoration: none;
}
.btn-hero-saiba-mais i {
transition: transform 0.3s ease;
}
.btn-hero-saiba-mais:hover i {
transform: translateY(3px);
}
/* Hero Imagem */
.hero-imagem-wrapper {
position: relative;
z-index: 2;
}
.hero-imagem-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.hero-imagem {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform 0.5s ease;
}
.hero-imagem-container:hover .hero-imagem {
transform: scale(1.05);
}
/* Badge Experiência Flutuante */
.badge-experiencia-flutuante {
position: absolute;
top: 30px;
right: 30px;
z-index: 5;
animation: floatBadge 4s ease-in-out infinite;
}
.badge-conteudo-experiencia {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
padding: 20px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.badge-conteudo-experiencia i {
font-size: 1.5rem;
color: #1a3246;
}
.badge-info-experiencia strong {
display: block;
font-size: 1.2rem;
color: #1a1a1a;
font-weight: 800;
}
.badge-info-experiencia span {
font-size: 0.9rem;
color: #666;
}
@keyframes floatBadge {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-10px) rotate(1deg); }
75% { transform: translateY(-5px) rotate(-1deg); }
}
/* Elementos Decorativos Hero */
.elementos-decorativos-hero {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.elemento-hero-1,
.elemento-hero-2,
.elemento-hero-3 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.05));
}
.elemento-hero-1 {
width: 80px;
height: 80px;
top: 10%;
left: -20px;
animation: floatElement1 6s ease-in-out infinite;
}
.elemento-hero-2 {
width: 120px;
height: 120px;
bottom: 20%;
right: -30px;
animation: floatElement2 8s ease-in-out infinite reverse;
}
.elemento-hero-3 {
width: 60px;
height: 60px;
top: 60%;
left: -10px;
animation: floatElement3 7s ease-in-out infinite;
}
@keyframes floatElement1 {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(-20px) translateX(10px); }
}
@keyframes floatElement2 {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(15px) translateX(-15px); }
}
@keyframes floatElement3 {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(-10px) translateX(20px); }
}
/* Background Decorativo Hero */
.hero-background-decorativo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.forma-bg-1,
.forma-bg-2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 68, 153, 0.02));
}
.forma-bg-1 {
width: 300px;
height: 300px;
top: -50px;
right: -100px;
animation: rotateShape 20s linear infinite;
}
.forma-bg-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation: rotateShape 15s linear infinite reverse;
}
@keyframes rotateShape {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Partículas Flutuantes */
.particulas-flutuantes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particula {
position: absolute;
width: 4px;
height: 4px;
background: rgba(0, 102, 204, 0.3);
border-radius: 50%;
animation: floatParticle 10s ease-in-out infinite;
}
.particula:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.particula:nth-child(2) { left: 80%; top: 30%; animation-delay: 2s; }
.particula:nth-child(3) { left: 30%; top: 70%; animation-delay: 4s; }
.particula:nth-child(4) { left: 70%; top: 10%; animation-delay: 6s; }
.particula:nth-child(5) { left: 50%; top: 80%; animation-delay: 8s; }
@keyframes floatParticle {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-20px) translateX(10px) scale(1.2);
opacity: 0.6;
}
50% {
transform: translateY(-10px) translateX(-15px) scale(0.8);
opacity: 0.4;
}
75% {
transform: translateY(-30px) translateX(20px) scale(1.1);
opacity: 0.5;
}
}
/* ===== SEÇÃO NOSSA HISTÓRIA ===== */
.nossa-historia-section {
padding: 100px 0;
background: #ffffff;
position: relative;
}
.timeline-historia {
position: relative;
padding-left: 30px;
}
.timeline-historia::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, #1a3246, #1a3246);
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
padding-left: 50px;
}
.timeline-marker {
position: absolute;
left: -22px;
top: 0;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
z-index: 2;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.timeline-content {
background: #f8faff;
padding: 25px;
border-radius: 15px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.1);
}
.timeline-content h4 {
color: #1a3246;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.timeline-content p {
color: #666;
line-height: 1.6;
margin: 0;
}
/* História Conteúdo */
.historia-conteudo {
padding-left: 30px;
}
.historia-texto {
margin-bottom: 3rem;
}
.historia-texto .texto-principal {
font-size: 1.2rem;
line-height: 1.7;
color: #333;
margin-bottom: 1.5rem;
}
.historia-texto p {
line-height: 1.6;
color: #666;
margin-bottom: 1.5rem;
}
.historia-texto strong {
color: #1a3246;
font-weight: 700;
}
/* Estatísticas História */
.estatisticas-historia {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.stat-item-historia {
text-align: center;
flex: 1;
min-width: 150px;
}
.stat-numero {
font-size: 3rem;
font-weight: 800;
color: #1a3246;
display: block;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 8px;
}
/* ===== MISSÃO, VISÃO E VALORES ===== */
.missao-visao-valores-section {
padding: 100px 0;
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #f8faff 100%);
position: relative;
overflow: hidden;
}
.mvv-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 40px 30px;
height: 100%;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.mvv-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 102, 204, 0.15);
background: rgba(255, 255, 255, 0.95);
}
.mvv-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.mvv-card:hover .mvv-icon {
transform: scale(1.1) rotate(5deg);
}
.mvv-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.mvv-content p {
color: #666;
line-height: 1.6;
margin: 0;
}
/* Valores Lista */
.valores-lista {
margin-top: 20px;
}
.valor-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
padding: 12px;
background: rgba(0, 102, 204, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
}
.valor-item:hover {
background: rgba(0, 102, 204, 0.1);
transform: translateX(10px);
}
.valor-item i {
color: #1a3246;
font-size: 1.1rem;
flex-shrink: 0;
}
.valor-item span {
color: #333;
font-weight: 600;
font-size: 0.95rem;
}
/* MVV Background Decorativo */
.mvv-background-decorativo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.mvv-forma-1,
.mvv-forma-2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.03), rgba(0, 68, 153, 0.01));
}
.mvv-forma-1 {
width: 400px;
height: 400px;
top: -100px;
right: -150px;
animation: rotateShapeMVV 25s linear infinite;
}
.mvv-forma-2 {
width: 300px;
height: 300px;
bottom: -100px;
left: -100px;
animation: rotateShapeMVV 20s linear infinite reverse;
}
@keyframes rotateShapeMVV {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== DIFERENCIAIS SECTION ===== */
.diferenciais-section {
padding: 100px 0;
background: #ffffff;
}
.diferencial-card {
text-align: center;
padding: 40px 25px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
height: 100%;
border: 1px solid rgba(0, 102, 204, 0.1);
position: relative;
overflow: hidden;
}
.diferencial-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 50px rgba(0, 102, 204, 0.15);
border-color: #1a3246;
}
.diferencial-icon-container {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5rem;
margin: 0 auto 25px;
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.diferencial-card:hover .diferencial-icon-container {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
}
.diferencial-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.diferencial-card p {
color: #666;
line-height: 1.6;
margin: 0;
position: relative;
z-index: 2;
}
/* ===== CTA QUEM SOMOS ===== */
.cta-quem-somos-section {
padding: 100px 0;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
position: relative;
overflow: hidden;
}
.cta-content-quem-somos {
position: relative;
z-index: 3;
}
.cta-titulo {
font-size: 2.8rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-titulo .titulo-destaque {
color: #f59e0b;
}
.cta-subtitulo {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-principal {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-cta-principal:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.5);
color: white;
text-decoration: none;
}
.btn-cta-secundario {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: white;
padding: 18px 40px;
border: 2px solid white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.btn-cta-secundario:hover {
background: white;
color: #1a3246;
transform: translateY(-3px);
text-decoration: none;
}
.cta-background-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
radial-gradient(circle at 70% 80%, rgba(37, 211, 102, 0.1) 0%, transparent 70%);
pointer-events: none;
}
/* ===== RESPONSIVIDADE QUEM SOMOS ===== */
@media (max-width: 1199.98px) {
.titulo-quem-somos {
font-size: 3rem;
}
.hero-imagem {
height: 450px;
}
.estatisticas-historia {
gap: 1.5rem;
}
}
@media (max-width: 991.98px) {
.quem-somos-hero {
padding: 100px 0 80px;
min-height: auto;
}
.titulo-quem-somos {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.subtitulo-quem-somos {
font-size: 1.1rem;
margin-bottom: 2.5rem;
}
.diferencial-item {
margin-bottom: 1rem;
padding: 12px;
}
.hero-actions-quem-somos {
gap: 15px;
justify-content: center;
text-align: center;
}
.hero-imagem {
height: 400px;
}
.badge-experiencia-flutuante {
top: 20px;
right: 20px;
}
.badge-conteudo-experiencia {
padding: 15px;
}
.timeline-historia {
padding-left: 25px;
}
.timeline-item {
padding-left: 40px;
margin-bottom: 2.5rem;
}
.historia-conteudo {
padding-left: 0;
margin-top: 3rem;
}
.estatisticas-historia {
justify-content: center;
gap: 2rem;
}
.stat-numero {
font-size: 2.5rem;
}
.mvv-card {
padding: 35px 25px;
margin-bottom: 2rem;
}
.diferencial-card {
padding: 35px 20px;
margin-bottom: 2rem;
}
.cta-titulo {
font-size: 2.3rem;
}
.cta-subtitulo {
font-size: 1.1rem;
}
}
@media (max-width: 767.98px) {
.quem-somos-hero {
padding: 80px 0 60px;
}
.titulo-quem-somos {
font-size: 2rem;
text-align: center;
}
.titulo-quem-somos::after {
left: 50%;
transform: translateX(-50%);
}
.subtitulo-quem-somos {
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
}
.badge-institucional {
margin: 0 auto 1.5rem;
}
.diferenciais-rapidos {
margin-bottom: 2rem;
}
.diferencial-item {
text-align: center;
flex-direction: column;
padding: 20px;
}
.diferencial-icon {
margin-bottom: 10px;
}
.hero-actions-quem-somos {
justify-content: center;
flex-direction: column;
align-items: center;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
width: 100%;
max-width: 280px;
justify-content: center;
}
.hero-imagem {
height: 350px;
margin-bottom: 2rem;
}
.badge-experiencia-flutuante {
position: relative;
top: auto;
right: auto;
margin: 2rem auto 0;
display: flex;
justify-content: center;
}
.badge-conteudo-experiencia {
flex-direction: column;
text-align: center;
gap: 10px;
}
.timeline-historia {
padding-left: 20px;
}
.timeline-item {
padding-left: 35px;
}
.timeline-marker {
width: 35px;
height: 35px;
left: -17px;
font-size: 0.9rem;
}
.timeline-content {
padding: 20px;
}
.estatisticas-historia {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
.stat-item-historia {
min-width: auto;
}
.nossa-historia-section,
.missao-visao-valores-section,
.diferenciais-section,
.cta-quem-somos-section {
padding: 80px 0;
}
.mvv-card {
padding: 30px 20px;
}
.mvv-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.diferencial-card {
padding: 30px 20px;
}
.diferencial-icon-container {
width: 80px;
height: 80px;
font-size: 2rem;
}
.cta-titulo {
font-size: 2rem;
}
.cta-subtitulo {
font-size: 1rem;
margin-bottom: 30px;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.btn-cta-principal,
.btn-cta-secundario {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 575.98px) {
.quem-somos-hero {
padding: 60px 0 40px;
}
.titulo-quem-somos {
font-size: 1.8rem;
}
.badge-institucional {
padding: 10px 16px;
font-size: 0.8rem;
}
.diferencial-item {
padding: 15px;
}
.diferencial-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.diferencial-texto strong {
font-size: 1rem;
}
.hero-imagem {
height: 300px;
}
.timeline-content {
padding: 15px;
}
.timeline-content h4 {
font-size: 1.1rem;
}
.stat-numero {
font-size: 2rem;
}
.mvv-card {
padding: 25px 15px;
}
.mvv-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.diferencial-card {
padding: 25px 15px;
}
.diferencial-icon-container {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.cta-titulo {
font-size: 1.7rem;
}
.btn-cta-principal,
.btn-cta-secundario {
padding: 15px 30px;
font-size: 1rem;
}
}
/* ===== SEÇÕES COMUNS ===== */
.titulo-secao {
font-size: 2.8rem;
font-weight: 800;
line-height: 1.2;
color: #1a1a1a;
margin-bottom: 1rem;
text-align: center;
}
.titulo-secao .titulo-destaque {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitulo-secao {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.secao-badge {
display: inline-block;
margin-bottom: 1.5rem;
}
.badge-text {
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.15));
color: #1a3246;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgba(0, 102, 204, 0.2);
}
/* ===== ANIMAÇÕES AOS ===== */
[data-aos] {
pointer-events: none;
}
[data-aos].aos-animate {
pointer-events: auto;
}
/* ===== MODO DE CONTRASTE ALTO ===== */
@media (prefers-contrast: high) {
.titulo-quem-somos,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
color: #1a3246 !important;
-webkit-text-fill-color: #1a3246 !important;
}
.diferencial-card,
.mvv-card {
border: 2px solid #1a3246 !important;
}
.btn-hero-whatsapp,
.btn-cta-principal {
background: #f59e0b !important;
}
.btn-hero-saiba-mais,
.btn-cta-secundario {
border-color: #1a3246 !important;
color: #1a3246 !important;
}
}
/* ===== MODO DE MOVIMENTO REDUZIDO ===== */
@media (prefers-reduced-motion: reduce) {
.quem-somos-hero *,
.nossa-historia-section *,
.missao-visao-valores-section *,
.diferenciais-section *,
.cta-quem-somos-section * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.diferencial-item:hover,
.mvv-card:hover,
.diferencial-card:hover {
transform: none !important;
}
}
/* ===== HERO BANNER RDS - IMAGEM RESPONSIVA FULL WIDTH ===== */
.rds-hero-banner {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-container {
position: relative;
width: 100%;
height: 100%;
}
.hero-picture {
display: block;
width: 100%;
height: 100%;
}
.hero-image-main {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.3s ease;
}
/* Efeito hover sutil */
.rds-hero-banner:hover .hero-image-main {
transform: scale(1.02);
}
/* Overlay sutil para melhorar contraste */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 102, 204, 0.1) 0%,
rgba(0, 68, 153, 0.05) 50%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
/* Container para conteúdo sobreposto */
.hero-content-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.hero-text-content {
text-align: center;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Otimizações para dispositivos móveis */
@media (max-width: 991.98px) {
.rds-hero-banner {
height: 300px;
}
.rds-hero-banner:hover .hero-image-main {
transform: none; /* Remove hover em dispositivos touch */
}
}
@media (max-width: 767.98px) {
.rds-hero-banner {
height: 280px;
}
}
@media (max-width: 575.98px) {
.rds-hero-banner {
height: 250px;
}
}
/* Otimizações para telas grandes */
@media (min-width: 1400px) {
.rds-hero-banner {
height: 400px;
}
}
/* Suporte para preferências de acessibilidade */
@media (prefers-reduced-motion: reduce) {
.hero-image-main {
transition: none !important;
}
.rds-hero-banner:hover .hero-image-main {
transform: none !important;
}
}
@media (prefers-contrast: high) {
.hero-overlay {
background: rgba(0, 0, 0, 0.3) !important;
}
}
/* Fallback para navegadores que não suportam object-fit */
@supports not (object-fit: cover) {
.hero-image-main {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
}
/* Loading state para melhorar percepção de performance */
.hero-image-main[loading="eager"] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Remove shimmer quando imagem carrega */
.hero-image-main[data-loaded="true"] {
animation: none;
background: none;
}
/* ===== PÁGINA BLOG RDS - SEGUINDO PADRÃO FRONTEND ===== */
.blog-page-rds {
background: #fafafa;
}
/* Hero Section Blog - Seguindo Padrão */
.blog-hero {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-blog {
position: relative;
z-index: 3;
}
.titulo-blog {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.titulo-blog::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
.subtitulo-blog {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-blog strong {
color: #1a3246;
font-weight: 700;
}
/* Estatísticas Rápidas - Padrão Blog */
.stats-rapidas {
margin-bottom: 3rem;
}
.stat-item-blog {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.stat-item-blog:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.stat-texto {
display: flex;
flex-direction: column;
}
.stat-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.stat-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions Blog */
.hero-actions-blog {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Seção Artigos - Seguindo Padrão */
.artigos-section {
padding: 100px 0;
background: #fafafa;
}
.blog-stats {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-number {
font-size: 2rem;
font-weight: 800;
color: #1a3246;
line-height: 1;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.9rem;
color: #666;
text-align: center;
}
.stat-divider {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, #ddd, transparent);
}
.blog-hero-visual {
text-align: center;
}
.blog-hero-img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0, 102, 204, 0.1));
}
/* Seção de Busca */
.blog-search-section {
padding: 60px 0;
background: #fff;
}
.blog-search-wrapper {
text-align: center;
}
.search-input-group {
position: relative;
max-width: 600px;
margin: 0 auto 2rem;
}
.search-input {
width: 100%;
padding: 18px 60px 18px 24px;
border: 2px solid #e1e5e9;
border-radius: 50px;
font-size: 1rem;
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: #1a3246;
box-shadow: 0 4px 20px rgba(0, 102, 204, 0.15);
}
.search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border: none;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.search-btn:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}
.popular-tags {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.tags-label {
color: #666;
font-size: 0.9rem;
font-weight: 600;
}
.tags-list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tag-item {
padding: 6px 16px;
background: rgba(0, 102, 204, 0.1);
color: #1a3246;
border-radius: 20px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
}
.tag-item:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* Conteúdo do Blog */
.blog-content-section {
padding: 80px 0;
background: #fafafa;
}
.blog-posts-grid {
margin-bottom: 3rem;
}
/* Post Destaque */
.featured-post {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 3rem;
transition: all 0.3s ease;
}
.featured-post:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.post-image-wrapper {
position: relative;
overflow: hidden;
}
.featured-post .post-image {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-post:hover .post-image {
transform: scale(1.05);
}
.post-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), transparent);
}
.featured-badge {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #ffd700, #ffb700);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.post-content {
padding: 2rem;
}
.post-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.post-category {
background: #1a3246;
color: white;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.post-date,
.post-read-time {
color: #666;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 6px;
}
.post-title {
margin-bottom: 1rem;
}
.featured-post .post-title {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;
}
.post-link {
color: #1a1a1a;
text-decoration: none;
transition: color 0.3s ease;
}
.post-link:hover {
color: #1a3246;
text-decoration: none;
}
.post-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.post-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.post-author {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar {
border-radius: 50%;
border: 3px solid #f0f0f0;
}
.author-info {
display: flex;
flex-direction: column;
}
.author-name {
font-weight: 600;
color: #1a1a1a;
font-size: 0.9rem;
}
.author-title {
color: #666;
font-size: 0.8rem;
}
.post-engagement {
display: flex;
gap: 1rem;
}
.engagement-item {
display: flex;
align-items: center;
gap: 4px;
color: #666;
font-size: 0.875rem;
}
/* Posts Regulares */
.regular-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.regular-post {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.regular-post:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}
.regular-post .post-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.regular-post:hover .post-image {
transform: scale(1.05);
}
.regular-post .post-content {
padding: 1.5rem;
}
.regular-post .post-title {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.8rem;
}
.regular-post .post-excerpt {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.post-footer-simple {
display: flex;
align-items: center;
justify-content: space-between;
}
.post-author-simple {
display: flex;
align-items: center;
gap: 8px;
}
.author-avatar-small {
border-radius: 50%;
border: 2px solid #f0f0f0;
}
.read-time {
color: #666;
font-size: 0.8rem;
font-weight: 500;
}
/* Paginação */
.blog-pagination {
margin-top: 3rem;
text-align: center;
}
.pagination-list {
display: inline-flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.pagination-link {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #fff;
color: #666;
text-decoration: none;
border-radius: 10px;
border: 1px solid #e1e5e9;
transition: all 0.3s ease;
font-weight: 500;
}
.pagination-link:hover,
.pagination-link.active {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.pagination-dots {
color: #666;
font-weight: 600;
}
/* Sidebar */
.blog-sidebar {
position: relative;
}
.sidebar-sticky {
position: sticky;
top: 100px;
}
.sidebar-widget {
background: #fff;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.widget-header {
margin-bottom: 1.5rem;
}
.widget-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.5rem;
}
.widget-title i {
color: #1a3246;
}
.widget-subtitle {
color: #666;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Newsletter Widget */
.newsletter-input {
width: 100%;
padding: 14px 18px;
border: 2px solid #e1e5e9;
border-radius: 10px;
font-size: 0.95rem;
margin-bottom: 1rem;
transition: border-color 0.3s ease;
}
.newsletter-input:focus {
outline: none;
border-color: #1a3246;
}
.btn-newsletter {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s ease;
margin-bottom: 1.5rem;
}
.btn-newsletter:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}
.newsletter-benefits {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: #666;
}
.benefit-item i {
color: #28a745;
font-size: 0.8rem;
}
/* Categorias Widget */
.categories-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.category-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 10px;
text-decoration: none;
color: #666;
transition: all 0.3s ease;
}
.category-item:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateX(5px);
}
.category-count {
background: rgba(0, 102, 204, 0.1);
color: #1a3246;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.category-item:hover .category-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* Posts Populares */
.popular-posts-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.popular-post-item {
display: flex;
gap: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.popular-post-item:hover {
background: #f0f7ff;
transform: translateX(5px);
}
.popular-post-image img {
border-radius: 8px;
object-fit: cover;
}
.popular-post-title {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.popular-post-link {
color: #1a1a1a;
text-decoration: none;
}
.popular-post-link:hover {
color: #1a3246;
text-decoration: none;
}
.popular-post-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.75rem;
color: #666;
}
/* Tags Cloud */
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-cloud-item {
padding: 6px 14px;
background: #f8f9fa;
color: #666;
border-radius: 15px;
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.3s ease;
}
.tag-cloud-item:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* CTA Widget */
.cta-widget {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-align: center;
}
.cta-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.cta-icon i {
font-size: 1.5rem;
color: white;
}
.cta-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.8rem;
color: white;
}
.cta-text {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
margin-bottom: 1.5rem;
}
.btn-cta-sidebar {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-cta-sidebar:hover {
background: white;
color: #1a3246;
text-decoration: none;
transform: translateY(-2px);
}
/* Responsividade Blog - Seguindo Padrão */
@media (max-width: 1199.98px) {
.titulo-blog {
font-size: 2.5rem;
}
.artigos-section {
padding: 80px 0;
}
}
@media (max-width: 991.98px) {
.blog-hero {
padding: 80px 0;
min-height: auto;
}
.titulo-blog {
font-size: 2.5rem;
}
.titulo-blog::after {
width: 60px;
}
.subtitulo-blog {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.stat-item-blog {
padding: 12px;
margin-bottom: 1rem;
}
.hero-actions-blog {
gap: 15px;
margin-top: 2rem;
}
.artigos-section {
padding: 60px 0;
}
.sidebar-sticky {
position: static;
}
.regular-posts-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.search-input-group {
margin-bottom: 1.5rem;
}
.popular-tags {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
}
@media (max-width: 767.98px) {
.blog-hero {
padding: 60px 0;
}
.titulo-blog {
font-size: 2rem;
}
.titulo-blog::after {
width: 50px;
height: 3px;
}
.subtitulo-blog {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.stats-rapidas {
margin-bottom: 2rem;
}
.stat-item-blog {
padding: 12px;
margin-bottom: 1rem;
}
.stat-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-blog {
flex-direction: column;
gap: 12px;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
padding: 14px 28px;
font-size: 0.9rem;
}
.artigos-section {
padding: 40px 0;
}
.regular-posts-grid {
grid-template-columns: 1fr;
}
.featured-post .post-image {
height: 250px;
}
.post-footer {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.sidebar-widget {
padding: 1.5rem;
}
.tags-list {
justify-content: flex-start;
}
}
@media (max-width: 575.98px) {
.blog-hero {
padding: 40px 0;
}
.titulo-blog {
font-size: 1.8rem;
}
.badge-institucional {
padding: 10px 16px;
font-size: 0.8rem;
margin-bottom: 1.5rem;
}
.stat-item-blog {
padding: 10px;
margin-bottom: 0.8rem;
}
.stat-texto strong {
font-size: 1rem;
}
.artigos-section {
padding: 30px 0;
}
.search-input {
padding: 16px 50px 16px 20px;
}
.search-btn {
width: 40px;
height: 40px;
}
.featured-post .post-image {
height: 200px;
}
.post-content {
padding: 1.5rem;
}
.featured-post .post-title {
font-size: 1.5rem;
}
.pagination-list {
flex-wrap: wrap;
gap: 0.3rem;
}
.pagination-link {
padding: 10px 12px;
font-size: 0.9rem;
}
}
/* Acessibilidade Blog - Seguindo Padrão */
@media (prefers-reduced-motion: reduce) {
.blog-hero *,
.artigos-section *,
.stat-item-blog,
.stat-item-blog:hover,
.hero-actions-blog *,
.blog-posts-grid * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.titulo-blog,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
background: #000 !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.badge-institucional,
.secao-badge {
border: 2px solid #000 !important;
color: #000 !important;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
border: 2px solid #000 !important;
}
}
/* ===== PÁGINA BLOG INTERNO RDS ===== */
/* Breadcrumb Navigation */
.breadcrumb-section {
background: #f8f9fa;
padding: 15px 0;
border-bottom: 1px solid rgba(0, 102, 204, 0.1);
}
.breadcrumb-nav {
margin: 0;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: #6c757d;
font-weight: 400;
}
.breadcrumb-link {
color: #1a3246;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.3s ease;
}
.breadcrumb-link:hover {
color: #1a3246;
text-decoration: none;
}
.breadcrumb-current {
color: #6c757d;
font-weight: 500;
}
.breadcrumb-item.active .breadcrumb-current {
color: #1a3246;
font-weight: 600;
}
/* Article Header */
.article-header-section {
padding: 40px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.article-header {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.article-meta-top {
margin-bottom: 25px;
}
.article-category {
display: inline-block;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 6px 16px;
border-radius: 25px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 15px;
}
.article-meta-info {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
color: #6c757d;
font-size: 14px;
}
.article-meta-info span {
display: flex;
align-items: center;
gap: 5px;
}
.article-meta-info i {
color: #1a3246;
}
.article-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin: 20px 0;
line-height: 1.2;
}
.article-subtitle {
font-size: 1.2rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 30px;
}
.article-author-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}
.author-info-main {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar-large {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #1a3246;
}
.author-details h3 {
margin: 0;
font-size: 1.1rem;
color: #2c3e50;
font-weight: 600;
}
.author-title {
margin: 5px 0;
color: #6c757d;
font-size: 14px;
}
.author-social {
display: flex;
gap: 8px;
}
.author-social-link {
width: 30px;
height: 30px;
border-radius: 50%;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
}
.author-social-link:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
}
.article-share-buttons {
display: flex;
align-items: center;
gap: 15px;
}
.share-label {
font-size: 14px;
color: #6c757d;
font-weight: 500;
}
.share-buttons-list {
display: flex;
gap: 8px;
}
.share-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
.share-facebook {
background: #1877f2;
color: white;
}
.share-twitter {
background: #1da1f2;
color: white;
}
.share-linkedin {
background: #0a66c2;
color: white;
}
.share-whatsapp {
background: #f59e0b;
color: white;
}
.share-copy {
background: #6c757d;
color: white;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Featured Image */
.article-featured-image {
padding: 20px 0;
background: #f8f9fa;
position: relative;
z-index: 1;
}
.featured-image-wrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.featured-image {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
.image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 20px;
font-size: 14px;
font-style: italic;
}
/* Article Content */
.article-content-section {
padding: 50px 0;
}
.article-content-wrapper {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
/* Table of Contents */
.table-of-contents {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-left: 4px solid #1a3246;
padding: 25px;
border-radius: 8px;
margin-bottom: 40px;
}
.toc-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.toc-link {
color: #1a3246;
text-decoration: none;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.3s ease;
display: block;
}
.toc-link:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateX(5px);
}
/* Article Main Content */
.article-main-content {
line-height: 1.8;
color: #2c3e50;
}
.content-section {
margin-bottom: 40px;
}
.content-section h2 {
font-size: 1.8rem;
font-weight: 600;
color: #2c3e50;
margin: 30px 0 20px 0;
position: relative;
padding-bottom: 10px;
}
.content-section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 2px;
}
.content-section h3 {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
margin: 25px 0 15px 0;
}
.lead-paragraph {
font-size: 1.2rem;
font-weight: 500;
color: #495057;
margin-bottom: 25px;
}
.content-section p {
margin-bottom: 20px;
text-align: justify;
}
.article-quote {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-left: 4px solid #1a3246;
padding: 25px;
margin: 30px 0;
border-radius: 8px;
font-style: italic;
position: relative;
}
.article-quote::before {
content: '"';
font-size: 4rem;
color: #1a3246;
position: absolute;
top: -10px;
left: 20px;
font-family: serif;
}
.article-quote p {
font-size: 1.1rem;
margin-bottom: 15px;
padding-left: 30px;
}
.article-quote cite {
font-weight: 600;
color: #1a3246;
font-style: normal;
}
/* Content Images */
.content-image {
margin: 30px 0;
text-align: center;
}
.content-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.content-image figcaption {
margin-top: 10px;
font-style: italic;
color: #6c757d;
font-size: 14px;
}
/* Highlight and Info Boxes */
.highlight-box, .info-box {
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.highlight-box {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
border-left: 4px solid #ffc107;
}
.info-box {
background: linear-gradient(135deg, #d1ecf1, #b8e6ff);
border-left: 4px solid #17a2b8;
}
.highlight-box h4, .info-box h4 {
margin-top: 0;
margin-bottom: 15px;
color: #2c3e50;
display: flex;
align-items: center;
gap: 8px;
}
.highlight-box ul, .info-box ul {
margin: 0;
padding-left: 20px;
}
.highlight-box li, .info-box li {
margin-bottom: 8px;
}
/* Tips Grid */
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 30px 0;
}
.tip-card {
background: white;
padding: 25px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.tip-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #1a3246;
}
.tip-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
color: white;
font-size: 24px;
}
.tip-card h4 {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.tip-card p {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Conclusion */
.conclusion-highlight {
background: linear-gradient(135deg, #e8f4f8, #d1ecf1);
padding: 25px;
border-radius: 8px;
border-left: 4px solid #1a3246;
font-size: 1.1rem;
margin: 30px 0;
}
/* Article Tags */
.article-tags {
padding: 25px 0;
border-top: 1px solid #dee2e6;
margin-top: 30px;
}
.tags-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.article-tag {
background: #f8f9fa;
color: #1a3246;
padding: 8px 16px;
border-radius: 25px;
text-decoration: none;
font-size: 14px;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.article-tag:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* Article Engagement */
.article-engagement {
padding: 30px 0;
margin: 40px 0;
position: relative;
}
.article-engagement::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
}
.engagement-actions {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.engagement-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border: none;
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
color: #495057;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
min-width: 120px;
justify-content: center;
}
.engagement-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
}
.engagement-btn:hover::before {
left: 100%;
}
.engagement-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.2);
}
/* Like Button */
.engagement-btn.like-btn {
background: linear-gradient(135deg, #fff5f5, #ffffff);
border: 2px solid #ffe0e0;
}
.engagement-btn.like-btn:hover {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
border-color: #ff5252;
}
.engagement-btn.like-btn.active {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
border: 2px solid #ff5252;
animation: heartBeat 0.6s ease;
}
.engagement-btn.like-btn.active i {
animation: heartPulse 1.5s infinite;
}
/* Bookmark Button */
.engagement-btn.bookmark-btn {
background: linear-gradient(135deg, #fff8e1, #ffffff);
border: 2px solid #ffe082;
}
.engagement-btn.bookmark-btn:hover {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: white;
border-color: #ff9800;
}
.engagement-btn.bookmark-btn.active {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: white;
border: 2px solid #ff9800;
}
/* Share Button */
.engagement-btn.share-btn {
background: linear-gradient(135deg, #e3f2fd, #ffffff);
border: 2px solid #bbdefb;
position: relative;
}
.engagement-btn.share-btn:hover {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border-color: #1a3246;
}
.engagement-btn.share-btn.active {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: 2px solid #1a3246;
}
.engagement-btn.share-btn:hover i {
animation: shareShake 0.6s ease;
}
.engagement-count {
font-weight: 700;
background: linear-gradient(45deg, #1a3246, #1a3246);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 16px;
}
.engagement-btn.active .engagement-count {
-webkit-text-fill-color: white;
}
.engagement-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Animations */
@keyframes heartBeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes heartPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes shareShake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Engagement Icons */
.engagement-btn i {
font-size: 18px;
transition: all 0.3s ease;
}
.engagement-btn:hover i {
transform: scale(1.1);
}
/* Loading State */
.engagement-btn.loading {
pointer-events: none;
opacity: 0.7;
}
.engagement-btn.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 767px) {
.article-engagement {
padding: 25px 15px;
margin: 30px 0;
}
.engagement-actions {
gap: 10px;
justify-content: space-between;
}
.engagement-btn {
padding: 12px 16px;
min-width: 100px;
font-size: 14px;
}
.engagement-btn i {
font-size: 16px;
}
.engagement-count {
font-size: 14px;
}
.engagement-label {
font-size: 12px;
}
}
@media (max-width: 575px) {
.engagement-actions {
flex-direction: column;
gap: 12px;
}
.engagement-btn {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
}
/* Tema escuro */
@media (prefers-color-scheme: dark) {
.engagement-btn {
background: linear-gradient(135deg, #2d3748, #4a5568);
color: #e2e8f0;
}
.engagement-btn:hover {
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}
.engagement-count {
background: linear-gradient(45deg, #63b3ed, #3182ce);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
.contact-main-section {
padding: 80px 0;
background: white;
}
.contact-form-wrapper {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-title {
color: #1a3246;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.form-title i {
font-size: 2rem;
}
.form-subtitle {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
max-width: 500px;
margin: 0 auto;
}
/* Modern Form Styles */
.contact-form-modern {
max-width: 100%;
}
.form-group-modern {
position: relative;
margin-bottom: 30px;
}
.form-control-modern {
width: 100%;
padding: 20px 16px 8px 16px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #fafafa;
outline: none;
}
.form-control-modern:focus {
border-color: #1a3246;
background: white;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.form-label-modern {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: #6c757d;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
pointer-events: none;
display: flex;
align-items: center;
gap: 8px;
background: transparent;
padding: 0 4px;
}
.form-control-modern:focus + .form-label-modern,
.form-control-modern:not(:placeholder-shown) + .form-label-modern,
.form-control-modern:valid + .form-label-modern {
top: 8px;
font-size: 12px;
color: #1a3246;
background: white;
margin-left: -4px;
}
.form-control-modern select {
cursor: pointer;
}
.form-control-modern textarea {
resize: vertical;
min-height: 120px;
padding-top: 20px;
}
.form-control-modern textarea + .form-label-modern {
top: 20px;
transform: none;
}
.form-control-modern textarea:focus + .form-label-modern,
.form-control-modern textarea:not(:placeholder-shown) + .form-label-modern,
.form-control-modern textarea:valid + .form-label-modern {
top: 8px;
font-size: 12px;
color: #1a3246;
background: white;
margin-left: -4px;
}
.form-feedback {
font-size: 14px;
margin-top: 8px;
min-height: 20px;
}
.form-feedback.success {
color: #28a745;
}
.form-feedback.error {
color: #dc3545;
}
/* Checkbox Styles */
.form-check-modern {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.form-check-input-modern {
width: 20px;
height: 20px;
margin: 0;
accent-color: #1a3246;
cursor: pointer;
}
.form-check-label-modern {
font-size: 14px;
line-height: 1.5;
color: #495057;
cursor: pointer;
flex: 1;
}
.terms-link {
color: #1a3246;
text-decoration: none;
font-weight: 500;
}
.terms-link:hover {
text-decoration: underline;
}
/* Submit Button */
.form-submit-section {
text-align: center;
margin-top: 40px;
}
.btn-contact-submit {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
padding: 16px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-width: 200px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.btn-contact-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-contact-submit:hover::before {
left: 100%;
}
.btn-contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
}
.btn-contact-submit:active {
transform: translateY(0);
}
.form-note {
margin-top: 20px;
font-size: 14px;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.form-note i {
color: #28a745;
}
/* Form Messages */
.form-messages {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
text-align: center;
font-weight: 500;
}
.form-messages.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.form-messages.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Contact Sidebar */
.contact-sidebar {
margin-top: 40px;
}
.sidebar-sticky {
position: sticky;
top: 100px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.widget-title {
color: #1a3246;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.contact-info-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.contact-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.contact-details h4 {
color: #1a3246;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.contact-details p {
color: #6c757d;
line-height: 1.6;
margin: 0;
}
.contact-details a {
color: #1a3246;
text-decoration: none;
font-weight: 500;
}
.contact-details a:hover {
text-decoration: underline;
}
.emergency-contact {
color: #28a745;
font-weight: 600;
}
/* WhatsApp CTA */
.whatsapp-cta-content {
text-align: center;
}
.whatsapp-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #f59e0b, #1faa4f);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
color: white;
animation: pulse 2s infinite;
}
.whatsapp-cta-content h3 {
color: #1a3246;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.whatsapp-cta-content p {
color: #6c757d;
margin-bottom: 20px;
line-height: 1.6;
}
.btn-whatsapp-cta {
background: linear-gradient(135deg, #f59e0b, #1faa4f);
color: white;
text-decoration: none;
padding: 14px 28px;
border-radius: 50px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
color: white;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Social Media */
.social-media-links {
display: flex;
flex-direction: row;
gap: 15px;
justify-content: center;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 0;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.social-link.facebook {
color: #1877f2;
background: rgba(24, 119, 242, 0.05);
}
.social-link.facebook:hover {
background: #1877f2;
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link.instagram {
color: #e4405f;
background: rgba(228, 64, 95, 0.05);
}
.social-link.instagram:hover {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link.youtube {
color: #ff0000;
background: rgba(255, 0, 0, 0.05);
}
.social-link.youtube:hover {
background: #ff0000;
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link.linkedin {
color: #0a66c2;
background: rgba(10, 102, 194, 0.05);
}
.social-link.linkedin:hover {
background: #0a66c2;
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link i {
font-size: 20px;
width: 24px;
text-align: center;
}
/* Map Section */
.contact-map-section {
background: #f8f9fa;
padding: 80px 0 0;
}
.map-header {
text-align: center;
margin-bottom: 40px;
}
.map-title {
color: #1a3246;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.map-title i {
font-size: 2rem;
}
.map-subtitle {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
}
.map-container {
position: relative;
height: 500px;
border-radius: 20px 20px 0 0;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.google-map {
width: 100%;
height: 100%;
border: none;
filter: grayscale(20%);
}
.map-overlay-info {
position: absolute;
top: 20px;
left: 20px;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
max-width: 300px;
backdrop-filter: blur(10px);
}
.overlay-content h4 {
color: #1a3246;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 10px;
}
.overlay-content p {
color: #6c757d;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.overlay-content p i {
color: #1a3246;
}
.btn-directions {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-directions:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
color: white;
}
/* Responsive Design */
@media (max-width: 1199px) {
.sidebar-sticky {
position: static;
}
}
@media (max-width: 991px) {
.contact-hero-title {
font-size: 2.8rem;
}
.hero-stats {
gap: 20px;
}
.stat-number {
font-size: 2rem;
}
.contact-form-wrapper {
padding: 30px;
}
.contact-main-section {
padding: 60px 0;
}
.contact-map-section {
padding: 60px 0 0;
}
}
@media (max-width: 767px) {
.contact-hero-section {
padding: 40px 0;
}
.contact-hero-title {
font-size: 2.2rem;
}
.contact-hero-subtitle {
font-size: 1.1rem;
}
.hero-stats {
flex-direction: column;
gap: 20px;
}
.form-title {
font-size: 2rem;
flex-direction: column;
}
.contact-form-wrapper {
padding: 25px;
margin: 0 10px;
}
.contact-main-section {
padding: 40px 0;
}
.contact-sidebar {
margin-top: 30px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 25px;
margin: 0 10px 20px;
}
.map-container {
height: 400px;
border-radius: 15px 15px 0 0;
}
.map-overlay-info {
position: static;
margin: 20px;
margin-bottom: 0;
}
.contact-map-section {
padding: 40px 0 0;
}
}
@media (max-width: 575px) {
.contact-hero-title {
font-size: 1.8rem;
}
.form-title {
font-size: 1.6rem;
}
.contact-form-wrapper {
padding: 20px;
margin: 0 5px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 20px;
margin: 0 5px 15px;
}
.map-container {
height: 300px;
border-radius: 10px 10px 0 0;
}
.map-overlay-info {
margin: 15px;
padding: 15px;
}
}
/* Author Bio */
.author-bio-section {
padding: 30px 0;
border-top: 1px solid #dee2e6;
}
.author-bio-card {
background: #f8f9fa;
padding: 30px;
border-radius: 12px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.author-bio-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #1a3246;
flex-shrink: 0;
}
.author-bio-name {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.author-bio-title {
color: #1a3246;
font-weight: 500;
margin-bottom: 15px;
}
.author-bio-description {
color: #6c757d;
line-height: 1.6;
margin-bottom: 20px;
}
.author-bio-social {
display: flex;
gap: 10px;
}
.author-social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #1a3246;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.author-social-btn:hover {
background: #1a3246;
transform: translateY(-2px);
}
/* Sidebar */
.article-sidebar {
padding-left: 30px;
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 120px;
z-index: 10;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.sidebar-widget {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.widget-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 2px solid #f8f9fa;
}
.widget-title i {
color: #1a3246;
}
/* CTA Widget */
.cta-widget-article {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-align: center;
}
.cta-widget-article .widget-title {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.cta-icon-article {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 24px;
}
.cta-title-article {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: white;
}
.cta-text-article {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
line-height: 1.5;
}
.btn-cta-article {
background: white;
color: #1a3246;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-cta-article:hover {
background: #f8f9fa;
color: #1a3246;
transform: translateY(-2px);
text-decoration: none;
}
/* TOC Mobile Widget */
.toc-widget-mobile {
display: none;
}
.toc-mobile-list {
display: grid;
gap: 8px;
}
.toc-mobile-link {
color: #1a3246;
text-decoration: none;
padding: 10px 15px;
border-radius: 6px;
background: #f8f9fa;
transition: all 0.3s ease;
display: block;
}
.toc-mobile-link:hover {
background: #1a3246;
color: white;
text-decoration: none;
}
/* Related Posts */
.related-posts-list {
display: grid;
gap: 20px;
}
.related-post-item {
display: flex;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.related-post-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.related-post-image {
flex-shrink: 0;
}
.related-post-image img {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}
.related-post-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.related-post-link {
color: #2c3e50;
text-decoration: none;
line-height: 1.4;
}
.related-post-link:hover {
color: #1a3246;
text-decoration: none;
}
.related-post-meta {
display: flex;
gap: 10px;
font-size: 12px;
color: #6c757d;
}
.post-date::after {
content: "•";
margin-left: 10px;
}
.post-category {
color: #1a3246;
font-weight: 500;
}
/* Newsletter Widget */
.newsletter-widget-article .newsletter-description {
color: #6c757d;
margin-bottom: 20px;
line-height: 1.5;
}
.newsletter-form-article {
display: grid;
gap: 15px;
}
.newsletter-input-article {
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.newsletter-input-article:focus {
border-color: #1a3246;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.btn-newsletter-article {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-newsletter-article:hover {
background: linear-gradient(135deg, #1a3246, #003366);
transform: translateY(-2px);
}
/* Share Widget */
.share-buttons-sidebar {
display: grid;
gap: 10px;
}
.share-btn-sidebar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
text-decoration: none;
color: white;
}
.share-btn-sidebar.facebook {
background: #1877f2;
}
.share-btn-sidebar.twitter {
background: #1da1f2;
}
.share-btn-sidebar.linkedin {
background: #0a66c2;
}
.share-btn-sidebar.whatsapp {
background: #f59e0b;
}
.share-btn-sidebar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Comments Section */
.comments-section {
padding: 50px 0;
background: #f8f9fa;
}
.comments-header {
text-align: center;
margin-bottom: 40px;
}
.comments-title {
font-size: 2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.comments-title i {
color: #1a3246;
}
.comments-subtitle {
color: #6c757d;
font-size: 1.1rem;
}
/* Comment Form */
.comment-form-wrapper {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.comment-form-title {
font-size: 1.3rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 25px;
}
.comment-form .form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}
.comment-input, .comment-textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
resize: vertical;
}
.comment-input:focus, .comment-textarea:focus {
border-color: #1a3246;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.comment-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
flex-wrap: wrap;
gap: 15px;
}
.form-check {
display: flex;
align-items: center;
gap: 8px;
}
.form-check-input {
margin: 0;
}
.form-check-label {
font-size: 14px;
color: #6c757d;
margin: 0;
}
.form-check-label a {
color: #1a3246;
text-decoration: none;
}
.form-check-label a:hover {
text-decoration: underline;
}
.btn-comment-submit {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-comment-submit:hover {
background: linear-gradient(135deg, #1a3246, #003366);
transform: translateY(-2px);
}
/* Comments List */
.comments-list {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.comment-item {
display: flex;
gap: 15px;
padding: 25px 0;
border-bottom: 1px solid #f8f9fa;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.comment-author {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.author-badge {
background: #1a3246;
color: white;
font-size: 10px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
text-transform: uppercase;
}
.comment-date {
color: #6c757d;
font-size: 14px;
}
.comment-text {
color: #495057;
line-height: 1.6;
margin-bottom: 15px;
}
.comment-actions {
display: flex;
gap: 15px;
}
.comment-action-btn {
background: none;
border: none;
color: #6c757d;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
transition: color 0.3s ease;
}
.comment-action-btn:hover {
color: #1a3246;
}
.comment-action-btn.active {
color: #f59e0b;
}
/* Comment Reply */
.comment-reply {
margin-top: 20px;
margin-left: 20px;
padding-top: 20px;
border-top: 1px solid #f8f9fa;
display: flex;
gap: 12px;
}
.comment-reply .comment-avatar img {
width: 40px;
height: 40px;
}
/* Load More Comments */
.comments-load-more {
text-align: center;
margin-top: 30px;
}
.btn-load-comments {
background: #f8f9fa;
color: #1a3246;
border: 2px solid #e9ecef;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-load-comments:hover {
background: #1a3246;
color: white;
border-color: #1a3246;
}
/* Post Navigation */
.post-navigation-section {
padding: 40px 0;
background: white;
border-top: 1px solid #dee2e6;
}
.post-navigation {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 30px;
align-items: center;
}
.nav-post {
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-post:hover {
background: #e9ecef;
transform: translateY(-2px);
}
.nav-post-link {
text-decoration: none;
color: inherit;
display: block;
}
.nav-post-link:hover {
text-decoration: none;
color: inherit;
}
.nav-post-direction {
display: flex;
align-items: center;
gap: 8px;
color: #6c757d;
font-size: 14px;
margin-bottom: 8px;
}
.next-post .nav-post-direction {
justify-content: flex-end;
}
.nav-post-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.3;
}
.next-post .nav-post-title {
text-align: right;
}
.nav-posts-center {
text-align: center;
}
.btn-back-to-blog {
background: #1a3246;
color: white;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-back-to-blog:hover {
background: #1a3246;
text-decoration: none;
color: white;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1199px) {
.article-sidebar {
padding-left: 15px;
}
.sidebar-sticky {
position: static !important;
top: auto !important;
z-index: auto !important;
max-height: none !important;
overflow-y: visible !important;
}
}
@media (max-width: 991px) {
.article-sidebar {
padding-left: 0;
margin-top: 40px;
}
.article-content-wrapper {
padding: 30px 25px;
}
.table-of-contents {
display: none;
}
.toc-widget-mobile {
display: block;
}
.post-navigation {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.next-post .nav-post-title,
.next-post .nav-post-direction {
text-align: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.article-header-section {
padding: 30px 0;
}
.article-title {
font-size: 2rem;
}
.article-subtitle {
font-size: 1.1rem;
}
.article-author-section {
flex-direction: column;
gap: 20px;
text-align: center;
}
.article-share-buttons {
justify-content: center;
}
.featured-image {
height: 250px;
}
.article-content-wrapper {
padding: 25px 20px;
}
.content-section h2 {
font-size: 1.5rem;
}
.tips-grid {
grid-template-columns: 1fr;
}
.author-bio-card {
flex-direction: column;
text-align: center;
}
.engagement-actions {
flex-direction: column;
gap: 15px;
}
.article-meta-info {
flex-direction: column;
gap: 10px;
}
.breadcrumb-list {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.breadcrumb-item:not(:last-child)::after {
display: none;
}
.comment-form-footer {
flex-direction: column;
align-items: flex-start;
}
.comments-title {
font-size: 1.6rem;
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 575px) {
.article-content-section {
padding: 30px 0;
}
.comments-section {
padding: 30px 0;
}
.comment-form-wrapper,
.comments-list {
padding: 20px;
}
.sidebar-widget {
padding: 20px;
}
.share-buttons-list {
flex-wrap: wrap;
justify-content: center;
}
.breadcrumb-current {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ===== SCROLL REVEAL ANIMATIONS ===== */
/* Base Reveal Class */
.form-control-contato {
width: 100%;
padding: 16px 20px;
border: 2px solid #e1e8f0;
border-radius: 12px;
font-size: 1rem;
font-weight: 500;
background: #fafbfc;
transition: all 0.3s ease;
color: #333;
}
.form-control-contato:focus {
outline: none;
border-color: #1a3246;
background: white;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
transform: translateY(-2px);
}
.form-control-contato:valid {
border-color: #28a745;
background: #f8fff9;
}
.form-control-contato.is-invalid {
border-color: #dc3545;
background: #fff8f8;
}
.form-control-contato::placeholder {
color: #999;
font-weight: 400;
}
textarea.form-control-contato {
resize: vertical;
min-height: 140px;
line-height: 1.6;
}
select.form-control-contato {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 50px;
}
/* Feedback de Validação */
.form-feedback {
font-size: 0.875rem;
margin-top: 6px;
font-weight: 500;
min-height: 20px;
transition: all 0.3s ease;
}
.form-feedback.success {
color: #28a745;
display: flex;
align-items: center;
gap: 6px;
}
.form-feedback.success::before {
content: '✓';
font-weight: bold;
}
.form-feedback.error {
color: #dc3545;
display: flex;
align-items: center;
gap: 6px;
}
.form-feedback.error::before {
content: '✗';
font-weight: bold;
}
/* Contador de Caracteres */
.char-counter {
text-align: right;
font-size: 0.8rem;
color: #999;
margin-top: 6px;
font-weight: 500;
}
.char-counter.warning {
color: #ff9800;
}
.char-counter.danger {
color: #dc3545;
}
/* Checkbox Personalizado */
.form-check-contato {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 1rem;
}
.form-check-input-contato {
width: 20px;
height: 20px;
border: 2px solid #1a3246;
border-radius: 4px;
cursor: pointer;
appearance: none;
background: white;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 2px;
}
.form-check-input-contato:checked {
background: #1a3246;
border-color: #1a3246;
}
.form-check-input-contato:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.form-check-label-contato {
font-size: 0.95rem;
color: #666;
line-height: 1.5;
cursor: pointer;
}
.terms-link:hover {
text-decoration: underline;
}
/* Botão de Envio */
.form-submit-contato {
text-align: center;
margin-top: 2rem;
}
.btn-enviar-contato {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
color: white;
padding: 18px 40px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
min-width: 200px;
}
.btn-enviar-contato::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-enviar-contato:hover::before {
left: 100%;
}
.btn-enviar-contato:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
.btn-enviar-contato:active {
transform: translateY(0);
}
.btn-enviar-contato:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-loading {
display: none;
}
.btn-enviar-contato.loading .btn-text,
.btn-enviar-contato.loading .fa-paper-plane {
display: none;
}
.btn-enviar-contato.loading .btn-loading {
display: inline-block;
}
.form-note-contato {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 1rem;
font-size: 0.875rem;
color: #666;
}
.form-note-contato i {
color: #28a745;
}
/* Mensagem de Resultado */
.contato-result-message {
margin-top: 2rem;
padding: 20px;
border-radius: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s ease;
}
.contato-result-message.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.contato-result-message.success {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
border: 2px solid #28a745;
color: #155724;
}
.contato-result-message.error {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
border: 2px solid #dc3545;
color: #721c24;
}
.result-content {
display: flex;
align-items: center;
gap: 15px;
}
.result-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.contato-result-message.success .result-icon::before {
content: '✓';
color: #28a745;
}
.contato-result-message.error .result-icon::before {
content: '✗';
color: #dc3545;
}
.result-text {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
}
/* Sidebar de Contato */
.contato-sidebar-wrapper {
position: sticky;
top: 100px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.contact-info-widget:hover,
.whatsapp-cta-widget:hover,
.social-media-widget:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.widget-title {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.widget-title i {
color: #1a3246;
font-size: 1.2rem;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
border-radius: 12px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.contact-info-item:hover {
background: #f8faff;
border-color: rgba(0, 102, 204, 0.1);
transform: translateX(5px);
}
.contact-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.contact-details p {
font-size: 0.95rem;
color: #666;
line-height: 1.5;
margin: 0;
}
.contact-details a {
color: #1a3246;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.contact-details a:hover {
color: #1a3246;
text-decoration: underline;
}
/* WhatsApp CTA Widget */
.whatsapp-cta-content {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.whatsapp-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.whatsapp-text h3 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.whatsapp-text p {
font-size: 0.9rem;
color: #666;
margin: 0;
line-height: 1.4;
}
.btn-whatsapp-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
padding: 15px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-cta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
/* Redes Sociais */
.social-media-links {
display: flex;
gap: 15px;
justify-content: center;
}
.social-link {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.social-link.facebook {
background: linear-gradient(135deg, #1877f2, #166fe5);
}
.social-link.instagram {
background: linear-gradient(135deg, #e4405f, #833ab4, #fcb045);
}
.social-link.youtube {
background: linear-gradient(135deg, #ff0000, #cc0000);
}
.social-link.linkedin {
background: linear-gradient(135deg, #0077b5, #005885);
}
.social-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* Seção do Mapa */
.contato-mapa-section {
padding: 80px 0;
background: #f8faff;
}
.map-header {
text-align: center;
margin-bottom: 50px;
}
.map-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.map-title i {
color: #1a3246;
font-size: 2rem;
}
.map-subtitle {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.map-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.map-wrapper {
position: relative;
width: 100%;
height: 400px;
}
.google-map {
width: 100%;
height: 100%;
border: 0;
filter: grayscale(20%);
transition: filter 0.3s ease;
}
.map-container:hover .google-map {
filter: grayscale(0%);
}
.map-overlay-info {
position: absolute;
top: 20px;
left: 20px;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
max-width: 300px;
animation: mapInfoFloat 3s ease-in-out infinite;
}
@keyframes mapInfoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.overlay-content h4 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.overlay-content h4 i {
color: #1a3246;
}
.overlay-content p {
font-size: 0.9rem;
color: #666;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.4;
}
.overlay-content p i {
color: #1a3246;
margin-top: 2px;
flex-shrink: 0;
}
.btn-directions {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 12px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
margin-top: 10px;
}
.btn-directions:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
color: white;
text-decoration: none;
}
/* Responsividade */
@media (max-width: 1199px) {
.contactx-hero-title {
font-size: 2.5rem;
}
.formx-main {
padding: 30px;
}
.contactx-sidebar {
position: static;
margin-top: 40px;
}
}
@media (max-width: 991px) {
.contactx-hero {
padding: 100px 0 60px;
}
.contactx-hero-title {
font-size: 2.2rem;
}
.contactx-hero-visual {
justify-content: center;
margin-top: 2rem;
}
.contactx-main {
padding: 60px 0;
}
.contactx-form-section {
margin-bottom: 40px;
}
.contactx-info-widget,
.contactx-whatsapp-widget,
.contactx-social-widget {
margin-bottom: 20px;
}
.contactx-map-section {
padding: 60px 0;
}
.contactx-map-frame {
position: relative;
top: auto;
left: auto;
margin-top: 20px;
max-width: 100%;
}
}
@media (max-width: 767px) {
.contactx-hero {
padding: 80px 0 40px;
text-align: center;
}
.contactx-hero-title {
font-size: 2rem;
}
.contactx-hero-subtitle {
font-size: 1.1rem;
}
.contactx-hero-visual {
flex-direction: column;
gap: 15px;
align-items: center;
}
.contactx-card-float {
position: static;
margin-top: 20px;
transform: none;
animation: none;
}
.contactx-form-section {
padding: 25px;
margin: 0 15px;
}
.formx-title {
font-size: 1.5rem;
flex-direction: column;
gap: 8px;
}
.formx-input {
padding: 14px 16px;
}
.btnx-main {
width: 100%;
padding: 16px;
}
.contactx-info-list {
flex-direction: column;
text-align: center;
gap: 10px;
}
.contactx-info-list:hover {
transform: none;
}
.contactx-whatsapp-widget {
flex-direction: column;
text-align: center;
gap: 15px;
}
.contactx-map-title {
font-size: 2rem;
flex-direction: column;
gap: 10px;
}
.contactx-map-frame {
height: 300px;
}
}
@media (max-width: 575px) {
.contactx-hero {
padding: 60px 0 30px;
}
.contactx-hero-title {
font-size: 1.8rem;
}
.contactx-badge {
font-size: 0.8rem;
padding: 10px 16px;
}
.contactx-form-section {
padding: 20px;
margin: 0 10px;
}
.formx-input {
padding: 12px 14px;
}
.contactx-info-widget,
.contactx-whatsapp-widget,
.contactx-social-widget {
padding: 20px;
margin: 0 10px 20px;
}
.contactx-map-frame {
height: 250px;
}
.contactx-map-section {
padding: 20px;
}
.contactx-map-title {
font-size: 1rem;
}
.contactx-map-frame p {
font-size: 0.85rem;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.contactx-container *,
.contactx-container *::before,
.contactx-container *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.contactx-card-float,
.contactx-map-section {
animation: none !important;
transform: none !important;
}
}
@media (prefers-contrast: high) {
.contactx-hero-title,
.formx-title,
.contactx-map-title,
.contactx-info-title {
color: #000 !important;
}
.formx-input {
border-color: #000 !important;
}
.formx-input:focus {
border-color: #1a3246 !important;
box-shadow: none !important;
}
.btnx-main,
.btnx-whatsapp,
.contactx-social-link {
border: 2px solid #fff !important;
}
}
/* ===== BLOG RDS - ESTILOS ESSENCIAIS PARA PÁGINA DE BLOG ===== */
/* Blog Content Section Fix */
.blog-content-section .featured-post {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
margin-bottom: 50px;
transition: all 0.3s ease;
}
.blog-content-section .featured-post:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.blog-content-section .post-image-wrapper {
position: relative;
overflow: hidden;
height: 400px;
}
.blog-content-section .post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.blog-content-section .post-image-wrapper:hover .post-image {
transform: scale(1.05);
}
.blog-content-section .post-content {
padding: 30px;
}
.blog-content-section .regular-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.blog-content-section .regular-post {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.blog-content-section .regular-post:hover {
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}
.blog-content-section .regular-post .post-image-wrapper {
height: 200px;
}
.blog-content-section .regular-post .post-content {
padding: 25px;
}
/* Sidebar Fixes */
.blog-page-rds .blog-sidebar {
padding-left: 40px;
}
.blog-page-rds .sidebar-widget {
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
}
.blog-page-rds .widget-title {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.blog-page-rds .widget-title i {
color: #1a3246;
font-size: 1.1rem;
}
/* Responsive Blog Fixes */
@media (max-width: 991px) {
.blog-page-rds .blog-sidebar {
padding-left: 0;
margin-top: 60px;
}
.blog-content-section .regular-posts-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.blog-content-section .featured-post .post-image-wrapper {
height: 250px;
}
}
/* ===== FIM DOS ESTILOS ESSENCIAIS DO BLOG RDS ===== */
/* ===== EFEITOS CSS PURO PARA QUEM SOMOS - SUBSTITUIÇÃO DO JAVASCRIPT ===== */
/* Animações de entrada escalonadas para timeline */
.timeline-historia .timeline-item {
opacity: 0;
transform: translateX(-30px);
animation: slideInLeft 0.8s ease-out forwards;
}
.timeline-historia .timeline-item:nth-child(1) {
animation-delay: 0.1s;
}
.timeline-historia .timeline-item:nth-child(2) {
animation-delay: 0.2s;
}
.timeline-historia .timeline-item:nth-child(3) {
animation-delay: 0.3s;
}
.timeline-historia .timeline-item:nth-child(4) {
animation-delay: 0.4s;
}
/* Animação de entrada para conteúdo da história */
.historia-conteudo {
opacity: 0;
transform: translateX(30px);
animation: slideInRight 0.8s ease-out 0.2s forwards;
}
/* Animações de entrada para estatísticas */
.estatisticas-historia .stat-item-historia {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.6s ease-out forwards;
}
.estatisticas-historia .stat-item-historia:nth-child(1) {
animation-delay: 0.5s;
}
.estatisticas-historia .stat-item-historia:nth-child(2) {
animation-delay: 0.6s;
}
.estatisticas-historia .stat-item-historia:nth-child(3) {
animation-delay: 0.7s;
}
/* Animação de contagem simulada com CSS */
.stat-numero {
position: relative;
overflow: hidden;
}
.stat-numero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, var(--cor-primaria) 50%, transparent 100%);
transform: translateX(-100%);
animation: shimmer 2s ease-in-out 0.8s;
}
/* Animações para cards MVV */
.mvv-card {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.missao-card {
animation-delay: 0.1s;
}
.visao-card {
animation-delay: 0.2s;
}
.valores-card {
animation-delay: 0.3s;
}
/* Animações para diferenciais */
.diferencial-card {
opacity: 0;
transform: scale(0.9);
animation: zoomIn 0.6s ease-out forwards;
}
.diferencial-card:nth-child(1) {
animation-delay: 0.1s;
}
.diferencial-card:nth-child(2) {
animation-delay: 0.2s;
}
.diferencial-card:nth-child(3) {
animation-delay: 0.3s;
}
.diferencial-card:nth-child(4) {
animation-delay: 0.4s;
}
/* Efeitos hover modernos */
.timeline-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-item:hover {
transform: translateX(10px) scale(1.02);
}
.timeline-marker {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-marker {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 102, 204, 0.3);
}
.mvv-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.mvv-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.mvv-card:hover::before {
left: 100%;
}
.mvv-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.diferencial-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.diferencial-card:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 102, 204, 0.15);
}
.diferencial-icon-container {
transition: all 0.3s ease;
}
.diferencial-card:hover .diferencial-icon-container {
transform: rotateY(360deg);
}
/* Efeitos de parallax sutil */
.hero-imagem-container {
animation: floatSmooth 6s ease-in-out infinite;
}
.badge-experiencia-flutuante {
animation: pulse 3s ease-in-out infinite;
}
.elementos-decorativos-hero .elemento-hero-2 {
animation: float 8s ease-in-out infinite;
}
.elementos-decorativos-hero .elemento-hero-3 {
animation: pulse 4s ease-in-out infinite;
}
.particulas-flutuantes .particula {
animation: floatParticle 12s ease-in-out infinite;
}
.particulas-flutuantes .particula:nth-child(1) {
animation-delay: 0s;
}
.particulas-flutuantes .particula:nth-child(2) {
animation-delay: 2.4s;
}
.particulas-flutuantes .particula:nth-child(3) {
animation-delay: 4.8s;
}
.particulas-flutuantes .particula:nth-child(4) {
animation-delay: 7.2s;
}
.particulas-flutuantes .particula:nth-child(5) {
animation-delay: 9.6s;
}
/* Keyframes para animações */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes floatSmooth {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes floatParticle {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.3;
}
25% {
transform: translateY(-20px) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translateY(-10px) rotate(180deg);
opacity: 0.5;
}
75% {
transform: translateY(-25px) rotate(270deg);
opacity: 0.9;
}
}
/* Efeitos de intersecção moderna */
.hero-content-quem-somos > *:nth-child(odd) {
animation: slideInLeft 0.8s ease-out;
}
.hero-content-quem-somos > *:nth-child(even) {
animation: slideInRight 0.8s ease-out;
}
.hero-content-quem-somos .badge-institucional {
animation-delay: 0.1s;
}
.hero-content-quem-somos .titulo-quem-somos {
animation-delay: 0.2s;
}
.hero-content-quem-somos .subtitulo-quem-somos {
animation-delay: 0.3s;
}
.hero-content-quem-somos .diferenciais-rapidos {
animation-delay: 0.4s;
}
.hero-content-quem-somos .hero-actions-quem-somos {
animation-delay: 0.5s;
}
/* Efeito de ondulação nos botões */
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
position: relative;
overflow: hidden;
}
.btn-hero-whatsapp::before,
.btn-hero-saiba-mais::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.6s ease;
transform: translate(-50%, -50%);
}
.btn-hero-whatsapp:hover::before,
.btn-hero-saiba-mais:hover::before {
width: 300px;
height: 300px;
}
/* Microinterações para elementos da timeline */
.timeline-content h4 {
transition: color 0.3s ease;
}
.timeline-item:hover .timeline-content h4 {
color: var(--cor-primaria);
}
/* Efeito de gradiente animado para badges */
.badge-institucional,
.secao-badge {
background: linear-gradient(45deg, var(--cor-primaria), var(--cor-secundaria));
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% {
background: linear-gradient(45deg, var(--cor-primaria), var(--cor-secundaria));
}
50% {
background: linear-gradient(45deg, var(--cor-secundaria), var(--cor-primaria));
}
}
/* Responsividade para efeitos móveis */
@media (max-width: 768px) {
.timeline-historia .timeline-item,
.historia-conteudo,
.mvv-card,
.diferencial-card {
animation-duration: 0.6s;
}
.mvv-card:hover,
.diferencial-card:hover,
.timeline-item:hover {
transform: translateY(-3px) scale(1.01);
}
.hero-imagem-container {
animation-duration: 8s;
}
}
/* Suporte para usuários que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.timeline-historia .timeline-item,
.historia-conteudo,
.mvv-card,
.diferencial-card {
opacity: 1;
transform: none;
}
}
/* ===== FIM DOS EFEITOS CSS PURO PARA QUEM SOMOS ===== */
/* ===== BLOG - ANIMAÇÕES PADRONIZADAS SEGUINDO PADRÃO RDS ===== */
/* Animações de entrada para elementos do blog hero */
.hero-content-blog > *:nth-child(odd) {
animation: slideInLeft 0.8s ease-out forwards;
}
.hero-content-blog > *:nth-child(even) {
animation: slideInRight 0.8s ease-out forwards;
}
.hero-content-blog .badge-institucional {
animation: fadeInUp 0.8s ease-out 0.1s forwards;
}
.hero-content-blog .titulo-blog {
animation: slideInLeft 1s ease-out 0.2s forwards;
}
.hero-content-blog .subtitulo-blog {
animation: slideInLeft 0.8s ease-out 0.3s forwards;
}
.hero-content-blog .stats-rapidas {
animation: fadeInUp 0.8s ease-out 0.4s forwards;
}
.hero-content-blog .hero-actions-blog {
animation: fadeInUp 0.8s ease-out 0.5s forwards;
}
.hero-imagem-wrapper {
animation: slideInRight 1s ease-out 0.3s forwards;
}
/* Badge com efeito flutuante */
.blog-badge-modern {
animation: badgeFloat 3s ease-in-out infinite;
}
.blog-badge-modern i {
animation: pulse 2s ease-in-out infinite;
}
/* Título com linha crescente */
.blog-hero-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
animation: lineGrow 1s ease-out forwards;
animation-delay: 0.8s;
}
/* Estatísticas com contador animado */
.blog-stats .stat-number {
animation: countUp 2s ease-out forwards;
animation-delay: 1s;
}
/* Seção de busca com efeito deslizante */
.blog-search-wrapper {
animation: slideInUp 0.8s ease-out forwards;
animation-delay: 0.7s;
}
.popular-tags .tag-item {
animation: fadeInUp 0.6s ease-out forwards;
animation-fill-mode: both;
}
.popular-tags .tag-item:nth-child(1) { animation-delay: 0.9s; }
.popular-tags .tag-item:nth-child(2) { animation-delay: 1.0s; }
.popular-tags .tag-item:nth-child(3) { animation-delay: 1.1s; }
.popular-tags .tag-item:nth-child(4) { animation-delay: 1.2s; }
.popular-tags .tag-item:nth-child(5) { animation-delay: 1.3s; }
/* Posts do blog com animações */
.blog-posts-grid .featured-post {
animation: slideInLeft 0.8s ease-out forwards;
animation-delay: 0.8s;
}
.blog-posts-grid .regular-post:nth-child(odd) {
animation: slideInLeft 0.8s ease-out forwards;
animation-fill-mode: both;
}
.blog-posts-grid .regular-post:nth-child(even) {
animation: slideInRight 0.8s ease-out forwards;
animation-fill-mode: both;
}
.blog-posts-grid .regular-post:nth-child(1) { animation-delay: 1.0s; }
.blog-posts-grid .regular-post:nth-child(2) { animation-delay: 1.1s; }
.blog-posts-grid .regular-post:nth-child(3) { animation-delay: 1.2s; }
.blog-posts-grid .regular-post:nth-child(4) { animation-delay: 1.3s; }
.blog-posts-grid .regular-post:nth-child(5) { animation-delay: 1.4s; }
.blog-posts-grid .regular-post:nth-child(6) { animation-delay: 1.5s; }
/* Sidebar do blog */
.blog-sidebar .sidebar-widget {
animation: slideInRight 0.8s ease-out forwards;
animation-fill-mode: both;
}
.blog-sidebar .sidebar-widget:nth-child(1) { animation-delay: 0.9s; }
.blog-sidebar .sidebar-widget:nth-child(2) { animation-delay: 1.1s; }
.blog-sidebar .sidebar-widget:nth-child(3) { animation-delay: 1.3s; }
.blog-sidebar .sidebar-widget:nth-child(4) { animation-delay: 1.5s; }
/* Efeitos hover aprimorados para posts */
.blog-post {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-post:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.blog-post:hover .post-image {
transform: scale(1.05);
}
.blog-post:hover .post-title {
color: #1a3246;
}
/* Badge destaque com pulsação */
.featured-badge {
animation: badgeFloat 3s ease-in-out infinite;
}
/* Efeitos de hover para tags */
.tag-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.tag-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.tag-item:hover::before {
left: 100%;
}
/* Elementos decorativos flutuantes para o blog */
.blog-hero-section {
position: relative;
overflow: hidden;
}
.blog-hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: linear-gradient(45deg, rgba(0, 102, 204, 0.1), rgba(37, 211, 102, 0.1));
border-radius: 50%;
animation: floatSmooth 6s ease-in-out infinite;
z-index: -1;
}
.blog-hero-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(0, 68, 153, 0.08), rgba(0, 102, 204, 0.08));
border-radius: 50%;
animation: floatSmooth 8s ease-in-out infinite reverse;
z-index: -1;
}
/* Partículas flutuantes para o blog */
.blog-search-section {
position: relative;
overflow: hidden;
}
.blog-search-section::before {
content: '';
position: absolute;
top: 20%;
left: 10%;
width: 4px;
height: 4px;
background-color: #1a3246;
border-radius: 50%;
opacity: 0.6;
animation: floatParticle 12s linear infinite;
animation-delay: 0s;
}
.blog-search-section::after {
content: '';
position: absolute;
top: 60%;
right: 15%;
width: 6px;
height: 6px;
background-color: #f59e0b;
border-radius: 50%;
opacity: 0.4;
animation: floatParticle 15s linear infinite;
animation-delay: 3s;
}
/* Efeito shimmer para elementos de carregamento */
.blog-posts-grid .post-image-wrapper::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.6s;
z-index: 2;
}
.blog-post:hover .post-image-wrapper::before {
left: 100%;
}
/* Gradiente suave no background */
.blog-content-section {
background: linear-gradient(180deg,
rgba(248, 249, 250, 0) 0%,
rgba(248, 249, 250, 0.5) 50%,
rgba(248, 249, 250, 0) 100%
);
}
/* Efeito de ondulação nos botões de busca */
.search-btn {
position: relative;
overflow: hidden;
}
.search-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.6s ease;
transform: translate(-50%, -50%);
}
.search-btn:hover::before {
width: 300px;
height: 300px;
}
/* Animações responsivas para mobile */
@media (max-width: 768px) {
.hero-content-blog > *:nth-child(odd),
.hero-content-blog > *:nth-child(even) {
animation: fadeInUp 0.8s ease-out forwards;
}
.blog-posts-grid .regular-post:nth-child(odd),
.blog-posts-grid .regular-post:nth-child(even) {
animation: fadeInUp 0.8s ease-out forwards;
}
.blog-sidebar .sidebar-widget {
animation: fadeInUp 0.8s ease-out forwards;
}
.titulo-blog::after {
width: 50px;
}
}
/* Acessibilidade - redução de movimento para blog */
@media (prefers-reduced-motion: reduce) {
.hero-content-blog *,
.blog-search-wrapper *,
.blog-posts-grid *,
.blog-sidebar * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.blog-hero::before,
.blog-hero::after,
.blog-search-section::before,
.blog-search-section::after {
animation: none !important;
}
.blog-post:hover {
transform: none !important;
}
}
/* Alto contraste para blog */
@media (prefers-contrast: high) {
.titulo-blog,
.subtitulo-blog,
.post-title {
text-shadow: none;
font-weight: 700;
}
.badge-institucional,
.featured-badge,
.tag-item {
border: 2px solid currentColor;
background-color: #ffffff;
}
.titulo-blog::after {
background: currentColor;
}
}
/* ===== FIM DOS EFEITOS BLOG PADRONIZADOS ===== */
/* ===== SCROLL REVEAL ANIMATIONS ===== */
/* Base Reveal Class */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.reveal.reveal-visible {
opacity: 1;
transform: none;
}
/* Animation Variants */
.fade-up {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-out;
}
.fade-up.reveal-visible {
opacity: 1;
transform: translateY(0);
}
.fade-down {
opacity: 0;
transform: translateY(-50px);
transition: all 0.8s ease-out;
}
.fade-down.reveal-visible {
opacity: 1;
transform: translateY(0);
}
.fade-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease-out;
}
.fade-left.reveal-visible {
opacity: 1;
transform: translateX(0);
}
.fade-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s ease-out;
}
.fade-right.reveal-visible {
opacity: 1;
transform: translateX(0);
}
.zoom-in {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s ease-out;
}
.zoom-in.reveal-visible {
opacity: 1;
transform: scale(1);
}
.slide-up {
opacity: 0;
transform: translateY(80px);
transition: all 1s ease-out;
}
.slide-up.reveal-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered Animations */
.reveal-stagger {
transition-delay: 0.1s;
}
.reveal-stagger:nth-child(2) {
transition-delay: 0.2s;
}
.reveal-stagger:nth-child(3) {
transition-delay: 0.3s;
}
.reveal-stagger:nth-child(4) {
transition-delay: 0.4s;
}
.reveal-stagger:nth-child(5) {
transition-delay: 0.5s;
}
.reveal-stagger:nth-child(6) {
transition-delay: 0.6s;
}
/* Performance Optimized Animations */
@media (prefers-reduced-motion: reduce) {
.reveal,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.slide-up {
transition: none;
opacity: 1;
transform: none;
}
}
/* Enhanced Mobile Experience */
@media (max-width: 768px) {
.reveal,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.slide-up {
transition-duration: 0.5s;
transform: translateY(20px);
}
.fade-left,
.fade-right {
transform: translateY(20px);
}
}
/* Smooth Focus Transitions */
.reveal:focus-visible,
.fade-up:focus-visible,
.fade-down:focus-visible,
.fade-left:focus-visible,
.fade-right:focus-visible,
.zoom-in:focus-visible,
.slide-up:focus-visible {
outline: 2px solid #1a3246;
outline-offset: 2px;
}
/* ===== PÁGINA DE CONTATO - SEGUINDO PADRÃO QUEM-SOMOS ===== */
/* Hero Section - Contato */
.contato-hero {
position: relative;
padding: 120px 0 100px;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.hero-content-contato {
position: relative;
z-index: 3;
}
/* Título Principal da Página Contato */
.titulo-contato {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
}
.titulo-contato::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
margin: 1.5rem 0;
border-radius: 2px;
animation: lineGrow 1s ease-out 0.5s both;
}
/* Subtítulo da Página Contato */
.subtitulo-contato {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 2.5rem;
max-width: 550px;
}
.subtitulo-contato strong {
color: #1a3246;
font-weight: 600;
}
/* Canais Rápidos */
.canais-rapidos {
margin-bottom: 2.5rem;
}
.canal-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.canal-item:hover {
background: rgba(255, 255, 255, 1);
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.canal-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
.canal-texto {
display: flex;
flex-direction: column;
}
.canal-texto strong {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 2px;
}
.canal-texto span {
font-size: 0.875rem;
color: #666;
}
/* Hero Actions - Contato */
.hero-actions-contato {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
/* Seção do Formulário */
.formulario-contato-section {
padding: 100px 0;
background: #fafafa;
}
.formulario-wrapper {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
position: relative;
border-top: 4px solid #1a3246;
}
/* Formulário Moderno */
.formulario-moderno {
position: relative;
}
.form-group-moderno {
margin-bottom: 2rem;
position: relative;
}
.form-label-moderno {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #333;
font-size: 0.95rem;
margin-bottom: 8px;
}
.form-label-moderno i {
color: #1a3246;
font-size: 0.875rem;
}
.form-control-moderno {
width: 100%;
padding: 15px 20px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 1rem;
background: #fff;
transition: all 0.3s ease;
font-family: inherit;
}
.form-control-moderno:focus {
outline: none;
border-color: #1a3246;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
background: #fafbff;
}
.form-control-moderno:valid {
border-color: #f59e0b;
}
.form-control-moderno::placeholder {
color: #999;
}
select.form-control-moderno {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 45px;
}
textarea.form-control-moderno {
resize: vertical;
min-height: 120px;
}
/* Contador de Caracteres */
.char-counter {
text-align: right;
font-size: 12px;
color: #999;
margin-top: 5px;
font-weight: 500;
}
.char-counter.warning {
color: #ff9800;
}
.char-counter.danger {
color: #dc3545;
}
/* Checkbox Moderno */
.form-check-moderno {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 2rem;
}
.form-check-input-moderno {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
position: relative;
flex-shrink: 0;
margin-top: 2px;
}
.form-check-input-moderno:checked {
background: #1a3246;
border-color: #1a3246;
}
.form-check-input-moderno:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.form-check-label-moderno {
font-size: 0.9rem;
color: #666;
line-height: 1.4;
cursor: pointer;
}
.terms-link {
color: #1a3246;
text-decoration: none;
transition: color 0.3s ease;
}
.terms-link:hover {
color: #1a3246;
text-decoration: underline;
}
/* Submit Section */
.form-submit-moderno {
text-align: center;
margin-top: 2rem;
}
.btn-contact-submit {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 40px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}
.btn-contact-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-contact-submit:hover::before {
left: 100%;
}
.btn-contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
.btn-contact-submit:active {
transform: translateY(0);
}
.form-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 1.5rem;
font-size: 0.875rem;
color: #666;
}
.form-note i {
color: #f59e0b;
}
/* Sidebar de Contato */
.contato-sidebar {
position: sticky;
top: 20px;
}
/* Ícones das Redes Sociais - Contato - Sempre Visíveis */
.contato-sidebar .social-media-widget .social-link {
opacity: 1 !important;
visibility: visible !important;
}
.contato-sidebar .social-media-widget .social-link.facebook {
background: linear-gradient(135deg, #1877f2, #165ed0) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-link.instagram {
background: linear-gradient(135deg, #e4405f, #c73650) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-link.linkedin {
background: linear-gradient(135deg, #0077b5, #005885) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-link.youtube {
background: linear-gradient(135deg, #ff0000, #cc0000) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-media-links {
opacity: 1 !important;
visibility: visible !important;
}
/* Garantir que os ícones FontAwesome dentro dos links sejam visíveis */
.contato-sidebar .social-media-widget .social-link i {
color: white !important;
opacity: 1 !important;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
position: relative;
border-top: 4px solid #1a3246;
}
.contact-info-widget:hover,
.whatsapp-cta-widget:hover,
.social-media-widget:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.widget-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.widget-title i {
color: #1a3246;
}
.contact-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
transition: all 0.3s ease;
}
.contact-info-item:last-child {
border-bottom: none;
}
.contact-info-item:hover {
background: #f8f9fa;
margin: 0 -15px;
padding: 15px;
border-radius: 10px;
}
.contact-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 5px 0;
}
.contact-details p {
font-size: 0.9rem;
color: #666;
margin: 0;
line-height: 1.4;
}
.contact-details a {
color: #1a3246;
text-decoration: none;
}
.contact-details a:hover {
text-decoration: underline;
}
/* Widget WhatsApp */
.whatsapp-cta-content {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.whatsapp-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
animation: whatsappPulse 2s infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.whatsapp-text h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 5px 0;
}
.whatsapp-text p {
font-size: 0.9rem;
color: #666;
margin: 0;
}
.btn-whatsapp-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-cta:hover {
background: linear-gradient(135deg, #20c659, #0e6b5c);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
/* Widget Redes Sociais */
.social-media-links {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
opacity: 1;
}
.social-link {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white !important;
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
opacity: 1;
}
.social-link.facebook {
background: linear-gradient(135deg, #1877f2, #165ed0) !important;
color: white !important;
}
.social-link.instagram {
background: linear-gradient(135deg, #e4405f, #c73650) !important;
color: white !important;
}
.social-link.linkedin {
background: linear-gradient(135deg, #0077b5, #005885) !important;
color: white !important;
}
.social-link.youtube {
background: linear-gradient(135deg, #ff0000, #cc0000) !important;
color: white !important;
}
.social-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: white !important;
}
/* Seção do Mapa */
.contact-map-section {
padding: 100px 0;
background: #fff;
}
.map-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}
.map-wrapper {
position: relative;
width: 100%;
height: 500px;
}
.google-map {
width: 100%;
height: 100%;
border: none;
border-radius: 20px;
transition: all 0.3s ease;
}
.map-container:hover .google-map {
transform: scale(1.02);
}
/* Animações seguindo padrão do blog para seção hero */
.hero-content-contato > *:nth-child(odd) {
opacity: 0;
animation: slideInLeft 0.8s ease-out forwards;
}
.hero-content-contato > *:nth-child(even) {
opacity: 0;
animation: slideInRight 0.8s ease-out forwards;
}
/* Badge com animação específica */
.badge-institucional {
opacity: 0;
animation: fadeInUp 0.8s ease-out 0.1s forwards;
}
/* Título com animação específica */
.titulo-contato {
opacity: 0;
animation: slideInUp 0.8s ease-out 0.2s forwards;
}
/* Delays escalonados */
.hero-content-contato .badge-institucional {
animation-delay: 0.1s;
}
.hero-content-contato .titulo-contato {
animation-delay: 0.2s;
}
.hero-content-contato .subtitulo-contato {
animation-delay: 0.3s;
}
.hero-content-contato .canais-rapidos {
animation-delay: 0.4s;
}
.hero-content-contato .hero-actions-contato {
animation-delay: 0.5s;
}
/* Sidebar widgets com animação escalonada */
.contato-sidebar .contact-info-widget {
opacity: 1;
animation: fadeInUp 0.8s ease-out 0.6s forwards;
}
.contato-sidebar .whatsapp-cta-widget {
opacity: 1;
animation: fadeInUp 0.8s ease-out 0.7s forwards;
}
.contato-sidebar .social-media-widget {
opacity: 1;
animation: fadeInUp 0.8s ease-out 0.8s forwards;
}
/* Responsividade */
@media (max-width: 1199.98px) {
.titulo-contato {
font-size: 3rem;
}
.formulario-wrapper {
padding: 30px;
}
.contato-sidebar {
position: static;
margin-top: 3rem;
}
}
@media (max-width: 991.98px) {
.contato-hero {
padding: 80px 0 60px;
min-height: auto;
}
.titulo-contato {
font-size: 2.5rem;
text-align: center;
}
.titulo-contato::after {
margin: 1.5rem auto;
}
.subtitulo-contato {
text-align: center;
margin: 0 auto 2rem;
}
.hero-actions-contato {
justify-content: center;
}
.formulario-contato-section {
padding: 60px 0;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 25px;
}
.contact-map-section {
padding: 60px 0;
}
.map-wrapper {
height: 400px;
}
}
@media (max-width: 767.98px) {
.contato-hero {
padding: 60px 0 40px;
}
.titulo-contato {
font-size: 2rem;
}
.titulo-contato::after {
width: 60px;
height: 3px;
}
.subtitulo-contato {
font-size: 1.1rem;
}
.badge-institucional {
font-size: 0.8rem;
padding: 8px 16px;
}
.canais-rapidos {
margin-bottom: 2rem;
}
.canal-item {
padding: 0.75rem;
}
.canal-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-contato {
flex-direction: column;
gap: 1rem;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
width: 100%;
justify-content: center;
}
.formulario-contato-section {
padding: 40px 0;
}
.formulario-wrapper {
padding: 20px;
}
.form-control-moderno {
padding: 12px 16px;
}
.btn-contact-submit {
padding: 14px 30px;
font-size: 1rem;
}
.contact-info-list {
gap: 1rem;
}
.contact-info-item:hover {
margin: 0 -10px;
padding: 15px 10px;
}
.whatsapp-cta-widget {
padding: 20px;
}
.contact-map-section {
padding: 40px 0;
}
.map-wrapper {
height: 300px;
}
}
@media (max-width: 575.98px) {
.contato-hero {
padding: 40px 0 30px;
}
.titulo-contato {
font-size: 1.75rem;
}
.badge-institucional {
font-size: 0.75rem;
padding: 6px 12px;
}
.formulario-wrapper {
padding: 15px;
}
.form-control-moderno {
padding: 10px 14px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 20px 15px;
}
.map-wrapper {
height: 250px;
}
.contact-map-section {
padding: 30px 0;
}
.map-container {
border-radius: 15px;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.hero-content-contato *,
.contato-sidebar *,
.canal-item,
.contact-info-item {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.titulo-contato,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
color: #1a3246 !important;
-webkit-text-fill-color: #1a3246 !important;
}
.form-control-moderno {
border-color: #000 !important;
}
.form-control-moderno:focus {
border-color: #1a3246 !important;
box-shadow: 0 0 0 2px #1a3246 !important;
}
.btn-contact-submit,
.btn-whatsapp-cta {
background: #1a3246 !important;
color: white !important;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
border: 2px solid #1a3246 !important;
}
}
/* ===== FIM DA PÁGINA DE CONTATO ===== */
/* ===== PÁGINA TERMOS DE USO - SEGUINDO PADRÃO FRONTEND RDS ===== */
/* Hero Section Termos - Seguindo Padrão */
.termos-hero {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-termos {
position: relative;
z-index: 3;
}
.titulo-termos {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.titulo-termos::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
.subtitulo-termos {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-termos strong {
color: #1a3246;
font-weight: 700;
}
/* Informações Rápidas */
.info-rapidas {
margin-bottom: 3rem;
}
.info-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.info-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.info-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.info-texto {
display: flex;
flex-direction: column;
}
.info-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.info-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions Termos */
.hero-actions-termos {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Seção Conteúdo - Seguindo Padrão */
/* ===== VARIÁVEIS CSS RDS TRANSPORTES ===== */
:root {
/* Cores principais */
--cor-azul-primario: #1a3246;
--cor-azul-escuro: #1a3246;
--cor-whatsapp: #f59e0b;
--cor-texto-secundario: #666;
/* Espaçamentos */
--espacamento-secao-desktop: 100px;
--espacamento-secao-tablet: 60px;
--espacamento-secao-mobile: 40px;
/* Border radius */
--border-radius-pequeno: 8px;
--border-radius-medio: 12px;
--border-radius-grande: 20px;
}
/* ===== HEADER STYLES - RDS TRANSPORTES ===== */
/* Header Superior */
.header-top {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%) !important;
font-size: 0.875rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-top a {
transition: opacity 0.3s ease;
}
.header-top a:hover {
opacity: 0.8;
}
.contact-info i {
font-size: 0.75rem;
opacity: 0.9;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.social-links a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Header Principal */
.main-header {
transition: all 0.3s ease;
z-index: 1000;
}
.main-header.scrolled {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}
.navbar-brand {
transition: transform 0.3s ease;
}
.navbar-brand:hover {
transform: scale(1.05);
}
.logo-img {
max-height: 180px;
width: auto;
transition: all 0.3s ease;
}
/* Menu de Navegação */
.navbar-nav .nav-link {
color: #333 !important;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
position: relative;
transition: all 0.3s ease;
margin: 0 5px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: #1a3246 !important;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 1px;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
width: 80%;
}
/* Dropdown Menu */
.dropdown-menu {
border: none;
border-radius: 12px;
padding: 1rem 0;
margin-top: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.3s ease;
}
.dropdown-item {
color: #333 !important;
font-weight: 500;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), transparent);
color: #1a3246 !important;
border-left-color: #1a3246;
transform: translateX(5px);
}
/* Botão de Ação */
.btn-success {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
border: none;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.btn-success:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-success:active {
transform: translateY(0);
}
/* Mobile Menu Toggle */
.navbar-toggler {
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.navbar-toggler:hover {
background: rgba(0, 102, 204, 0.1);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}
/* Animações */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== RESPONSIVIDADE ===== */
/* Tablets */
@media (max-width: 991.98px) {
.navbar-nav {
padding: 1rem 0;
background: #fff;
border-radius: 12px;
margin-top: 1rem;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
border-radius: 8px;
margin: 0.25rem 0;
}
.navbar-nav .nav-link::after {
display: none;
}
.navbar-nav .nav-link:hover {
background: rgba(0, 102, 204, 0.1);
}
.btn-success {
margin-top: 1rem;
justify-content: center !important;
width: 100%;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.logo-img {
max-height: 180px;
}
.navbar-brand {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.navbar-toggler {
padding: 0.375rem;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.contact-info {
flex-direction: column;
gap: 0.5rem;
}
.contact-info span {
margin-right: 0 !important;
}
.social-links span {
display: none;
}
}
/* ===== PERFORMANCE & ACCESSIBILITY ===== */
/* Reduzir motion para usuários com preferência */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Alto contraste */
@media (prefers-contrast: high) {
.navbar-nav .nav-link {
border: 1px solid transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
border-color: #1a3246;
background: rgba(0, 102, 204, 0.1);
}
}
/* Melhor foco para navegação por teclado */
.nav-link:focus,
.btn:focus,
.dropdown-item:focus {
outline: 2px solid #1a3246;
outline-offset: 2px;
}
/* ===== UTILITÁRIOS ADICIONAIS ===== */
/* Sticky header com transição suave */
.sticky-top {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Loading state para logo */
.logo-img[src=""] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ===== APRESENTAÇÃO EMPRESA 01 - VERSÃO ORIGINAL ===== */
.empresa-apresentacao {
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
overflow: hidden;
}
/* Badge/Tag de destaque */
.empresa-badge {
display: inline-block;
}
.badge-text {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Título da apresentação */
.apresentacao-titulo {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
line-height: 1.2;
margin-bottom: 1.5rem;
position: relative;
}
.apresentacao-titulo::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 2px;
}
/* Texto descritivo */
.apresentacao-texto {
font-size: 1.125rem;
color: #6c757d;
line-height: 1.6;
}
/* Features/Características */
.empresa-features {
margin: 2rem 0;
}
.feature-item {
padding: 1rem 0;
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateX(10px);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.2);
transition: all 0.3s ease;
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
.feature-text strong {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
}
.feature-text small {
color: #6c757d;
font-size: 0.875rem;
}
/* Botões de ação */
.apresentacao-actions {
margin-top: 2rem;
}
.btn-whatsapp {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
border: none;
color: white;
font-weight: 600;
border-radius: 50px;
padding: 0.75rem 2rem;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.btn-whatsapp::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-whatsapp:hover::before {
left: 100%;
}
.btn-whatsapp:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-outline-primary {
border: 2px solid #1a3246;
color: #1a3246;
background: transparent;
font-weight: 600;
border-radius: 50px;
padding: 0.75rem 2rem;
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
/* Visual da apresentação */
.apresentacao-visual {
position: relative;
z-index: 2;
}
.main-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.main-image-wrapper:hover {
transform: translateY(-10px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}
.main-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.main-image-wrapper:hover .main-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(37, 211, 102, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.main-image-wrapper:hover .image-overlay {
opacity: 1;
}
/* Card de estatísticas flutuante */
.stats-card {
bottom: -30px;
right: -30px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
animation: floatCard 3s ease-in-out infinite;
}
@keyframes floatCard {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.stats-content {
display: flex;
align-items: center;
gap: 1rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 1.5rem;
font-weight: 700;
color: #1a3246;
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
color: #6c757d;
font-weight: 500;
margin-top: 0.25rem;
}
.stat-divider {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, #dee2e6, transparent);
}
/* Elementos decorativos flutuantes */
.decorative-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.floating-element {
position: absolute;
width: 60px;
height: 60px;
background: rgba(0, 102, 204, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a3246;
font-size: 1.5rem;
backdrop-filter: blur(10px);
}
.element-1 {
top: 10%;
left: -10%;
animation: float1 6s ease-in-out infinite;
}
.element-2 {
top: 60%;
right: -15%;
animation: float2 8s ease-in-out infinite;
}
.element-3 {
bottom: 20%;
left: -5%;
animation: float3 7s ease-in-out infinite;
}
@keyframes float1 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -20px) rotate(180deg); }
}
@keyframes float2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-30px, 15px) rotate(-180deg); }
}
@keyframes float3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(15px, -25px) rotate(90deg); }
}
/* Background decorativo da seção */
.section-bg-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.bg-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(37, 211, 102, 0.05));
}
.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
animation: rotate 20s linear infinite;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: -100px;
animation: rotate 30s linear infinite reverse;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== SEÇÃO DE NÚMEROS/CONQUISTAS - VERSÃO 01 ===== */
.numeros-conquistas {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.numero-item {
padding: 1.5rem 1rem;
text-align: center;
transition: all 0.3s ease;
border-radius: 12px;
}
.numero-item:hover {
background: rgba(0, 102, 204, 0.05);
transform: translateY(-5px);
}
.numero-icon {
color: #1a3246;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.numero-value {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
line-height: 1;
margin-bottom: 0.25rem;
}
.numero-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== RESPONSIVIDADE - APRESENTAÇÃO EMPRESA 01 ===== */
/* Tablets */
@media (max-width: 991.98px) {
.apresentacao-titulo {
font-size: 2rem;
}
.stats-card {
position: static;
margin-top: 2rem;
transform: none !important;
}
.floating-element {
display: none;
}
.apresentacao-actions {
flex-direction: column;
gap: 1rem;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.empresa-apresentacao {
padding: 3rem 0;
}
.apresentacao-titulo {
font-size: 1.75rem;
text-align: center;
}
.apresentacao-texto {
text-align: center;
font-size: 1rem;
}
.feature-item {
text-align: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
}
.feature-item:hover {
transform: translateY(-5px);
}
.stats-content {
flex-direction: column;
gap: 1rem;
}
.stat-divider {
width: 40px;
height: 1px;
}
.numero-value {
font-size: 2rem;
}
.bg-shape {
display: none;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.apresentacao-titulo {
font-size: 1.5rem;
}
.badge-text {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}
.feature-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.btn-whatsapp,
.btn-outline-primary {
padding: 0.625rem 1.5rem;
font-size: 0.875rem;
}
.stats-card {
padding: 1rem;
}
.stat-number {
font-size: 1.25rem;
}
.numero-item {
padding: 1rem 0.5rem;
}
.numero-value {
font-size: 1.75rem;
}
}
/* ===== ANIMAÇÕES AOS (Animate On Scroll) ===== */
[data-aos] {
opacity: 0;
transition: opacity 0.6s ease;
}
[data-aos].aos-animate {
opacity: 1;
}
/* Otimizações de performance */
.empresa-apresentacao *,
.numeros-conquistas * {
will-change: auto;
}
.empresa-apresentacao:hover *,
.numeros-conquistas:hover * {
will-change: transform;
}
/* ===== CONTADORES ANIMADOS ===== */
.numero-value {
counter-reset: counter;
animation: countUp 2s ease-out;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== APRESENTAÇÃO EMPRESA 2 - VERSÃO ALTERNATIVA ===== */
.apresentacao-empresa-v2 {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
overflow: hidden;
display: flex;
align-items: center;
}
/* Coluna da Imagem - V2 */
.img-container-v2 {
position: relative;
height: 100vh;
overflow: hidden;
}
.img-principal-v2 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: brightness(1.1) contrast(1.05);
}
.img-container-v2:hover .img-principal-v2 {
transform: scale(1.08);
}
/* Overlay com Gradiente - V2 */
.overlay-v2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 102, 204, 0.2) 0%,
rgba(37, 211, 102, 0.15) 50%,
rgba(0, 102, 204, 0.3) 100%
);
z-index: 1;
}
/* Card Flutuante - V2 */
.card-flutuante-v2 {
position: absolute;
top: 15%;
right: 8%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: 3;
animation: floatCardV2 4s ease-in-out infinite;
}
@keyframes floatCardV2 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(1deg); }
}
.card-inner-v2 {
text-align: center;
}
.numero-destaque-v2 {
font-size: 3rem;
font-weight: 800;
color: #1a3246;
line-height: 1;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}
.texto-destaque-v2 {
font-size: 0.875rem;
color: #6c757d;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Elementos Decorativos - V2 */
.decorativo-v2 {
position: absolute;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.3);
z-index: 2;
}
.decorativo-1 {
top: 25%;
left: 10%;
animation: floatDecorativo1V2 6s ease-in-out infinite;
}
.decorativo-2 {
bottom: 25%;
right: 15%;
animation: floatDecorativo2V2 8s ease-in-out infinite;
}
@keyframes floatDecorativo1V2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(15px, -20px) rotate(180deg); }
}
@keyframes floatDecorativo2V2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-20px, 15px) rotate(-180deg); }
}
/* Coluna do Conteúdo - V2 */
.conteudo-v2 {
padding: 4rem 3rem;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
/* Badge de Qualidade - V2 */
.badge-qualidade-v2 {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
animation: badgePulseV2 3s ease-in-out infinite;
width: fit-content;
}
@keyframes badgePulseV2 {
0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4); }
}
.badge-icon-v2 {
margin-right: 0.75rem;
font-size: 1rem;
}
/* Título Principal - V2 */
.titulo-principal-v2 {
font-size: 2.75rem;
font-weight: 700;
color: #2c3e50;
line-height: 1.2;
margin-bottom: 1.5rem;
position: relative;
}
.titulo-principal-v2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 2px;
animation: lineGrowV2 2s ease-out;
}
@keyframes lineGrowV2 {
0% { width: 0; }
100% { width: 80px; }
}
/* Texto Descritivo - V2 */
.descricao-v2 {
margin-bottom: 2.5rem;
}
.texto-principal-v2 {
font-size: 1.125rem;
color: #6c757d;
line-height: 1.7;
margin: 0;
}
/* Benefícios - V2 */
.beneficios-v2 {
margin-bottom: 3rem;
}
.beneficio-item-v2 {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem 0;
transition: all 0.3s ease;
border-radius: 12px;
}
.beneficio-item-v2:hover {
background: rgba(0, 102, 204, 0.05);
transform: translateX(10px);
padding-left: 1rem;
}
.beneficio-icon-v2 {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f59e0b, #20c659);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
margin-right: 1rem;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.beneficio-item-v2:hover .beneficio-icon-v2 {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.beneficio-texto-v2 {
display: flex;
flex-direction: column;
}
.beneficio-texto-v2 strong {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.beneficio-texto-v2 span {
color: #6c757d;
font-size: 0.875rem;
}
/* Botões de Ação - V2 */
.acoes-v2 {
display: flex;
gap: 1rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.btn-whatsapp-v2 {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
min-width: 200px;
justify-content: center;
}
.btn-whatsapp-v2:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5);
color: white;
text-decoration: none;
}
.btn-icon-v2 {
margin-right: 0.75rem;
font-size: 1.2rem;
animation: pulseIconV2 2s ease-in-out infinite;
}
@keyframes pulseIconV2 {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.btn-texto-v2 {
position: relative;
z-index: 2;
}
.btn-pulse-v2 {
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;
}
.btn-whatsapp-v2:hover .btn-pulse-v2 {
left: 100%;
}
.btn-saiba-mais-v2 {
display: inline-flex;
align-items: center;
color: #1a3246;
text-decoration: none;
padding: 1rem 2rem;
border: 2px solid #1a3246;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
min-width: 160px;
justify-content: center;
gap: 0.5rem;
}
.btn-saiba-mais-v2:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
text-decoration: none;
}
.btn-saiba-mais-v2 i {
transition: transform 0.3s ease;
}
.btn-saiba-mais-v2:hover i {
transform: translateX(5px);
}
/* Avaliação - V2 */
.avaliacao-v2 {
text-align: center;
padding: 1.5rem;
background: rgba(255, 193, 7, 0.1);
border-radius: 15px;
border: 1px solid rgba(255, 193, 7, 0.2);
}
.estrelas-v2 {
margin-bottom: 1rem;
}
.estrelas-v2 i {
color: #ffc107;
font-size: 1.25rem;
margin: 0 0.125rem;
animation: estrelaV2 0.5s ease-in-out;
animation-delay: calc(var(--i) * 0.1s);
}
.estrelas-v2 i:nth-child(1) { --i: 1; }
.estrelas-v2 i:nth-child(2) { --i: 2; }
.estrelas-v2 i:nth-child(3) { --i: 3; }
.estrelas-v2 i:nth-child(4) { --i: 4; }
.estrelas-v2 i:nth-child(5) { --i: 5; }
@keyframes estrelaV2 {
0% { transform: scale(0) rotate(0deg); opacity: 0; }
50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
100% { transform: scale(1) rotate(360deg); opacity: 1; }
}
.texto-avaliacao-v2 {
color: #6c757d;
font-size: 0.9rem;
margin: 0;
line-height: 1.5;
}
.texto-avaliacao-v2 strong {
color: #1a3246;
font-weight: 700;
}
/* Formas Decorativas de Fundo - V2 */
.formas-fundo-v2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.forma-1-v2,
.forma-2-v2,
.forma-3-v2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.03), rgba(37, 211, 102, 0.05));
}
.forma-1-v2 {
width: 400px;
height: 400px;
top: -200px;
right: -200px;
animation: rotateFormaV2 25s linear infinite;
}
.forma-2-v2 {
width: 300px;
height: 300px;
bottom: -150px;
left: -150px;
animation: rotateFormaV2 35s linear infinite reverse;
}
.forma-3-v2 {
width: 200px;
height: 200px;
top: 50%;
right: 10%;
animation: rotateFormaV2 20s linear infinite;
}
@keyframes rotateFormaV2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== RESPONSIVIDADE - APRESENTAÇÃO EMPRESA 2 ===== */
/* Tablets - V2 */
@media (max-width: 991.98px) {
.apresentacao-empresa-v2 {
min-height: auto;
}
.img-container-v2 {
height: 60vh;
}
.conteudo-v2 {
height: auto;
padding: 3rem 2rem;
}
.titulo-principal-v2 {
font-size: 2.25rem;
text-align: center;
}
.card-flutuante-v2 {
position: static;
margin: 2rem auto;
max-width: 250px;
}
.decorativo-v2 {
display: none;
}
.acoes-v2 {
justify-content: center;
}
}
/* Mobile - V2 */
@media (max-width: 767.98px) {
.ordem-img-mobile {
order: 2;
}
.apresentacao-empresa-v2 .col-lg-5 {
order: 1;
}
.img-container-v2 {
height: 50vh;
}
.conteudo-v2 {
padding: 2rem 1.5rem;
text-align: center;
}
.titulo-principal-v2 {
font-size: 2rem;
}
.badge-qualidade-v2 {
margin: 0 auto 2rem auto;
}
.beneficio-item-v2 {
text-align: left;
}
.beneficio-item-v2:hover {
transform: translateY(-3px);
padding-left: 0;
}
.acoes-v2 {
flex-direction: column;
align-items: center;
}
.btn-whatsapp-v2,
.btn-saiba-mais-v2 {
width: 100%;
max-width: 280px;
}
}
/* Mobile Small - V2 */
@media (max-width: 575.98px) {
.conteudo-v2 {
padding: 1.5rem 1rem;
}
.titulo-principal-v2 {
font-size: 1.75rem;
}
.badge-qualidade-v2 {
font-size: 0.8rem;
padding: 0.625rem 1.25rem;
}
.beneficio-icon-v2 {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.texto-principal-v2 {
font-size: 1rem;
}
.btn-whatsapp-v2,
.btn-saiba-mais-v2 {
padding: 0.875rem 1.5rem;
font-size: 0.9rem;
}
.numero-destaque-v2 {
font-size: 2.5rem;
}
.card-flutuante-v2 {
padding: 1.5rem 1rem;
}
}
/* ===== APRESENTAÇÃO EMPRESA 3 - VERSÃO EXPERIÊNCIA ===== */
.apresentacao-empresa-v3 {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #ffffff 0%, #f8fafe 50%, #f0f7ff 100%);
overflow: hidden;
display: flex;
align-items: center;
}
/* Conteúdo Principal - V3 */
.conteudo-experiencia-v3 {
background: linear-gradient(135deg, #1a3246 0%, #0052a3 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.conteudo-experiencia-v3::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
transform: skewX(-15deg);
animation: shineEffectV3 3s ease-in-out infinite;
}
@keyframes shineEffectV3 {
0%, 100% { opacity: 0; transform: skewX(-15deg) translateX(-100px); }
50% { opacity: 1; transform: skewX(-15deg) translateX(50px); }
}
.conteudo-wrapper-v3 {
padding: 3rem 2.5rem;
color: white;
text-align: left;
position: relative;
z-index: 2;
max-width: 500px;
}
/* Título Principal - V3 */
.titulo-destaque-v3 {
margin-bottom: 2rem;
position: relative;
}
.titulo-experiencia-v3 {
font-size: 2.75rem;
font-weight: 800;
line-height: 1.1;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
animation: titleSlideInV3 1s ease-out;
}
@keyframes titleSlideInV3 {
0% {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Texto da Experiência - V3 */
.texto-experiencia-v3 {
margin-bottom: 2.5rem;
}
.descricao-experiencia-v3 {
font-size: 1.125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
margin: 0;
animation: textFadeInV3 1s ease-out 0.3s both;
}
.descricao-experiencia-v3 strong {
color: #ffd700;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@keyframes textFadeInV3 {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Botão Principal - V3 */
.acao-principal-v3 {
margin-bottom: 3rem;
}
.btn-consultor-v3 {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #f59e0b 0%, #20c659 100%);
color: white;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 60px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow:
0 8px 25px rgba(37, 211, 102, 0.4),
0 0 0 0 rgba(37, 211, 102, 0.5);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.2);
animation: buttonPulseV3 2s ease-in-out infinite;
}
@keyframes buttonPulseV3 {
0%, 100% {
box-shadow:
0 8px 25px rgba(37, 211, 102, 0.4),
0 0 0 0 rgba(37, 211, 102, 0.5);
}
50% {
box-shadow:
0 12px 35px rgba(37, 211, 102, 0.6),
0 0 0 10px rgba(37, 211, 102, 0);
}
}
.btn-consultor-v3:hover {
background: linear-gradient(135deg, #20c659 0%, #1ea851 100%);
transform: translateY(-3px) scale(1.02);
box-shadow:
0 15px 40px rgba(37, 211, 102, 0.6),
0 0 0 0 rgba(37, 211, 102, 0);
color: white;
text-decoration: none;
}
.btn-icon-consultor-v3 {
margin-right: 0.75rem;
font-size: 1.3rem;
animation: iconBounceV3 2s ease-in-out infinite;
}
@keyframes iconBounceV3 {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.btn-texto-consultor-v3 {
position: relative;
z-index: 2;
}
.btn-efeito-v3 {
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;
}
.btn-consultor-v3:hover .btn-efeito-v3 {
left: 100%;
}
/* Indicadores de Qualidade - V3 */
.indicadores-v3 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.indicador-item-v3 {
text-align: center;
flex: 1;
}
.indicador-numero-v3 {
display: block;
font-size: 1.8rem;
font-weight: 800;
color: #ffd700;
line-height: 1;
margin-bottom: 0.25rem;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.indicador-texto-v3 {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
}
.separador-v3 {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
margin: 0 1rem;
}
/* Certificações - V3 */
.certificacoes-v3 {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.cert-item-v3 {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-weight: 500;
}
.cert-item-v3 i {
margin-right: 0.5rem;
color: #ffd700;
font-size: 1rem;
}
/* Imagem da Experiência - V3 */
.imagem-experiencia-v3 {
height: 100vh;
position: relative;
overflow: hidden;
}
.img-wrapper-v3 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-experiencia-v3 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: brightness(1.1) contrast(1.05) saturate(1.1);
}
.img-wrapper-v3:hover .img-experiencia-v3 {
transform: scale(1.05);
}
/* Overlay Sutil - V3 */
.overlay-sutil-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 102, 204, 0.1) 0%,
transparent 50%,
rgba(37, 211, 102, 0.1) 100%
);
z-index: 1;
}
/* Badge Flutuante - V3 */
.badge-flutuante-v3 {
position: absolute;
top: 8%;
right: 8%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: 3;
animation: floatBadgeV3 4s ease-in-out infinite;
}
@keyframes floatBadgeV3 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(2deg); }
}
.badge-conteudo-v3 {
text-align: center;
color: #1a3246;
}
.badge-conteudo-v3 i {
font-size: 2rem;
color: #ff6b6b;
margin-bottom: 0.5rem;
display: block;
}
.badge-conteudo-v3 span {
font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Elementos Flutuantes - V3 */
.elementos-flutuantes-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 2;
}
.elemento-flutuante-v3 {
position: absolute;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.elemento-1-v3 {
top: 20%;
left: 8%;
animation: floatElement1V3 8s ease-in-out infinite;
}
.elemento-2-v3 {
bottom: 30%;
right: 5%;
animation: floatElement2V3 10s ease-in-out infinite;
}
.elemento-3-v3 {
bottom: 15%;
left: 12%;
animation: floatElement3V3 6s ease-in-out infinite;
}
@keyframes floatElement1V3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -15px) rotate(180deg); }
}
@keyframes floatElement2V3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-15px, 20px) rotate(-180deg); }
}
@keyframes floatElement3V3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(25px, -10px) rotate(90deg); }
}
/* Elementos de Fundo Decorativos - V3 */
.bg-decorativo-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.onda-v3 {
position: absolute;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 102, 204, 0.05));
border-radius: 50%;
}
.onda-1-v3 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
animation: rotateWaveV3 20s linear infinite;
}
.onda-2-v3 {
width: 200px;
height: 200px;
bottom: -100px;
left: -50px;
animation: rotateWaveV3 25s linear infinite reverse;
}
@keyframes rotateWaveV3 {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
.circulo-v3 {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.circulo-1-v3 {
width: 150px;
height: 150px;
top: 30%;
right: 20%;
animation: pulseCircleV3 4s ease-in-out infinite;
}
.circulo-2-v3 {
width: 100px;
height: 100px;
bottom: 40%;
left: 10%;
animation: pulseCircleV3 6s ease-in-out infinite;
}
@keyframes pulseCircleV3 {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.2);
opacity: 0.6;
}
}
/* ===== RESPONSIVIDADE - APRESENTAÇÃO EMPRESA 3 ===== */
/* Tablets - V3 */
@media (max-width: 1199.98px) {
.titulo-experiencia-v3 {
font-size: 2.25rem;
}
.conteudo-wrapper-v3 {
padding: 2.5rem 2rem;
}
.indicadores-v3 {
flex-direction: column;
gap: 1rem;
}
.separador-v3 {
width: 100%;
height: 1px;
margin: 0;
}
}
@media (max-width: 991.98px) {
.apresentacao-empresa-v3 {
min-height: auto;
}
.conteudo-experiencia-v3 {
height: auto;
min-height: 70vh;
}
.imagem-experiencia-v3 {
height: 60vh;
}
.titulo-experiencia-v3 {
font-size: 2rem;
text-align: center;
}
.conteudo-wrapper-v3 {
text-align: center;
}
.badge-flutuante-v3 {
position: static;
margin: 2rem auto;
max-width: 200px;
}
.elementos-flutuantes-v3 {
display: none;
}
}
/* Mobile - V3 */
@media (max-width: 767.98px) {
.apresentacao-empresa-v3 .row {
flex-direction: column-reverse;
}
.conteudo-experiencia-v3 {
min-height: auto;
padding: 0;
}
.conteudo-wrapper-v3 {
padding: 2rem 1.5rem;
}
.titulo-experiencia-v3 {
font-size: 1.75rem;
}
.descricao-experiencia-v3 {
font-size: 1rem;
}
.btn-consultor-v3 {
width: 100%;
max-width: 300px;
padding: 1rem 2rem;
font-size: 0.9rem;
}
.indicadores-v3 {
padding: 1rem;
gap: 0.75rem;
}
.indicador-numero-v3 {
font-size: 1.5rem;
}
.certificacoes-v3 {
justify-content: center;
gap: 1rem;
}
.cert-item-v3 {
font-size: 0.8rem;
}
.imagem-experiencia-v3 {
height: 50vh;
}
}
/* Mobile Small - V3 */
@media (max-width: 575.98px) {
.conteudo-wrapper-v3 {
padding: 1.5rem 1rem;
}
.titulo-experiencia-v3 {
font-size: 1.5rem;
}
.btn-consultor-v3 {
padding: 0.875rem 1.5rem;
font-size: 0.85rem;
}
.btn-icon-consultor-v3 {
font-size: 1.1rem;
margin-right: 0.5rem;
}
.indicadores-v3 {
padding: 0.75rem;
gap: 0.5rem;
}
.indicador-numero-v3 {
font-size: 1.25rem;
}
.indicador-texto-v3 {
font-size: 0.7rem;
}
.badge-flutuante-v3 {
padding: 1rem;
}
.badge-conteudo-v3 i {
font-size: 1.5rem;
}
.badge-conteudo-v3 span {
font-size: 0.75rem;
}
}
/* ===== GALERIA DE FOTOS RDS ===== */
.galeria-fotos-section {
position: relative;
padding: 6rem 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
overflow: hidden;
}
/* Títulos da Galeria */
.galeria-titulo {
font-size: 2.5rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.galeria-titulo::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(135deg, #1a3246, #1a3246);
margin: 1rem auto 0;
border-radius: 2px;
}
.galeria-subtitulo {
font-size: 1.125rem;
color: #6c757d;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.galeria-subtitulo strong {
color: #1a3246;
}
/* Grid da Galeria */
.galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
/* Cards da Galeria */
.galeria-card {
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.galeria-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Tamanhos dos Cards */
.galeria-card-small {
grid-row: span 1;
min-height: 280px;
}
.galeria-card-medium {
grid-row: span 1;
min-height: 350px;
}
.galeria-card-large {
grid-row: span 2;
min-height: 400px;
}
.galeria-card-wide {
grid-column: span 2;
min-height: 300px;
}
/* Container da Imagem */
.galeria-image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.galeria-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.6s ease;
}
.galeria-card:hover .galeria-image {
transform: scale(1.1);
}
/* Overlay */
.galeria-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
rgba(0, 102, 204, 0.1) 0%,
rgba(0, 68, 153, 0.3) 50%,
rgba(44, 62, 80, 0.7) 100%
);
opacity: 0;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
}
.galeria-card:hover .galeria-overlay {
opacity: 1;
}
/* Play Button */
.galeria-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.galeria-play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
background: white;
}
.galeria-play-btn i {
font-size: 1.5rem;
color: #1a3246;
margin-left: 3px;
}
/* Badge de Preço */
.galeria-price-badge {
position: absolute;
top: 15px;
left: 15px;
background: rgba(0, 102, 204, 0.95);
backdrop-filter: blur(10px);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 700;
font-size: 0.875rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Informações */
.galeria-info {
color: white;
text-align: left;
}
.galeria-item-titulo {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.galeria-item-descricao {
font-size: 0.9rem;
margin-bottom: 1rem;
opacity: 0.9;
line-height: 1.4;
}
.galeria-capacidade {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
}
.galeria-capacidade i {
color: #ffd700;
}
/* Botão de Ação */
.galeria-action {
text-align: center;
}
.btn-galeria-view {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
color: #1a3246;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-galeria-view:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Indicador de Tipo */
.galeria-type-indicator {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
/* Botão Ver Mais */
.galeria-load-more {
margin-top: 3rem;
}
.btn-load-more {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
.btn-load-more:hover {
background: linear-gradient(135deg, #0052a3, #003876);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.4);
}
/* Fallback */
.galeria-fallback {
grid-column: 1 / -1;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
text-align: center;
}
.galeria-fallback .fallback-content {
max-width: 400px;
padding: 3rem 2rem;
}
.galeria-fallback .fallback-icon {
font-size: 4rem;
color: #1a3246;
margin-bottom: 2rem;
}
.galeria-fallback h3 {
font-size: 1.75rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.galeria-fallback p {
font-size: 1rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 2rem;
}
.fallback-social {
display: flex;
gap: 1rem;
justify-content: center;
}
.btn-social {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.btn-social:hover {
background: linear-gradient(135deg, #0052a3, #003876);
transform: translateY(-2px);
color: white;
text-decoration: none;
}
/* Modal da Galeria */
.galeria-modal-content {
background: #1a1a1a;
border: none;
border-radius: 15px;
overflow: hidden;
}
.galeria-modal-header {
background: linear-gradient(135deg, #1a3246, #1a3246);
border-bottom: none;
padding: 1rem 1.5rem;
}
.galeria-modal-header .modal-title {
color: white;
font-weight: 700;
font-size: 1.25rem;
}
.galeria-modal-body {
padding: 0;
position: relative;
}
.galeria-modal-image {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
display: block;
}
.galeria-modal-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 1rem;
}
.btn-modal-nav {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
border: none;
border-radius: 50%;
color: white;
font-size: 1.125rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-modal-nav:hover {
background: rgba(0, 102, 204, 0.8);
transform: scale(1.1);
}
.galeria-modal-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 2rem 1.5rem 1rem;
}
.galeria-modal-footer {
background: #1a1a1a;
border-top: 1px solid #333;
padding: 1rem 1.5rem;
}
.btn-modal-whatsapp {
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
text-decoration: none;
padding: 0.75rem 2rem;
border-radius: 25px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
width: 100%;
justify-content: center;
}
.btn-modal-whatsapp:hover {
background: linear-gradient(135deg, #20c659, #0e6b5c);
transform: translateY(-2px);
color: white;
text-decoration: none;
}
/* Elementos Decorativos */
.galeria-decorativo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.elemento-foto-1,
.elemento-foto-2,
.elemento-foto-3 {
position: absolute;
opacity: 0.05;
}
.elemento-foto-1 {
width: 150px;
height: 150px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: 10%;
right: 5%;
animation: float1 8s ease-in-out infinite;
}
.elemento-foto-2 {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 50%;
bottom: 20%;
left: 8%;
animation: float2 10s ease-in-out infinite;
}
.elemento-foto-3 {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ffd700, #ff8c00);
border-radius: 20% 80% 80% 20% / 80% 20% 20% 80%;
top: 60%;
right: 10%;
animation: float3 12s ease-in-out infinite;
}
/* ===== RESPONSIVIDADE - GALERIA DE FOTOS ===== */
/* Desktop Large */
@media (min-width: 1200px) {
.galeria-grid {
grid-template-columns: repeat(4, 1fr);
}
.galeria-card-wide {
grid-column: span 2;
}
}
/* Desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
.galeria-grid {
grid-template-columns: repeat(3, 1fr);
}
.galeria-card-wide {
grid-column: span 2;
}
}
/* Tablet */
@media (max-width: 991.98px) {
.galeria-fotos-section {
padding: 4rem 0;
}
.galeria-titulo {
font-size: 2.25rem;
}
.galeria-subtitulo {
font-size: 1rem;
}
.galeria-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.galeria-card-wide {
grid-column: span 2;
}
.galeria-card-large {
grid-row: span 1;
min-height: 300px;
}
.galeria-overlay {
padding: 1rem;
}
.galeria-item-titulo {
font-size: 1.125rem;
}
.galeria-item-descricao {
font-size: 0.875rem;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.galeria-fotos-section {
padding: 3rem 0;
}
.galeria-titulo {
font-size: 2rem;
}
.galeria-subtitulo {
font-size: 0.95rem;
}
.galeria-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.galeria-card-wide,
.galeria-card-large,
.galeria-card-medium,
.galeria-card-small {
grid-column: span 1;
grid-row: span 1;
min-height: 280px;
}
.galeria-play-btn {
width: 60px;
height: 60px;
}
.galeria-play-btn i {
font-size: 1.25rem;
}
.galeria-price-badge {
font-size: 0.8125rem;
padding: 0.375rem 0.75rem;
}
.galeria-overlay {
padding: 1.25rem;
}
.galeria-item-titulo {
font-size: 1rem;
}
.galeria-item-descricao {
font-size: 0.8125rem;
}
.btn-galeria-view {
padding: 0.625rem 1.25rem;
font-size: 0.8125rem;
}
.fallback-social {
flex-direction: column;
align-items: center;
}
.btn-social {
padding: 0.625rem 1.25rem;
font-size: 0.8125rem;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.galeria-fotos-section {
padding: 2.5rem 0;
}
.galeria-titulo {
font-size: 1.75rem;
}
.galeria-grid {
gap: 1rem;
}
.galeria-card {
min-height: 250px;
}
.galeria-play-btn {
width: 50px;
height: 50px;
}
.galeria-play-btn i {
font-size: 1rem;
}
.galeria-overlay {
padding: 1rem;
}
.galeria-item-titulo {
font-size: 0.95rem;
}
.galeria-item-descricao {
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.btn-load-more {
padding: 0.875rem 2rem;
font-size: 0.9rem;
}
.elemento-foto-1 {
width: 100px;
height: 100px;
}
.elemento-foto-2 {
width: 80px;
height: 80px;
}
.elemento-foto-3 {
width: 60px;
height: 60px;
}
}
/* Otimizações para Performance */
@media (prefers-reduced-motion: reduce) {
.galeria-card,
.galeria-image,
.galeria-overlay,
.btn-galeria-view,
.elemento-foto-1,
.elemento-foto-2,
.elemento-foto-3 {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.galeria-titulo {
color: #000000;
}
.galeria-card {
border: 2px solid #000000;
}
.galeria-price-badge {
background: #0052a3;
border: 2px solid #ffffff;
}
.btn-galeria-view {
background: #ffffff;
color: #0052a3;
border: 2px solid #0052a3;
}
.btn-load-more {
background: #0052a3;
border: 2px solid #ffffff;
}
}
/* ===== FOOTER RDS ===== */
.elemento-contato-1 {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: 5%;
right: 3%;
animation: float1 12s ease-in-out infinite;
}
.elemento-contato-2 {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 50%;
bottom: 15%;
left: 5%;
animation: float2 15s ease-in-out infinite;
}
.elemento-contato-3 {
width: 150px;
height: 150px;
background: linear-gradient(135deg, #ffd700, #ff8c00);
border-radius: 20% 80% 80% 20% / 80% 20% 20% 80%;
top: 40%;
right: 8%;
animation: float3 18s ease-in-out infinite;
}
.elemento-contato-4 {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f59e0b, #c0392b);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
bottom: 30%;
right: 20%;
animation: float1 20s ease-in-out infinite reverse;
}
/* ===== FOOTER RDS TRANSPORTES ===== */
.footer-rds {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 50%, #002b66 100%);
position: relative;
overflow: hidden;
color: #fff;
margin-top: 60px;
}
/* Efeito de Ondas no Fundo */
.footer-rds::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center top;
background-size: cover;
z-index: 1;
}
.footer-content {
position: relative;
z-index: 2;
padding: 80px 0 40px;
}
/* Seções do Footer */
.footer-section {
margin-bottom: 40px;
}
.footer-section h3 {
color: #fff;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #f59e0b, #128c7e);
border-radius: 2px;
}
/* Links do Footer */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
transition: all 0.3s ease;
}
.footer-links li:hover {
transform: translateX(8px);
}
.footer-links a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
display: flex;
align-items: center;
transition: all 0.3s ease;
position: relative;
}
.footer-links a:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-links a::before {
content: '▶';
font-size: 0.7rem;
margin-right: 10px;
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-links a:hover::before {
opacity: 1;
transform: translateX(3px);
}
/* Informações de Contato */
.contact-info-footer {
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #128c7e);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.2rem;
color: #fff;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 5px 0;
color: #fff;
}
.contact-details p {
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
}
.contact-details a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-details a:hover {
color: #fff;
text-decoration: underline;
}
/* Botão Consultor */
.btn-consultor-footer {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-consultor-footer::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-consultor-footer:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
color: #fff;
text-decoration: none;
}
.btn-consultor-footer:hover::before {
left: 100%;
}
.btn-consultor-footer i {
font-size: 1.2rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Redes Sociais */
.social-media-footer {
margin-top: 20px;
}
.social-links-footer {
display: flex;
gap: 15px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
text-decoration: none;
font-size: 1.3rem;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.social-link:hover::before {
width: 100%;
height: 100%;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.social-link.instagram:hover {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border-color: #bc1888;
}
/* Rodapé Inferior */
.footer-bottom {
background: rgba(0, 0, 0, 0.2);
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 40px;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.copyright {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
.developed-by {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.developed-by strong {
color: #f59e0b;
font-weight: 600;
}
/* Ícones Flutuantes Fixos */
.floating-contact-icons {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 15px;
}
.floating-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.floating-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.floating-icon:hover::before {
width: 100%;
height: 100%;
}
.floating-icon:hover {
transform: scale(1.1);
color: #fff;
text-decoration: none;
}
.floating-icon.location {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}
.floating-icon.phone {
background: linear-gradient(135deg, #4ecdc4, #44a08d);
}
.floating-icon.whatsapp {
background: linear-gradient(135deg, #f59e0b, #128c7e);
animation: whatsappBounce 2s infinite;
}
@keyframes whatsappBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.floating-icon.email {
background: linear-gradient(135deg, #667eea, #764ba2);
}
/* Efeitos Decorativos */
.footer-decorative {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.wave-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom;
background-size: cover;
opacity: 0.3;
}
.floating-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: floatingParticle 20s infinite linear;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; }
.particle:nth-child(9) { left: 90%; animation-delay: 16s; }
@keyframes floatingParticle {
0% {
transform: translateY(100vh) rotateX(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-10vh) rotateX(360deg);
opacity: 0;
}
}
/* ===== RESPONSIVIDADE DO FOOTER ===== */
@media (max-width: 1199.98px) {
.floating-contact-icons {
right: 15px;
}
.floating-icon {
width: 55px;
height: 55px;
font-size: 1.3rem;
}
}
@media (max-width: 991.98px) {
.footer-content {
padding: 60px 0 30px;
}
.footer-section {
margin-bottom: 35px;
}
.contact-item {
padding: 12px;
}
.contact-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.btn-consultor-footer {
padding: 12px 25px;
font-size: 0.9rem;
}
.floating-contact-icons {
right: 10px;
gap: 12px;
}
.floating-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
@media (max-width: 767.98px) {
.footer-rds::before {
height: 60px;
}
.footer-content {
padding: 50px 0 25px;
}
.footer-section {
margin-bottom: 30px;
text-align: center;
}
.footer-section h3 {
font-size: 1.1rem;
margin-bottom: 20px;
}
.footer-section h3::after {
left: 50%;
transform: translateX(-50%);
}
.footer-links li:hover {
transform: none;
}
.contact-item {
flex-direction: column;
text-align: center;
padding: 20px 15px;
}
.contact-icon {
margin-right: 0;
margin-bottom: 10px;
}
.social-links-footer {
justify-content: center;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.floating-contact-icons {
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
transform: none;
flex-direction: row;
gap: 10px;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 30px;
backdrop-filter: blur(10px);
}
.floating-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
@media (max-width: 575.98px) {
.footer-content {
padding: 40px 0 20px;
}
.footer-section h3 {
font-size: 1rem;
margin-bottom: 15px;
}
.footer-links a {
font-size: 0.9rem;
}
.contact-item {
padding: 15px 10px;
}
.contact-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.contact-details h4 {
font-size: 0.9rem;
}
.contact-details p {
font-size: 0.85rem;
}
.btn-consultor-footer {
padding: 10px 20px;
font-size: 0.85rem;
width: 100%;
justify-content: center;
}
.social-link {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
.floating-contact-icons {
bottom: 15px;
right: 15px;
gap: 8px;
padding: 8px;
}
.floating-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
/* Ocultar partículas em telas muito pequenas */
.floating-particles {
display: none;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.footer-rds *,
.floating-contact-icons *,
.floating-particles * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.particle {
display: none;
}
}
@media (prefers-contrast: high) {
.footer-rds {
background: #000 !important;
}
.footer-section h3,
.contact-details h4,
.footer-links a {
color: #fff !important;
}
.contact-item {
background: rgba(255, 255, 255, 0.2) !important;
border-color: #fff !important;
}
.btn-consultor-footer {
background: #fff !important;
color: #000 !important;
}
.social-link {
background: #fff !important;
color: #000 !important;
border-color: #fff !important;
}
}
/* ===== ESTILOS PÁGINA QUEM SOMOS - RDS TRANSPORTES ===== */
/* Hero Section - Quem Somos */
.quem-somos-hero {
position: relative;
padding: 120px 0 100px;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-quem-somos {
position: relative;
z-index: 3;
}
.badge-institucional {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.15));
color: #1a3246;
padding: 12px 20px;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
border: 2px solid rgba(0, 102, 204, 0.2);
margin-bottom: 2rem;
animation: badgeFloat 3s ease-in-out infinite;
}
.badge-institucional i {
font-size: 1rem;
}
@keyframes badgeFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.titulo-quem-somos {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.texto-destaque {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.titulo-quem-somos::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
@keyframes lineGrow {
from { width: 0; }
to { width: 80px; }
}
.subtitulo-quem-somos {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-quem-somos strong {
color: #1a3246;
font-weight: 700;
}
/* Diferenciais Rápidos */
.diferenciais-rapidos {
margin-bottom: 3rem;
}
.diferencial-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.diferencial-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.diferencial-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.diferencial-texto {
display: flex;
flex-direction: column;
}
.diferencial-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.diferencial-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions */
.hero-actions-quem-somos {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.btn-hero-whatsapp {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-hero-whatsapp::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-hero-whatsapp:hover::before {
left: 100%;
}
.btn-hero-whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
.btn-hero-whatsapp i {
font-size: 1.2rem;
animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.btn-hero-saiba-mais {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: #1a3246;
padding: 16px 32px;
border: 2px solid #1a3246;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-hero-saiba-mais:hover {
background: #1a3246;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
text-decoration: none;
}
.btn-hero-saiba-mais i {
transition: transform 0.3s ease;
}
.btn-hero-saiba-mais:hover i {
transform: translateY(3px);
}
/* Hero Imagem */
.hero-imagem-wrapper {
position: relative;
z-index: 2;
}
.hero-imagem-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.hero-imagem {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform 0.5s ease;
}
.hero-imagem-container:hover .hero-imagem {
transform: scale(1.05);
}
/* Badge Experiência Flutuante */
.badge-experiencia-flutuante {
position: absolute;
top: 30px;
right: 30px;
z-index: 5;
animation: floatBadge 4s ease-in-out infinite;
}
.badge-conteudo-experiencia {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
padding: 20px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.badge-conteudo-experiencia i {
font-size: 1.5rem;
color: #1a3246;
}
.badge-info-experiencia strong {
display: block;
font-size: 1.2rem;
color: #1a1a1a;
font-weight: 800;
}
.badge-info-experiencia span {
font-size: 0.9rem;
color: #666;
}
@keyframes floatBadge {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-10px) rotate(1deg); }
75% { transform: translateY(-5px) rotate(-1deg); }
}
/* Elementos Decorativos Hero */
.elementos-decorativos-hero {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.elemento-hero-1,
.elemento-hero-2,
.elemento-hero-3 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.05));
}
.elemento-hero-1 {
width: 80px;
height: 80px;
top: 10%;
left: -20px;
animation: floatElement1 6s ease-in-out infinite;
}
.elemento-hero-2 {
width: 120px;
height: 120px;
bottom: 20%;
right: -30px;
animation: floatElement2 8s ease-in-out infinite reverse;
}
.elemento-hero-3 {
width: 60px;
height: 60px;
top: 60%;
left: -10px;
animation: floatElement3 7s ease-in-out infinite;
}
@keyframes floatElement1 {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(-20px) translateX(10px); }
}
@keyframes floatElement2 {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(15px) translateX(-15px); }
}
@keyframes floatElement3 {
0%, 100% { transform: translateY(0px) translateX(0px); }
50% { transform: translateY(-10px) translateX(20px); }
}
/* Background Decorativo Hero */
.hero-background-decorativo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.forma-bg-1,
.forma-bg-2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 68, 153, 0.02));
}
.forma-bg-1 {
width: 300px;
height: 300px;
top: -50px;
right: -100px;
animation: rotateShape 20s linear infinite;
}
.forma-bg-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation: rotateShape 15s linear infinite reverse;
}
@keyframes rotateShape {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Partículas Flutuantes */
.particulas-flutuantes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particula {
position: absolute;
width: 4px;
height: 4px;
background: rgba(0, 102, 204, 0.3);
border-radius: 50%;
animation: floatParticle 10s ease-in-out infinite;
}
.particula:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.particula:nth-child(2) { left: 80%; top: 30%; animation-delay: 2s; }
.particula:nth-child(3) { left: 30%; top: 70%; animation-delay: 4s; }
.particula:nth-child(4) { left: 70%; top: 10%; animation-delay: 6s; }
.particula:nth-child(5) { left: 50%; top: 80%; animation-delay: 8s; }
@keyframes floatParticle {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-20px) translateX(10px) scale(1.2);
opacity: 0.6;
}
50% {
transform: translateY(-10px) translateX(-15px) scale(0.8);
opacity: 0.4;
}
75% {
transform: translateY(-30px) translateX(20px) scale(1.1);
opacity: 0.5;
}
}
/* ===== SEÇÃO NOSSA HISTÓRIA ===== */
.nossa-historia-section {
padding: 100px 0;
background: #ffffff;
position: relative;
}
.timeline-historia {
position: relative;
padding-left: 30px;
}
.timeline-historia::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, #1a3246, #1a3246);
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
padding-left: 50px;
}
.timeline-marker {
position: absolute;
left: -22px;
top: 0;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
z-index: 2;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.timeline-content {
background: #f8faff;
padding: 25px;
border-radius: 15px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.1);
}
.timeline-content h4 {
color: #1a3246;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.timeline-content p {
color: #666;
line-height: 1.6;
margin: 0;
}
/* História Conteúdo */
.historia-conteudo {
padding-left: 30px;
}
.historia-texto {
margin-bottom: 3rem;
}
.historia-texto .texto-principal {
font-size: 1.2rem;
line-height: 1.7;
color: #333;
margin-bottom: 1.5rem;
}
.historia-texto p {
line-height: 1.6;
color: #666;
margin-bottom: 1.5rem;
}
.historia-texto strong {
color: #1a3246;
font-weight: 700;
}
/* Estatísticas História */
.estatisticas-historia {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.stat-item-historia {
text-align: center;
flex: 1;
min-width: 150px;
}
.stat-numero {
font-size: 3rem;
font-weight: 800;
color: #1a3246;
display: block;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 8px;
}
/* ===== MISSÃO, VISÃO E VALORES ===== */
.missao-visao-valores-section {
padding: 100px 0;
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #f8faff 100%);
position: relative;
overflow: hidden;
}
.mvv-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 40px 30px;
height: 100%;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.mvv-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 102, 204, 0.15);
background: rgba(255, 255, 255, 0.95);
}
.mvv-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.mvv-card:hover .mvv-icon {
transform: scale(1.1) rotate(5deg);
}
.mvv-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.mvv-content p {
color: #666;
line-height: 1.6;
margin: 0;
}
/* Valores Lista */
.valores-lista {
margin-top: 20px;
}
.valor-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
padding: 12px;
background: rgba(0, 102, 204, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
}
.valor-item:hover {
background: rgba(0, 102, 204, 0.1);
transform: translateX(10px);
}
.valor-item i {
color: #1a3246;
font-size: 1.1rem;
flex-shrink: 0;
}
.valor-item span {
color: #333;
font-weight: 600;
font-size: 0.95rem;
}
/* MVV Background Decorativo */
.mvv-background-decorativo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.mvv-forma-1,
.mvv-forma-2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.03), rgba(0, 68, 153, 0.01));
}
.mvv-forma-1 {
width: 400px;
height: 400px;
top: -100px;
right: -150px;
animation: rotateShapeMVV 25s linear infinite;
}
.mvv-forma-2 {
width: 300px;
height: 300px;
bottom: -100px;
left: -100px;
animation: rotateShapeMVV 20s linear infinite reverse;
}
@keyframes rotateShapeMVV {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== DIFERENCIAIS SECTION ===== */
.diferenciais-section {
padding: 100px 0;
background: #ffffff;
}
.diferencial-card {
text-align: center;
padding: 40px 25px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
height: 100%;
border: 1px solid rgba(0, 102, 204, 0.1);
position: relative;
overflow: hidden;
}
.diferencial-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 50px rgba(0, 102, 204, 0.15);
border-color: #1a3246;
}
.diferencial-icon-container {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5rem;
margin: 0 auto 25px;
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.diferencial-card:hover .diferencial-icon-container {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
}
.diferencial-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.diferencial-card p {
color: #666;
line-height: 1.6;
margin: 0;
position: relative;
z-index: 2;
}
/* ===== CTA QUEM SOMOS ===== */
.cta-quem-somos-section {
padding: 100px 0;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
position: relative;
overflow: hidden;
}
.cta-content-quem-somos {
position: relative;
z-index: 3;
}
.cta-titulo {
font-size: 2.8rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-titulo .titulo-destaque {
color: #f59e0b;
}
.cta-subtitulo {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-principal {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-cta-principal:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.5);
color: white;
text-decoration: none;
}
.btn-cta-secundario {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: white;
padding: 18px 40px;
border: 2px solid white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.btn-cta-secundario:hover {
background: white;
color: #1a3246;
transform: translateY(-3px);
text-decoration: none;
}
.cta-background-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
radial-gradient(circle at 70% 80%, rgba(37, 211, 102, 0.1) 0%, transparent 70%);
pointer-events: none;
}
/* ===== RESPONSIVIDADE QUEM SOMOS ===== */
@media (max-width: 1199.98px) {
.titulo-quem-somos {
font-size: 3rem;
}
.hero-imagem {
height: 450px;
}
.estatisticas-historia {
gap: 1.5rem;
}
}
@media (max-width: 991.98px) {
.quem-somos-hero {
padding: 100px 0 80px;
min-height: auto;
}
.titulo-quem-somos {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.subtitulo-quem-somos {
font-size: 1.1rem;
margin-bottom: 2.5rem;
}
.diferencial-item {
margin-bottom: 1rem;
padding: 12px;
}
.hero-actions-quem-somos {
gap: 15px;
justify-content: center;
text-align: center;
}
.hero-imagem {
height: 400px;
}
.badge-experiencia-flutuante {
top: 20px;
right: 20px;
}
.badge-conteudo-experiencia {
padding: 15px;
}
.timeline-historia {
padding-left: 25px;
}
.timeline-item {
padding-left: 40px;
margin-bottom: 2.5rem;
}
.historia-conteudo {
padding-left: 0;
margin-top: 3rem;
}
.estatisticas-historia {
justify-content: center;
gap: 2rem;
}
.stat-numero {
font-size: 2.5rem;
}
.mvv-card {
padding: 35px 25px;
margin-bottom: 2rem;
}
.diferencial-card {
padding: 35px 20px;
margin-bottom: 2rem;
}
.cta-titulo {
font-size: 2.3rem;
}
.cta-subtitulo {
font-size: 1.1rem;
}
}
@media (max-width: 767.98px) {
.quem-somos-hero {
padding: 80px 0 60px;
}
.titulo-quem-somos {
font-size: 2rem;
text-align: center;
}
.titulo-quem-somos::after {
left: 50%;
transform: translateX(-50%);
}
.subtitulo-quem-somos {
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
}
.badge-institucional {
margin: 0 auto 1.5rem;
}
.diferenciais-rapidos {
margin-bottom: 2rem;
}
.diferencial-item {
text-align: center;
flex-direction: column;
padding: 20px;
}
.diferencial-icon {
margin-bottom: 10px;
}
.hero-actions-quem-somos {
justify-content: center;
flex-direction: column;
align-items: center;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
width: 100%;
max-width: 280px;
justify-content: center;
}
.hero-imagem {
height: 350px;
margin-bottom: 2rem;
}
.badge-experiencia-flutuante {
position: relative;
top: auto;
right: auto;
margin: 2rem auto 0;
display: flex;
justify-content: center;
}
.badge-conteudo-experiencia {
flex-direction: column;
text-align: center;
gap: 10px;
}
.timeline-historia {
padding-left: 20px;
}
.timeline-item {
padding-left: 35px;
}
.timeline-marker {
width: 35px;
height: 35px;
left: -17px;
font-size: 0.9rem;
}
.timeline-content {
padding: 20px;
}
.estatisticas-historia {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
.stat-item-historia {
min-width: auto;
}
.nossa-historia-section,
.missao-visao-valores-section,
.diferenciais-section,
.cta-quem-somos-section {
padding: 80px 0;
}
.mvv-card {
padding: 30px 20px;
}
.mvv-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.diferencial-card {
padding: 30px 20px;
}
.diferencial-icon-container {
width: 80px;
height: 80px;
font-size: 2rem;
}
.cta-titulo {
font-size: 2rem;
}
.cta-subtitulo {
font-size: 1rem;
margin-bottom: 30px;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.btn-cta-principal,
.btn-cta-secundario {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 575.98px) {
.quem-somos-hero {
padding: 60px 0 40px;
}
.titulo-quem-somos {
font-size: 1.8rem;
}
.badge-institucional {
padding: 10px 16px;
font-size: 0.8rem;
}
.diferencial-item {
padding: 15px;
}
.diferencial-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.diferencial-texto strong {
font-size: 1rem;
}
.hero-imagem {
height: 300px;
}
.timeline-content {
padding: 15px;
}
.timeline-content h4 {
font-size: 1.1rem;
}
.stat-numero {
font-size: 2rem;
}
.mvv-card {
padding: 25px 15px;
}
.mvv-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.diferencial-card {
padding: 25px 15px;
}
.diferencial-icon-container {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.cta-titulo {
font-size: 1.7rem;
}
.btn-cta-principal,
.btn-cta-secundario {
padding: 15px 30px;
font-size: 1rem;
}
}
/* ===== SEÇÕES COMUNS ===== */
.titulo-secao {
font-size: 2.8rem;
font-weight: 800;
line-height: 1.2;
color: #1a1a1a;
margin-bottom: 1rem;
text-align: center;
}
.titulo-secao .titulo-destaque {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitulo-secao {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.secao-badge {
display: inline-block;
margin-bottom: 1.5rem;
}
.badge-text {
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.15));
color: #1a3246;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgba(0, 102, 204, 0.2);
}
/* ===== ANIMAÇÕES AOS ===== */
[data-aos] {
pointer-events: none;
}
[data-aos].aos-animate {
pointer-events: auto;
}
/* ===== MODO DE CONTRASTE ALTO ===== */
@media (prefers-contrast: high) {
.titulo-quem-somos,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
color: #1a3246 !important;
-webkit-text-fill-color: #1a3246 !important;
}
.diferencial-card,
.mvv-card {
border: 2px solid #1a3246 !important;
}
.btn-hero-whatsapp,
.btn-cta-principal {
background: #f59e0b !important;
}
.btn-hero-saiba-mais,
.btn-cta-secundario {
border-color: #1a3246 !important;
color: #1a3246 !important;
}
}
/* ===== MODO DE MOVIMENTO REDUZIDO ===== */
@media (prefers-reduced-motion: reduce) {
.quem-somos-hero *,
.nossa-historia-section *,
.missao-visao-valores-section *,
.diferenciais-section *,
.cta-quem-somos-section * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.diferencial-item:hover,
.mvv-card:hover,
.diferencial-card:hover {
transform: none !important;
}
}
/* ===== HERO BANNER RDS - IMAGEM RESPONSIVA FULL WIDTH ===== */
.rds-hero-banner {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-container {
position: relative;
width: 100%;
height: 100%;
}
.hero-picture {
display: block;
width: 100%;
height: 100%;
}
.hero-image-main {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.3s ease;
}
/* Efeito hover sutil */
.rds-hero-banner:hover .hero-image-main {
transform: scale(1.02);
}
/* Overlay sutil para melhorar contraste */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 102, 204, 0.1) 0%,
rgba(0, 68, 153, 0.05) 50%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
/* Container para conteúdo sobreposto */
.hero-content-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.hero-text-content {
text-align: center;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Otimizações para dispositivos móveis */
@media (max-width: 991.98px) {
.rds-hero-banner {
height: 300px;
}
.rds-hero-banner:hover .hero-image-main {
transform: none; /* Remove hover em dispositivos touch */
}
}
@media (max-width: 767.98px) {
.rds-hero-banner {
height: 280px;
}
}
@media (max-width: 575.98px) {
.rds-hero-banner {
height: 250px;
}
}
/* Otimizações para telas grandes */
@media (min-width: 1400px) {
.rds-hero-banner {
height: 400px;
}
}
/* Suporte para preferências de acessibilidade */
@media (prefers-reduced-motion: reduce) {
.hero-image-main {
transition: none !important;
}
.rds-hero-banner:hover .hero-image-main {
transform: none !important;
}
}
@media (prefers-contrast: high) {
.hero-overlay {
background: rgba(0, 0, 0, 0.3) !important;
}
}
/* Fallback para navegadores que não suportam object-fit */
@supports not (object-fit: cover) {
.hero-image-main {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
}
/* Loading state para melhorar percepção de performance */
.hero-image-main[loading="eager"] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Remove shimmer quando imagem carrega */
.hero-image-main[data-loaded="true"] {
animation: none;
background: none;
}
/* ===== PÁGINA BLOG RDS - SEGUINDO PADRÃO FRONTEND ===== */
.blog-page-rds {
background: #fafafa;
}
/* Hero Section Blog - Seguindo Padrão */
.blog-hero {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-blog {
position: relative;
z-index: 3;
}
.titulo-blog {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.titulo-blog::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
.subtitulo-blog {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-blog strong {
color: #1a3246;
font-weight: 700;
}
/* Estatísticas Rápidas - Padrão Blog */
.stats-rapidas {
margin-bottom: 3rem;
}
.stat-item-blog {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.stat-item-blog:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.stat-texto {
display: flex;
flex-direction: column;
}
.stat-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.stat-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions Blog */
.hero-actions-blog {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Seção Artigos - Seguindo Padrão */
.artigos-section {
padding: 100px 0;
background: #fafafa;
}
.blog-stats {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-number {
font-size: 2rem;
font-weight: 800;
color: #1a3246;
line-height: 1;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.9rem;
color: #666;
text-align: center;
}
.stat-divider {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, #ddd, transparent);
}
.blog-hero-visual {
text-align: center;
}
.blog-hero-img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0, 102, 204, 0.1));
}
/* Seção de Busca */
.blog-search-section {
padding: 60px 0;
background: #fff;
}
.blog-search-wrapper {
text-align: center;
}
.search-input-group {
position: relative;
max-width: 600px;
margin: 0 auto 2rem;
}
.search-input {
width: 100%;
padding: 18px 60px 18px 24px;
border: 2px solid #e1e5e9;
border-radius: 50px;
font-size: 1rem;
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: #1a3246;
box-shadow: 0 4px 20px rgba(0, 102, 204, 0.15);
}
.search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border: none;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.search-btn:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}
.popular-tags {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.tags-label {
color: #666;
font-size: 0.9rem;
font-weight: 600;
}
.tags-list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tag-item {
padding: 6px 16px;
background: rgba(0, 102, 204, 0.1);
color: #1a3246;
border-radius: 20px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
}
.tag-item:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* Conteúdo do Blog */
.blog-content-section {
padding: 80px 0;
background: #fafafa;
}
.blog-posts-grid {
margin-bottom: 3rem;
}
/* Post Destaque */
.featured-post {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 3rem;
transition: all 0.3s ease;
}
.featured-post:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.post-image-wrapper {
position: relative;
overflow: hidden;
}
.featured-post .post-image {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-post:hover .post-image {
transform: scale(1.05);
}
.post-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), transparent);
}
.featured-badge {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #ffd700, #ffb700);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.post-content {
padding: 2rem;
}
.post-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.post-category {
background: #1a3246;
color: white;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.post-date,
.post-read-time {
color: #666;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 6px;
}
.post-title {
margin-bottom: 1rem;
}
.featured-post .post-title {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;
}
.post-link {
color: #1a1a1a;
text-decoration: none;
transition: color 0.3s ease;
}
.post-link:hover {
color: #1a3246;
text-decoration: none;
}
.post-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.post-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.post-author {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar {
border-radius: 50%;
border: 3px solid #f0f0f0;
}
.author-info {
display: flex;
flex-direction: column;
}
.author-name {
font-weight: 600;
color: #1a1a1a;
font-size: 0.9rem;
}
.author-title {
color: #666;
font-size: 0.8rem;
}
.post-engagement {
display: flex;
gap: 1rem;
}
.engagement-item {
display: flex;
align-items: center;
gap: 4px;
color: #666;
font-size: 0.875rem;
}
/* Posts Regulares */
.regular-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.regular-post {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.regular-post:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}
.regular-post .post-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.regular-post:hover .post-image {
transform: scale(1.05);
}
.regular-post .post-content {
padding: 1.5rem;
}
.regular-post .post-title {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.8rem;
}
.regular-post .post-excerpt {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.post-footer-simple {
display: flex;
align-items: center;
justify-content: space-between;
}
.post-author-simple {
display: flex;
align-items: center;
gap: 8px;
}
.author-avatar-small {
border-radius: 50%;
border: 2px solid #f0f0f0;
}
.read-time {
color: #666;
font-size: 0.8rem;
font-weight: 500;
}
/* Paginação */
.blog-pagination {
margin-top: 3rem;
text-align: center;
}
.pagination-list {
display: inline-flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.pagination-link {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #fff;
color: #666;
text-decoration: none;
border-radius: 10px;
border: 1px solid #e1e5e9;
transition: all 0.3s ease;
font-weight: 500;
}
.pagination-link:hover,
.pagination-link.active {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.pagination-dots {
color: #666;
font-weight: 600;
}
/* Sidebar */
.blog-sidebar {
position: relative;
}
.sidebar-sticky {
position: sticky;
top: 100px;
}
.sidebar-widget {
background: #fff;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.widget-header {
margin-bottom: 1.5rem;
}
.widget-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.5rem;
}
.widget-title i {
color: #1a3246;
}
.widget-subtitle {
color: #666;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Newsletter Widget */
.newsletter-input {
width: 100%;
padding: 14px 18px;
border: 2px solid #e1e5e9;
border-radius: 10px;
font-size: 0.95rem;
margin-bottom: 1rem;
transition: border-color 0.3s ease;
}
.newsletter-input:focus {
outline: none;
border-color: #1a3246;
}
.btn-newsletter {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s ease;
margin-bottom: 1.5rem;
}
.btn-newsletter:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}
.newsletter-benefits {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: #666;
}
.benefit-item i {
color: #28a745;
font-size: 0.8rem;
}
/* Categorias Widget */
.categories-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.category-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 10px;
text-decoration: none;
color: #666;
transition: all 0.3s ease;
}
.category-item:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateX(5px);
}
.category-count {
background: rgba(0, 102, 204, 0.1);
color: #1a3246;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.category-item:hover .category-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* Posts Populares */
.popular-posts-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.popular-post-item {
display: flex;
gap: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.popular-post-item:hover {
background: #f0f7ff;
transform: translateX(5px);
}
.popular-post-image img {
border-radius: 8px;
object-fit: cover;
}
.popular-post-title {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.popular-post-link {
color: #1a1a1a;
text-decoration: none;
}
.popular-post-link:hover {
color: #1a3246;
text-decoration: none;
}
.popular-post-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.75rem;
color: #666;
}
/* Tags Cloud */
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-cloud-item {
padding: 6px 14px;
background: #f8f9fa;
color: #666;
border-radius: 15px;
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.3s ease;
}
.tag-cloud-item:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* CTA Widget */
.cta-widget {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-align: center;
}
.cta-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.cta-icon i {
font-size: 1.5rem;
color: white;
}
.cta-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.8rem;
color: white;
}
.cta-text {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
margin-bottom: 1.5rem;
}
.btn-cta-sidebar {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-cta-sidebar:hover {
background: white;
color: #1a3246;
text-decoration: none;
transform: translateY(-2px);
}
/* Responsividade Blog - Seguindo Padrão */
@media (max-width: 1199.98px) {
.titulo-blog {
font-size: 2.5rem;
}
.artigos-section {
padding: 80px 0;
}
}
@media (max-width: 991.98px) {
.blog-hero {
padding: 80px 0;
min-height: auto;
}
.titulo-blog {
font-size: 2.5rem;
}
.titulo-blog::after {
width: 60px;
}
.subtitulo-blog {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.stat-item-blog {
padding: 12px;
margin-bottom: 1rem;
}
.hero-actions-blog {
gap: 15px;
margin-top: 2rem;
}
.artigos-section {
padding: 60px 0;
}
.sidebar-sticky {
position: static;
}
.regular-posts-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.search-input-group {
margin-bottom: 1.5rem;
}
.popular-tags {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
}
@media (max-width: 767.98px) {
.blog-hero {
padding: 60px 0;
}
.titulo-blog {
font-size: 2rem;
}
.titulo-blog::after {
width: 50px;
height: 3px;
}
.subtitulo-blog {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.stats-rapidas {
margin-bottom: 2rem;
}
.stat-item-blog {
padding: 12px;
margin-bottom: 1rem;
}
.stat-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-blog {
flex-direction: column;
gap: 12px;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
padding: 14px 28px;
font-size: 0.9rem;
}
.artigos-section {
padding: 40px 0;
}
.regular-posts-grid {
grid-template-columns: 1fr;
}
.featured-post .post-image {
height: 250px;
}
.post-footer {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.sidebar-widget {
padding: 1.5rem;
}
.tags-list {
justify-content: flex-start;
}
}
@media (max-width: 575.98px) {
.blog-hero {
padding: 40px 0;
}
.titulo-blog {
font-size: 1.8rem;
}
.badge-institucional {
padding: 10px 16px;
font-size: 0.8rem;
margin-bottom: 1.5rem;
}
.stat-item-blog {
padding: 10px;
margin-bottom: 0.8rem;
}
.stat-texto strong {
font-size: 1rem;
}
.artigos-section {
padding: 30px 0;
}
.search-input {
padding: 16px 50px 16px 20px;
}
.search-btn {
width: 40px;
height: 40px;
}
.featured-post .post-image {
height: 200px;
}
.post-content {
padding: 1.5rem;
}
.featured-post .post-title {
font-size: 1.5rem;
}
.pagination-list {
flex-wrap: wrap;
gap: 0.3rem;
}
.pagination-link {
padding: 10px 12px;
font-size: 0.9rem;
}
}
/* Acessibilidade Blog - Seguindo Padrão */
@media (prefers-reduced-motion: reduce) {
.blog-hero *,
.artigos-section *,
.stat-item-blog,
.stat-item-blog:hover,
.hero-actions-blog *,
.blog-posts-grid * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.titulo-blog,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
background: #000 !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.badge-institucional,
.secao-badge {
border: 2px solid #000 !important;
color: #000 !important;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
border: 2px solid #000 !important;
}
}
/* ===== PÁGINA BLOG INTERNO RDS ===== */
/* Breadcrumb Navigation */
.breadcrumb-section {
background: #f8f9fa;
padding: 15px 0;
border-bottom: 1px solid rgba(0, 102, 204, 0.1);
}
.breadcrumb-nav {
margin: 0;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: #6c757d;
font-weight: 400;
}
.breadcrumb-link {
color: #1a3246;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.3s ease;
}
.breadcrumb-link:hover {
color: #1a3246;
text-decoration: none;
}
.breadcrumb-current {
color: #6c757d;
font-weight: 500;
}
.breadcrumb-item.active .breadcrumb-current {
color: #1a3246;
font-weight: 600;
}
/* Article Header */
.article-header-section {
padding: 40px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.article-header {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.article-meta-top {
margin-bottom: 25px;
}
.article-category {
display: inline-block;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 6px 16px;
border-radius: 25px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 15px;
}
.article-meta-info {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
color: #6c757d;
font-size: 14px;
}
.article-meta-info span {
display: flex;
align-items: center;
gap: 5px;
}
.article-meta-info i {
color: #1a3246;
}
.article-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin: 20px 0;
line-height: 1.2;
}
.article-subtitle {
font-size: 1.2rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 30px;
}
.article-author-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}
.author-info-main {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar-large {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #1a3246;
}
.author-details h3 {
margin: 0;
font-size: 1.1rem;
color: #2c3e50;
font-weight: 600;
}
.author-title {
margin: 5px 0;
color: #6c757d;
font-size: 14px;
}
.author-social {
display: flex;
gap: 8px;
}
.author-social-link {
width: 30px;
height: 30px;
border-radius: 50%;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
}
.author-social-link:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
}
.article-share-buttons {
display: flex;
align-items: center;
gap: 15px;
}
.share-label {
font-size: 14px;
color: #6c757d;
font-weight: 500;
}
.share-buttons-list {
display: flex;
gap: 8px;
}
.share-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
.share-facebook {
background: #1877f2;
color: white;
}
.share-twitter {
background: #1da1f2;
color: white;
}
.share-linkedin {
background: #0a66c2;
color: white;
}
.share-whatsapp {
background: #f59e0b;
color: white;
}
.share-copy {
background: #6c757d;
color: white;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Featured Image */
.article-featured-image {
padding: 20px 0;
background: #f8f9fa;
position: relative;
z-index: 1;
}
.featured-image-wrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.featured-image {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
.image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 20px;
font-size: 14px;
font-style: italic;
}
/* Article Content */
.article-content-section {
padding: 50px 0;
}
.article-content-wrapper {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
/* Table of Contents */
.table-of-contents {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-left: 4px solid #1a3246;
padding: 25px;
border-radius: 8px;
margin-bottom: 40px;
}
.toc-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.toc-link {
color: #1a3246;
text-decoration: none;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.3s ease;
display: block;
}
.toc-link:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateX(5px);
}
/* Article Main Content */
.article-main-content {
line-height: 1.8;
color: #2c3e50;
}
.content-section {
margin-bottom: 40px;
}
.content-section h2 {
font-size: 1.8rem;
font-weight: 600;
color: #2c3e50;
margin: 30px 0 20px 0;
position: relative;
padding-bottom: 10px;
}
.content-section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 2px;
}
.content-section h3 {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
margin: 25px 0 15px 0;
}
.lead-paragraph {
font-size: 1.2rem;
font-weight: 500;
color: #495057;
margin-bottom: 25px;
}
.content-section p {
margin-bottom: 20px;
text-align: justify;
}
.article-quote {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-left: 4px solid #1a3246;
padding: 25px;
margin: 30px 0;
border-radius: 8px;
font-style: italic;
position: relative;
}
.article-quote::before {
content: '"';
font-size: 4rem;
color: #1a3246;
position: absolute;
top: -10px;
left: 20px;
font-family: serif;
}
.article-quote p {
font-size: 1.1rem;
margin-bottom: 15px;
padding-left: 30px;
}
.article-quote cite {
font-weight: 600;
color: #1a3246;
font-style: normal;
}
/* Content Images */
.content-image {
margin: 30px 0;
text-align: center;
}
.content-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.content-image figcaption {
margin-top: 10px;
font-style: italic;
color: #6c757d;
font-size: 14px;
}
/* Highlight and Info Boxes */
.highlight-box, .info-box {
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.highlight-box {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
border-left: 4px solid #ffc107;
}
.info-box {
background: linear-gradient(135deg, #d1ecf1, #b8e6ff);
border-left: 4px solid #17a2b8;
}
.highlight-box h4, .info-box h4 {
margin-top: 0;
margin-bottom: 15px;
color: #2c3e50;
display: flex;
align-items: center;
gap: 8px;
}
.highlight-box ul, .info-box ul {
margin: 0;
padding-left: 20px;
}
.highlight-box li, .info-box li {
margin-bottom: 8px;
}
/* Tips Grid */
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 30px 0;
}
.tip-card {
background: white;
padding: 25px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.tip-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #1a3246;
}
.tip-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
color: white;
font-size: 24px;
}
.tip-card h4 {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.tip-card p {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Conclusion */
.conclusion-highlight {
background: linear-gradient(135deg, #e8f4f8, #d1ecf1);
padding: 25px;
border-radius: 8px;
border-left: 4px solid #1a3246;
font-size: 1.1rem;
margin: 30px 0;
}
/* Article Tags */
.article-tags {
padding: 25px 0;
border-top: 1px solid #dee2e6;
margin-top: 30px;
}
.tags-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.article-tag {
background: #f8f9fa;
color: #1a3246;
padding: 8px 16px;
border-radius: 25px;
text-decoration: none;
font-size: 14px;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.article-tag:hover {
background: #1a3246;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* Article Engagement */
.article-engagement {
padding: 30px 0;
margin: 40px 0;
position: relative;
}
.article-engagement::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
}
.engagement-actions {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.engagement-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border: none;
background: linear-gradient(135deg, #f8f9fa, #ffffff);
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
color: #495057;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
min-width: 120px;
justify-content: center;
}
.engagement-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
}
.engagement-btn:hover::before {
left: 100%;
}
.engagement-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.2);
}
/* Like Button */
.engagement-btn.like-btn {
background: linear-gradient(135deg, #fff5f5, #ffffff);
border: 2px solid #ffe0e0;
}
.engagement-btn.like-btn:hover {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
border-color: #ff5252;
}
.engagement-btn.like-btn.active {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
border: 2px solid #ff5252;
animation: heartBeat 0.6s ease;
}
.engagement-btn.like-btn.active i {
animation: heartPulse 1.5s infinite;
}
/* Bookmark Button */
.engagement-btn.bookmark-btn {
background: linear-gradient(135deg, #fff8e1, #ffffff);
border: 2px solid #ffe082;
}
.engagement-btn.bookmark-btn:hover {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: white;
border-color: #ff9800;
}
.engagement-btn.bookmark-btn.active {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: white;
border: 2px solid #ff9800;
}
/* Share Button */
.engagement-btn.share-btn {
background: linear-gradient(135deg, #e3f2fd, #ffffff);
border: 2px solid #bbdefb;
position: relative;
}
.engagement-btn.share-btn:hover {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border-color: #1a3246;
}
.engagement-btn.share-btn.active {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: 2px solid #1a3246;
}
.engagement-btn.share-btn:hover i {
animation: shareShake 0.6s ease;
}
.engagement-count {
font-weight: 700;
background: linear-gradient(45deg, #1a3246, #1a3246);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 16px;
}
.engagement-btn.active .engagement-count {
-webkit-text-fill-color: white;
}
.engagement-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Animations */
@keyframes heartBeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes heartPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes shareShake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Engagement Icons */
.engagement-btn i {
font-size: 18px;
transition: all 0.3s ease;
}
.engagement-btn:hover i {
transform: scale(1.1);
}
/* Loading State */
.engagement-btn.loading {
pointer-events: none;
opacity: 0.7;
}
.engagement-btn.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 767px) {
.article-engagement {
padding: 25px 15px;
margin: 30px 0;
}
.engagement-actions {
gap: 10px;
justify-content: space-between;
}
.engagement-btn {
padding: 12px 16px;
min-width: 100px;
font-size: 14px;
}
.engagement-btn i {
font-size: 16px;
}
.engagement-count {
font-size: 14px;
}
.engagement-label {
font-size: 12px;
}
}
@media (max-width: 575px) {
.engagement-actions {
flex-direction: column;
gap: 12px;
}
.engagement-btn {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
}
/* Tema escuro */
@media (prefers-color-scheme: dark) {
.engagement-btn {
background: linear-gradient(135deg, #2d3748, #4a5568);
color: #e2e8f0;
}
.engagement-btn:hover {
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}
.engagement-count {
background: linear-gradient(45deg, #63b3ed, #3182ce);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
.contact-main-section {
padding: 80px 0;
background: white;
}
.contact-form-wrapper {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-title {
color: #1a3246;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.form-title i {
font-size: 2rem;
}
.form-subtitle {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
max-width: 500px;
margin: 0 auto;
}
/* Modern Form Styles */
.contact-form-modern {
max-width: 100%;
}
.form-group-modern {
position: relative;
margin-bottom: 30px;
}
.form-control-modern {
width: 100%;
padding: 20px 16px 8px 16px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #fafafa;
outline: none;
}
.form-control-modern:focus {
border-color: #1a3246;
background: white;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.form-label-modern {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: #6c757d;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
pointer-events: none;
display: flex;
align-items: center;
gap: 8px;
background: transparent;
padding: 0 4px;
}
.form-control-modern:focus + .form-label-modern,
.form-control-modern:not(:placeholder-shown) + .form-label-modern,
.form-control-modern:valid + .form-label-modern {
top: 8px;
font-size: 12px;
color: #1a3246;
background: white;
margin-left: -4px;
}
.form-control-modern select {
cursor: pointer;
}
.form-control-modern textarea {
resize: vertical;
min-height: 120px;
padding-top: 20px;
}
.form-control-modern textarea + .form-label-modern {
top: 20px;
transform: none;
}
.form-control-modern textarea:focus + .form-label-modern,
.form-control-modern textarea:not(:placeholder-shown) + .form-label-modern,
.form-control-modern textarea:valid + .form-label-modern {
top: 8px;
font-size: 12px;
color: #1a3246;
background: white;
margin-left: -4px;
}
.form-feedback {
font-size: 14px;
margin-top: 8px;
min-height: 20px;
}
.form-feedback.success {
color: #28a745;
}
.form-feedback.error {
color: #dc3545;
}
/* Checkbox Styles */
.form-check-modern {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.form-check-input-modern {
width: 20px;
height: 20px;
margin: 0;
accent-color: #1a3246;
cursor: pointer;
}
.form-check-label-modern {
font-size: 14px;
line-height: 1.5;
color: #495057;
cursor: pointer;
flex: 1;
}
.terms-link {
color: #1a3246;
text-decoration: none;
font-weight: 500;
}
.terms-link:hover {
text-decoration: underline;
}
/* Submit Button */
.form-submit-section {
text-align: center;
margin-top: 40px;
}
.btn-contact-submit {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
padding: 16px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-width: 200px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.btn-contact-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-contact-submit:hover::before {
left: 100%;
}
.btn-contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
}
.btn-contact-submit:active {
transform: translateY(0);
}
.form-note {
margin-top: 20px;
font-size: 14px;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.form-note i {
color: #28a745;
}
/* Form Messages */
.form-messages {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
text-align: center;
font-weight: 500;
}
.form-messages.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.form-messages.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Contact Sidebar */
.contact-sidebar {
margin-top: 40px;
}
.sidebar-sticky {
position: sticky;
top: 100px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.widget-title {
color: #1a3246;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.contact-info-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.contact-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.contact-details h4 {
color: #1a3246;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.contact-details p {
color: #6c757d;
line-height: 1.6;
margin: 0;
}
.contact-details a {
color: #1a3246;
text-decoration: none;
font-weight: 500;
}
.contact-details a:hover {
text-decoration: underline;
}
.emergency-contact {
color: #28a745;
font-weight: 600;
}
/* WhatsApp CTA */
.whatsapp-cta-content {
text-align: center;
}
.whatsapp-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #f59e0b, #1faa4f);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
color: white;
animation: pulse 2s infinite;
}
.whatsapp-cta-content h3 {
color: #1a3246;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.whatsapp-cta-content p {
color: #6c757d;
margin-bottom: 20px;
line-height: 1.6;
}
.btn-whatsapp-cta {
background: linear-gradient(135deg, #f59e0b, #1faa4f);
color: white;
text-decoration: none;
padding: 14px 28px;
border-radius: 50px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
color: white;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Social Media */
.social-media-links {
display: flex;
flex-direction: row;
gap: 15px;
justify-content: center;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 0;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.social-link.facebook {
color: #1877f2;
background: rgba(24, 119, 242, 0.05);
}
.social-link.facebook:hover {
background: #1877f2;
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link.instagram {
color: #e4405f;
background: rgba(228, 64, 95, 0.05);
}
.social-link.instagram:hover {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link.youtube {
color: #ff0000;
background: rgba(255, 0, 0, 0.05);
}
.social-link.youtube:hover {
background: #ff0000;
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link.linkedin {
color: #0a66c2;
background: rgba(10, 102, 194, 0.05);
}
.social-link.linkedin:hover {
background: #0a66c2;
color: white;
transform: translateY(-3px) scale(1.05);
}
.social-link i {
font-size: 20px;
width: 24px;
text-align: center;
}
/* Map Section */
.contact-map-section {
background: #f8f9fa;
padding: 80px 0 0;
}
.map-header {
text-align: center;
margin-bottom: 40px;
}
.map-title {
color: #1a3246;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.map-title i {
font-size: 2rem;
}
.map-subtitle {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
}
.map-container {
position: relative;
height: 500px;
border-radius: 20px 20px 0 0;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.google-map {
width: 100%;
height: 100%;
border: none;
filter: grayscale(20%);
}
.map-overlay-info {
position: absolute;
top: 20px;
left: 20px;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
max-width: 300px;
backdrop-filter: blur(10px);
}
.overlay-content h4 {
color: #1a3246;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 10px;
}
.overlay-content p {
color: #6c757d;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.overlay-content p i {
color: #1a3246;
}
.btn-directions {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-directions:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
color: white;
}
/* Responsive Design */
@media (max-width: 1199px) {
.sidebar-sticky {
position: static;
}
}
@media (max-width: 991px) {
.contact-hero-title {
font-size: 2.8rem;
}
.hero-stats {
gap: 20px;
}
.stat-number {
font-size: 2rem;
}
.contact-form-wrapper {
padding: 30px;
}
.contact-main-section {
padding: 60px 0;
}
.contact-map-section {
padding: 60px 0 0;
}
}
@media (max-width: 767px) {
.contact-hero-section {
padding: 40px 0;
}
.contact-hero-title {
font-size: 2.2rem;
}
.contact-hero-subtitle {
font-size: 1.1rem;
}
.hero-stats {
flex-direction: column;
gap: 20px;
}
.form-title {
font-size: 2rem;
flex-direction: column;
}
.contact-form-wrapper {
padding: 25px;
margin: 0 10px;
}
.contact-main-section {
padding: 40px 0;
}
.contact-sidebar {
margin-top: 30px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 25px;
margin: 0 10px 20px;
}
.map-container {
height: 400px;
border-radius: 15px 15px 0 0;
}
.map-overlay-info {
position: static;
margin: 20px;
margin-bottom: 0;
}
.contact-map-section {
padding: 40px 0 0;
}
}
@media (max-width: 575px) {
.contact-hero-title {
font-size: 1.8rem;
}
.form-title {
font-size: 1.6rem;
}
.contact-form-wrapper {
padding: 20px;
margin: 0 5px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 20px;
margin: 0 5px 15px;
}
.map-container {
height: 300px;
border-radius: 10px 10px 0 0;
}
.map-overlay-info {
margin: 15px;
padding: 15px;
}
}
/* Author Bio */
.author-bio-section {
padding: 30px 0;
border-top: 1px solid #dee2e6;
}
.author-bio-card {
background: #f8f9fa;
padding: 30px;
border-radius: 12px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.author-bio-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #1a3246;
flex-shrink: 0;
}
.author-bio-name {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.author-bio-title {
color: #1a3246;
font-weight: 500;
margin-bottom: 15px;
}
.author-bio-description {
color: #6c757d;
line-height: 1.6;
margin-bottom: 20px;
}
.author-bio-social {
display: flex;
gap: 10px;
}
.author-social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #1a3246;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.author-social-btn:hover {
background: #1a3246;
transform: translateY(-2px);
}
/* Sidebar */
.article-sidebar {
padding-left: 30px;
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 120px;
z-index: 10;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.sidebar-widget {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.widget-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 2px solid #f8f9fa;
}
.widget-title i {
color: #1a3246;
}
/* CTA Widget */
.cta-widget-article {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-align: center;
}
.cta-widget-article .widget-title {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.cta-icon-article {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 24px;
}
.cta-title-article {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: white;
}
.cta-text-article {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
line-height: 1.5;
}
.btn-cta-article {
background: white;
color: #1a3246;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-cta-article:hover {
background: #f8f9fa;
color: #1a3246;
transform: translateY(-2px);
text-decoration: none;
}
/* TOC Mobile Widget */
.toc-widget-mobile {
display: none;
}
.toc-mobile-list {
display: grid;
gap: 8px;
}
.toc-mobile-link {
color: #1a3246;
text-decoration: none;
padding: 10px 15px;
border-radius: 6px;
background: #f8f9fa;
transition: all 0.3s ease;
display: block;
}
.toc-mobile-link:hover {
background: #1a3246;
color: white;
text-decoration: none;
}
/* Related Posts */
.related-posts-list {
display: grid;
gap: 20px;
}
.related-post-item {
display: flex;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.related-post-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.related-post-image {
flex-shrink: 0;
}
.related-post-image img {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}
.related-post-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.related-post-link {
color: #2c3e50;
text-decoration: none;
line-height: 1.4;
}
.related-post-link:hover {
color: #1a3246;
text-decoration: none;
}
.related-post-meta {
display: flex;
gap: 10px;
font-size: 12px;
color: #6c757d;
}
.post-date::after {
content: "•";
margin-left: 10px;
}
.post-category {
color: #1a3246;
font-weight: 500;
}
/* Newsletter Widget */
.newsletter-widget-article .newsletter-description {
color: #6c757d;
margin-bottom: 20px;
line-height: 1.5;
}
.newsletter-form-article {
display: grid;
gap: 15px;
}
.newsletter-input-article {
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.newsletter-input-article:focus {
border-color: #1a3246;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.btn-newsletter-article {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-newsletter-article:hover {
background: linear-gradient(135deg, #1a3246, #003366);
transform: translateY(-2px);
}
/* Share Widget */
.share-buttons-sidebar {
display: grid;
gap: 10px;
}
.share-btn-sidebar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
text-decoration: none;
color: white;
}
.share-btn-sidebar.facebook {
background: #1877f2;
}
.share-btn-sidebar.twitter {
background: #1da1f2;
}
.share-btn-sidebar.linkedin {
background: #0a66c2;
}
.share-btn-sidebar.whatsapp {
background: #f59e0b;
}
.share-btn-sidebar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Comments Section */
.comments-section {
padding: 50px 0;
background: #f8f9fa;
}
.comments-header {
text-align: center;
margin-bottom: 40px;
}
.comments-title {
font-size: 2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.comments-title i {
color: #1a3246;
}
.comments-subtitle {
color: #6c757d;
font-size: 1.1rem;
}
/* Comment Form */
.comment-form-wrapper {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.comment-form-title {
font-size: 1.3rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 25px;
}
.comment-form .form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}
.comment-input, .comment-textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
resize: vertical;
}
.comment-input:focus, .comment-textarea:focus {
border-color: #1a3246;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.comment-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
flex-wrap: wrap;
gap: 15px;
}
.form-check {
display: flex;
align-items: center;
gap: 8px;
}
.form-check-input {
margin: 0;
}
.form-check-label {
font-size: 14px;
color: #6c757d;
margin: 0;
}
.form-check-label a {
color: #1a3246;
text-decoration: none;
}
.form-check-label a:hover {
text-decoration: underline;
}
.btn-comment-submit {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-comment-submit:hover {
background: linear-gradient(135deg, #1a3246, #003366);
transform: translateY(-2px);
}
/* Comments List */
.comments-list {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.comment-item {
display: flex;
gap: 15px;
padding: 25px 0;
border-bottom: 1px solid #f8f9fa;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.comment-author {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.author-badge {
background: #1a3246;
color: white;
font-size: 10px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
text-transform: uppercase;
}
.comment-date {
color: #6c757d;
font-size: 14px;
}
.comment-text {
color: #495057;
line-height: 1.6;
margin-bottom: 15px;
}
.comment-actions {
display: flex;
gap: 15px;
}
.comment-action-btn {
background: none;
border: none;
color: #6c757d;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
transition: color 0.3s ease;
}
.comment-action-btn:hover {
color: #1a3246;
}
.comment-action-btn.active {
color: #f59e0b;
}
/* Comment Reply */
.comment-reply {
margin-top: 20px;
margin-left: 20px;
padding-top: 20px;
border-top: 1px solid #f8f9fa;
display: flex;
gap: 12px;
}
.comment-reply .comment-avatar img {
width: 40px;
height: 40px;
}
/* Load More Comments */
.comments-load-more {
text-align: center;
margin-top: 30px;
}
.btn-load-comments {
background: #f8f9fa;
color: #1a3246;
border: 2px solid #e9ecef;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-load-comments:hover {
background: #1a3246;
color: white;
border-color: #1a3246;
}
/* Post Navigation */
.post-navigation-section {
padding: 40px 0;
background: white;
border-top: 1px solid #dee2e6;
}
.post-navigation {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 30px;
align-items: center;
}
.nav-post {
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-post:hover {
background: #e9ecef;
transform: translateY(-2px);
}
.nav-post-link {
text-decoration: none;
color: inherit;
display: block;
}
.nav-post-link:hover {
text-decoration: none;
color: inherit;
}
.nav-post-direction {
display: flex;
align-items: center;
gap: 8px;
color: #6c757d;
font-size: 14px;
margin-bottom: 8px;
}
.next-post .nav-post-direction {
justify-content: flex-end;
}
.nav-post-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.3;
}
.next-post .nav-post-title {
text-align: right;
}
.nav-posts-center {
text-align: center;
}
.btn-back-to-blog {
background: #1a3246;
color: white;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-back-to-blog:hover {
background: #1a3246;
text-decoration: none;
color: white;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1199px) {
.article-sidebar {
padding-left: 15px;
}
.sidebar-sticky {
position: static !important;
top: auto !important;
z-index: auto !important;
max-height: none !important;
overflow-y: visible !important;
}
}
@media (max-width: 991px) {
.article-sidebar {
padding-left: 0;
margin-top: 40px;
}
.article-content-wrapper {
padding: 30px 25px;
}
.table-of-contents {
display: none;
}
.toc-widget-mobile {
display: block;
}
.post-navigation {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.next-post .nav-post-title,
.next-post .nav-post-direction {
text-align: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.article-header-section {
padding: 30px 0;
}
.article-title {
font-size: 2rem;
}
.article-subtitle {
font-size: 1.1rem;
}
.article-author-section {
flex-direction: column;
gap: 20px;
text-align: center;
}
.article-share-buttons {
justify-content: center;
}
.featured-image {
height: 250px;
}
.article-content-wrapper {
padding: 25px 20px;
}
.content-section h2 {
font-size: 1.5rem;
}
.tips-grid {
grid-template-columns: 1fr;
}
.author-bio-card {
flex-direction: column;
text-align: center;
}
.engagement-actions {
flex-direction: column;
gap: 15px;
}
.article-meta-info {
flex-direction: column;
gap: 10px;
}
.breadcrumb-list {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.breadcrumb-item:not(:last-child)::after {
display: none;
}
.comment-form-footer {
flex-direction: column;
align-items: flex-start;
}
.comments-title {
font-size: 1.6rem;
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 575px) {
.article-content-section {
padding: 30px 0;
}
.comments-section {
padding: 30px 0;
}
.comment-form-wrapper,
.comments-list {
padding: 20px;
}
.sidebar-widget {
padding: 20px;
}
.share-buttons-list {
flex-wrap: wrap;
justify-content: center;
}
.breadcrumb-current {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ===== SCROLL REVEAL ANIMATIONS ===== */
/* Base Reveal Class */
.form-control-contato {
width: 100%;
padding: 16px 20px;
border: 2px solid #e1e8f0;
border-radius: 12px;
font-size: 1rem;
font-weight: 500;
background: #fafbfc;
transition: all 0.3s ease;
color: #333;
}
.form-control-contato:focus {
outline: none;
border-color: #1a3246;
background: white;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
transform: translateY(-2px);
}
.form-control-contato:valid {
border-color: #28a745;
background: #f8fff9;
}
.form-control-contato.is-invalid {
border-color: #dc3545;
background: #fff8f8;
}
.form-control-contato::placeholder {
color: #999;
font-weight: 400;
}
textarea.form-control-contato {
resize: vertical;
min-height: 140px;
line-height: 1.6;
}
select.form-control-contato {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 50px;
}
/* Feedback de Validação */
.form-feedback {
font-size: 0.875rem;
margin-top: 6px;
font-weight: 500;
min-height: 20px;
transition: all 0.3s ease;
}
.form-feedback.success {
color: #28a745;
display: flex;
align-items: center;
gap: 6px;
}
.form-feedback.success::before {
content: '✓';
font-weight: bold;
}
.form-feedback.error {
color: #dc3545;
display: flex;
align-items: center;
gap: 6px;
}
.form-feedback.error::before {
content: '✗';
font-weight: bold;
}
/* Contador de Caracteres */
.char-counter {
text-align: right;
font-size: 0.8rem;
color: #999;
margin-top: 6px;
font-weight: 500;
}
.char-counter.warning {
color: #ff9800;
}
.char-counter.danger {
color: #dc3545;
}
/* Checkbox Personalizado */
.form-check-contato {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 1rem;
}
.form-check-input-contato {
width: 20px;
height: 20px;
border: 2px solid #1a3246;
border-radius: 4px;
cursor: pointer;
appearance: none;
background: white;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 2px;
}
.form-check-input-contato:checked {
background: #1a3246;
border-color: #1a3246;
}
.form-check-input-contato:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.form-check-label-contato {
font-size: 0.95rem;
color: #666;
line-height: 1.5;
cursor: pointer;
}
.terms-link:hover {
text-decoration: underline;
}
/* Botão de Envio */
.form-submit-contato {
text-align: center;
margin-top: 2rem;
}
.btn-enviar-contato {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
color: white;
padding: 18px 40px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
min-width: 200px;
}
.btn-enviar-contato::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-enviar-contato:hover::before {
left: 100%;
}
.btn-enviar-contato:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
.btn-enviar-contato:active {
transform: translateY(0);
}
.btn-enviar-contato:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-loading {
display: none;
}
.btn-enviar-contato.loading .btn-text,
.btn-enviar-contato.loading .fa-paper-plane {
display: none;
}
.btn-enviar-contato.loading .btn-loading {
display: inline-block;
}
.form-note-contato {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 1rem;
font-size: 0.875rem;
color: #666;
}
.form-note-contato i {
color: #28a745;
}
/* Mensagem de Resultado */
.contato-result-message {
margin-top: 2rem;
padding: 20px;
border-radius: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s ease;
}
.contato-result-message.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.contato-result-message.success {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
border: 2px solid #28a745;
color: #155724;
}
.contato-result-message.error {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
border: 2px solid #dc3545;
color: #721c24;
}
.result-content {
display: flex;
align-items: center;
gap: 15px;
}
.result-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.contato-result-message.success .result-icon::before {
content: '✓';
color: #28a745;
}
.contato-result-message.error .result-icon::before {
content: '✗';
color: #dc3545;
}
.result-text {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
}
/* Sidebar de Contato */
.contato-sidebar-wrapper {
position: sticky;
top: 100px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.contact-info-widget:hover,
.whatsapp-cta-widget:hover,
.social-media-widget:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.widget-title {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.widget-title i {
color: #1a3246;
font-size: 1.2rem;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
border-radius: 12px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.contact-info-item:hover {
background: #f8faff;
border-color: rgba(0, 102, 204, 0.1);
transform: translateX(5px);
}
.contact-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.contact-details p {
font-size: 0.95rem;
color: #666;
line-height: 1.5;
margin: 0;
}
.contact-details a {
color: #1a3246;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.contact-details a:hover {
color: #1a3246;
text-decoration: underline;
}
/* WhatsApp CTA Widget */
.whatsapp-cta-content {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.whatsapp-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.whatsapp-text h3 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.whatsapp-text p {
font-size: 0.9rem;
color: #666;
margin: 0;
line-height: 1.4;
}
.btn-whatsapp-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
padding: 15px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-cta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
/* Redes Sociais */
.social-media-links {
display: flex;
gap: 15px;
justify-content: center;
}
.social-link {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.social-link.facebook {
background: linear-gradient(135deg, #1877f2, #166fe5);
}
.social-link.instagram {
background: linear-gradient(135deg, #e4405f, #833ab4, #fcb045);
}
.social-link.youtube {
background: linear-gradient(135deg, #ff0000, #cc0000);
}
.social-link.linkedin {
background: linear-gradient(135deg, #0077b5, #005885);
}
.social-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* Seção do Mapa */
.contato-mapa-section {
padding: 80px 0;
background: #f8faff;
}
.map-header {
text-align: center;
margin-bottom: 50px;
}
.map-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.map-title i {
color: #1a3246;
font-size: 2rem;
}
.map-subtitle {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.map-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.map-wrapper {
position: relative;
width: 100%;
height: 400px;
}
.google-map {
width: 100%;
height: 100%;
border: 0;
filter: grayscale(20%);
transition: filter 0.3s ease;
}
.map-container:hover .google-map {
filter: grayscale(0%);
}
.map-overlay-info {
position: absolute;
top: 20px;
left: 20px;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
max-width: 300px;
animation: mapInfoFloat 3s ease-in-out infinite;
}
@keyframes mapInfoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.overlay-content h4 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.overlay-content h4 i {
color: #1a3246;
}
.overlay-content p {
font-size: 0.9rem;
color: #666;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.4;
}
.overlay-content p i {
color: #1a3246;
margin-top: 2px;
flex-shrink: 0;
}
.btn-directions {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 12px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
margin-top: 10px;
}
.btn-directions:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
color: white;
text-decoration: none;
}
/* Responsividade */
@media (max-width: 1199px) {
.contactx-hero-title {
font-size: 2.5rem;
}
.formx-main {
padding: 30px;
}
.contactx-sidebar {
position: static;
margin-top: 40px;
}
}
@media (max-width: 991px) {
.contactx-hero {
padding: 100px 0 60px;
}
.contactx-hero-title {
font-size: 2.2rem;
}
.contactx-hero-visual {
justify-content: center;
margin-top: 2rem;
}
.contactx-main {
padding: 60px 0;
}
.contactx-form-section {
margin-bottom: 40px;
}
.contactx-info-widget,
.contactx-whatsapp-widget,
.contactx-social-widget {
margin-bottom: 20px;
}
.contactx-map-section {
padding: 60px 0;
}
.contactx-map-frame {
position: relative;
top: auto;
left: auto;
margin-top: 20px;
max-width: 100%;
}
}
@media (max-width: 767px) {
.contactx-hero {
padding: 80px 0 40px;
text-align: center;
}
.contactx-hero-title {
font-size: 2rem;
}
.contactx-hero-subtitle {
font-size: 1.1rem;
}
.contactx-hero-visual {
flex-direction: column;
gap: 15px;
align-items: center;
}
.contactx-card-float {
position: static;
margin-top: 20px;
transform: none;
animation: none;
}
.contactx-form-section {
padding: 25px;
margin: 0 15px;
}
.formx-title {
font-size: 1.5rem;
flex-direction: column;
gap: 8px;
}
.formx-input {
padding: 14px 16px;
}
.btnx-main {
width: 100%;
padding: 16px;
}
.contactx-info-list {
flex-direction: column;
text-align: center;
gap: 10px;
}
.contactx-info-list:hover {
transform: none;
}
.contactx-whatsapp-widget {
flex-direction: column;
text-align: center;
gap: 15px;
}
.contactx-map-title {
font-size: 2rem;
flex-direction: column;
gap: 10px;
}
.contactx-map-frame {
height: 300px;
}
}
@media (max-width: 575px) {
.contactx-hero {
padding: 60px 0 30px;
}
.contactx-hero-title {
font-size: 1.8rem;
}
.contactx-badge {
font-size: 0.8rem;
padding: 10px 16px;
}
.contactx-form-section {
padding: 20px;
margin: 0 10px;
}
.formx-input {
padding: 12px 14px;
}
.contactx-info-widget,
.contactx-whatsapp-widget,
.contactx-social-widget {
padding: 20px;
margin: 0 10px 20px;
}
.contactx-map-frame {
height: 250px;
}
.contactx-map-section {
padding: 20px;
}
.contactx-map-title {
font-size: 1rem;
}
.contactx-map-frame p {
font-size: 0.85rem;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.contactx-container *,
.contactx-container *::before,
.contactx-container *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.contactx-card-float,
.contactx-map-section {
animation: none !important;
transform: none !important;
}
}
@media (prefers-contrast: high) {
.contactx-hero-title,
.formx-title,
.contactx-map-title,
.contactx-info-title {
color: #000 !important;
}
.formx-input {
border-color: #000 !important;
}
.formx-input:focus {
border-color: #1a3246 !important;
box-shadow: none !important;
}
.btnx-main,
.btnx-whatsapp,
.contactx-social-link {
border: 2px solid #fff !important;
}
}
/* ===== BLOG RDS - ESTILOS ESSENCIAIS PARA PÁGINA DE BLOG ===== */
/* Blog Content Section Fix */
.blog-content-section .featured-post {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
margin-bottom: 50px;
transition: all 0.3s ease;
}
.blog-content-section .featured-post:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.blog-content-section .post-image-wrapper {
position: relative;
overflow: hidden;
height: 400px;
}
.blog-content-section .post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.blog-content-section .post-image-wrapper:hover .post-image {
transform: scale(1.05);
}
.blog-content-section .post-content {
padding: 30px;
}
.blog-content-section .regular-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.blog-content-section .regular-post {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.blog-content-section .regular-post:hover {
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}
.blog-content-section .regular-post .post-image-wrapper {
height: 200px;
}
.blog-content-section .regular-post .post-content {
padding: 25px;
}
/* Sidebar Fixes */
.blog-page-rds .blog-sidebar {
padding-left: 40px;
}
.blog-page-rds .sidebar-widget {
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
}
.blog-page-rds .widget-title {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.blog-page-rds .widget-title i {
color: #1a3246;
font-size: 1.1rem;
}
/* Responsive Blog Fixes */
@media (max-width: 991px) {
.blog-page-rds .blog-sidebar {
padding-left: 0;
margin-top: 60px;
}
.blog-content-section .regular-posts-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.blog-content-section .featured-post .post-image-wrapper {
height: 250px;
}
}
/* ===== FIM DOS ESTILOS ESSENCIAIS DO BLOG RDS ===== */
/* ===== EFEITOS CSS PURO PARA QUEM SOMOS - SUBSTITUIÇÃO DO JAVASCRIPT ===== */
/* Animações de entrada escalonadas para timeline */
.timeline-historia .timeline-item {
opacity: 0;
transform: translateX(-30px);
animation: slideInLeft 0.8s ease-out forwards;
}
.timeline-historia .timeline-item:nth-child(1) {
animation-delay: 0.1s;
}
.timeline-historia .timeline-item:nth-child(2) {
animation-delay: 0.2s;
}
.timeline-historia .timeline-item:nth-child(3) {
animation-delay: 0.3s;
}
.timeline-historia .timeline-item:nth-child(4) {
animation-delay: 0.4s;
}
/* Animação de entrada para conteúdo da história */
.historia-conteudo {
opacity: 0;
transform: translateX(30px);
animation: slideInRight 0.8s ease-out 0.2s forwards;
}
/* Animações de entrada para estatísticas */
.estatisticas-historia .stat-item-historia {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.6s ease-out forwards;
}
.estatisticas-historia .stat-item-historia:nth-child(1) {
animation-delay: 0.5s;
}
.estatisticas-historia .stat-item-historia:nth-child(2) {
animation-delay: 0.6s;
}
.estatisticas-historia .stat-item-historia:nth-child(3) {
animation-delay: 0.7s;
}
/* Animação de contagem simulada com CSS */
.stat-numero {
position: relative;
overflow: hidden;
}
.stat-numero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, var(--cor-primaria) 50%, transparent 100%);
transform: translateX(-100%);
animation: shimmer 2s ease-in-out 0.8s;
}
/* Animações para cards MVV */
.mvv-card {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.missao-card {
animation-delay: 0.1s;
}
.visao-card {
animation-delay: 0.2s;
}
.valores-card {
animation-delay: 0.3s;
}
/* Animações para diferenciais */
.diferencial-card {
opacity: 0;
transform: scale(0.9);
animation: zoomIn 0.6s ease-out forwards;
}
.diferencial-card:nth-child(1) {
animation-delay: 0.1s;
}
.diferencial-card:nth-child(2) {
animation-delay: 0.2s;
}
.diferencial-card:nth-child(3) {
animation-delay: 0.3s;
}
.diferencial-card:nth-child(4) {
animation-delay: 0.4s;
}
/* Efeitos hover modernos */
.timeline-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-item:hover {
transform: translateX(10px) scale(1.02);
}
.timeline-marker {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-marker {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 102, 204, 0.3);
}
.mvv-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.mvv-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.mvv-card:hover::before {
left: 100%;
}
.mvv-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.diferencial-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.diferencial-card:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 102, 204, 0.15);
}
.diferencial-icon-container {
transition: all 0.3s ease;
}
.diferencial-card:hover .diferencial-icon-container {
transform: rotateY(360deg);
}
/* Efeitos de parallax sutil */
.hero-imagem-container {
animation: floatSmooth 6s ease-in-out infinite;
}
.badge-experiencia-flutuante {
animation: pulse 3s ease-in-out infinite;
}
.elementos-decorativos-hero .elemento-hero-2 {
animation: float 8s ease-in-out infinite;
}
.elementos-decorativos-hero .elemento-hero-3 {
animation: pulse 4s ease-in-out infinite;
}
.particulas-flutuantes .particula {
animation: floatParticle 12s ease-in-out infinite;
}
.particulas-flutuantes .particula:nth-child(1) {
animation-delay: 0s;
}
.particulas-flutuantes .particula:nth-child(2) {
animation-delay: 2.4s;
}
.particulas-flutuantes .particula:nth-child(3) {
animation-delay: 4.8s;
}
.particulas-flutuantes .particula:nth-child(4) {
animation-delay: 7.2s;
}
.particulas-flutuantes .particula:nth-child(5) {
animation-delay: 9.6s;
}
/* Keyframes para animações */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes floatSmooth {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes floatParticle {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.3;
}
25% {
transform: translateY(-20px) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translateY(-10px) rotate(180deg);
opacity: 0.5;
}
75% {
transform: translateY(-25px) rotate(270deg);
opacity: 0.9;
}
}
/* Efeitos de intersecção moderna */
.hero-content-quem-somos > *:nth-child(odd) {
animation: slideInLeft 0.8s ease-out;
}
.hero-content-quem-somos > *:nth-child(even) {
animation: slideInRight 0.8s ease-out;
}
.hero-content-quem-somos .badge-institucional {
animation-delay: 0.1s;
}
.hero-content-quem-somos .titulo-quem-somos {
animation-delay: 0.2s;
}
.hero-content-quem-somos .subtitulo-quem-somos {
animation-delay: 0.3s;
}
.hero-content-quem-somos .diferenciais-rapidos {
animation-delay: 0.4s;
}
.hero-content-quem-somos .hero-actions-quem-somos {
animation-delay: 0.5s;
}
/* Efeito de ondulação nos botões */
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
position: relative;
overflow: hidden;
}
.btn-hero-whatsapp::before,
.btn-hero-saiba-mais::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.6s ease;
transform: translate(-50%, -50%);
}
.btn-hero-whatsapp:hover::before,
.btn-hero-saiba-mais:hover::before {
width: 300px;
height: 300px;
}
/* Microinterações para elementos da timeline */
.timeline-content h4 {
transition: color 0.3s ease;
}
.timeline-item:hover .timeline-content h4 {
color: var(--cor-primaria);
}
/* Efeito de gradiente animado para badges */
.badge-institucional,
.secao-badge {
background: linear-gradient(45deg, var(--cor-primaria), var(--cor-secundaria));
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% {
background: linear-gradient(45deg, var(--cor-primaria), var(--cor-secundaria));
}
50% {
background: linear-gradient(45deg, var(--cor-secundaria), var(--cor-primaria));
}
}
/* Responsividade para efeitos móveis */
@media (max-width: 768px) {
.timeline-historia .timeline-item,
.historia-conteudo,
.mvv-card,
.diferencial-card {
animation-duration: 0.6s;
}
.mvv-card:hover,
.diferencial-card:hover,
.timeline-item:hover {
transform: translateY(-3px) scale(1.01);
}
.hero-imagem-container {
animation-duration: 8s;
}
}
/* Suporte para usuários que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.timeline-historia .timeline-item,
.historia-conteudo,
.mvv-card,
.diferencial-card {
opacity: 1;
transform: none;
}
}
/* ===== FIM DOS EFEITOS CSS PURO PARA QUEM SOMOS ===== */
/* ===== BLOG - ANIMAÇÕES PADRONIZADAS SEGUINDO PADRÃO RDS ===== */
/* Animações de entrada para elementos do blog hero */
.hero-content-blog > *:nth-child(odd) {
animation: slideInLeft 0.8s ease-out forwards;
}
.hero-content-blog > *:nth-child(even) {
animation: slideInRight 0.8s ease-out forwards;
}
.hero-content-blog .badge-institucional {
animation: fadeInUp 0.8s ease-out 0.1s forwards;
}
.hero-content-blog .titulo-blog {
animation: slideInLeft 1s ease-out 0.2s forwards;
}
.hero-content-blog .subtitulo-blog {
animation: slideInLeft 0.8s ease-out 0.3s forwards;
}
.hero-content-blog .stats-rapidas {
animation: fadeInUp 0.8s ease-out 0.4s forwards;
}
.hero-content-blog .hero-actions-blog {
animation: fadeInUp 0.8s ease-out 0.5s forwards;
}
.hero-imagem-wrapper {
animation: slideInRight 1s ease-out 0.3s forwards;
}
/* Badge com efeito flutuante */
.blog-badge-modern {
animation: badgeFloat 3s ease-in-out infinite;
}
.blog-badge-modern i {
animation: pulse 2s ease-in-out infinite;
}
/* Título com linha crescente */
.blog-hero-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
animation: lineGrow 1s ease-out forwards;
animation-delay: 0.8s;
}
/* Estatísticas com contador animado */
.blog-stats .stat-number {
animation: countUp 2s ease-out forwards;
animation-delay: 1s;
}
/* Seção de busca com efeito deslizante */
.blog-search-wrapper {
animation: slideInUp 0.8s ease-out forwards;
animation-delay: 0.7s;
}
.popular-tags .tag-item {
animation: fadeInUp 0.6s ease-out forwards;
animation-fill-mode: both;
}
.popular-tags .tag-item:nth-child(1) { animation-delay: 0.9s; }
.popular-tags .tag-item:nth-child(2) { animation-delay: 1.0s; }
.popular-tags .tag-item:nth-child(3) { animation-delay: 1.1s; }
.popular-tags .tag-item:nth-child(4) { animation-delay: 1.2s; }
.popular-tags .tag-item:nth-child(5) { animation-delay: 1.3s; }
/* Posts do blog com animações */
.blog-posts-grid .featured-post {
animation: slideInLeft 0.8s ease-out forwards;
animation-delay: 0.8s;
}
.blog-posts-grid .regular-post:nth-child(odd) {
animation: slideInLeft 0.8s ease-out forwards;
animation-fill-mode: both;
}
.blog-posts-grid .regular-post:nth-child(even) {
animation: slideInRight 0.8s ease-out forwards;
animation-fill-mode: both;
}
.blog-posts-grid .regular-post:nth-child(1) { animation-delay: 1.0s; }
.blog-posts-grid .regular-post:nth-child(2) { animation-delay: 1.1s; }
.blog-posts-grid .regular-post:nth-child(3) { animation-delay: 1.2s; }
.blog-posts-grid .regular-post:nth-child(4) { animation-delay: 1.3s; }
.blog-posts-grid .regular-post:nth-child(5) { animation-delay: 1.4s; }
.blog-posts-grid .regular-post:nth-child(6) { animation-delay: 1.5s; }
/* Sidebar do blog */
.blog-sidebar .sidebar-widget {
animation: slideInRight 0.8s ease-out forwards;
animation-fill-mode: both;
}
.blog-sidebar .sidebar-widget:nth-child(1) { animation-delay: 0.9s; }
.blog-sidebar .sidebar-widget:nth-child(2) { animation-delay: 1.1s; }
.blog-sidebar .sidebar-widget:nth-child(3) { animation-delay: 1.3s; }
.blog-sidebar .sidebar-widget:nth-child(4) { animation-delay: 1.5s; }
/* Efeitos hover aprimorados para posts */
.blog-post {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-post:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.blog-post:hover .post-image {
transform: scale(1.05);
}
.blog-post:hover .post-title {
color: #1a3246;
}
/* Badge destaque com pulsação */
.featured-badge {
animation: badgeFloat 3s ease-in-out infinite;
}
/* Efeitos de hover para tags */
.tag-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.tag-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.tag-item:hover::before {
left: 100%;
}
/* Elementos decorativos flutuantes para o blog */
.blog-hero-section {
position: relative;
overflow: hidden;
}
.blog-hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: linear-gradient(45deg, rgba(0, 102, 204, 0.1), rgba(37, 211, 102, 0.1));
border-radius: 50%;
animation: floatSmooth 6s ease-in-out infinite;
z-index: -1;
}
.blog-hero-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(0, 68, 153, 0.08), rgba(0, 102, 204, 0.08));
border-radius: 50%;
animation: floatSmooth 8s ease-in-out infinite reverse;
z-index: -1;
}
/* Partículas flutuantes para o blog */
.blog-search-section {
position: relative;
overflow: hidden;
}
.blog-search-section::before {
content: '';
position: absolute;
top: 20%;
left: 10%;
width: 4px;
height: 4px;
background-color: #1a3246;
border-radius: 50%;
opacity: 0.6;
animation: floatParticle 12s linear infinite;
animation-delay: 0s;
}
.blog-search-section::after {
content: '';
position: absolute;
top: 60%;
right: 15%;
width: 6px;
height: 6px;
background-color: #f59e0b;
border-radius: 50%;
opacity: 0.4;
animation: floatParticle 15s linear infinite;
animation-delay: 3s;
}
/* Efeito shimmer para elementos de carregamento */
.blog-posts-grid .post-image-wrapper::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.6s;
z-index: 2;
}
.blog-post:hover .post-image-wrapper::before {
left: 100%;
}
/* Gradiente suave no background */
.blog-content-section {
background: linear-gradient(180deg,
rgba(248, 249, 250, 0) 0%,
rgba(248, 249, 250, 0.5) 50%,
rgba(248, 249, 250, 0) 100%
);
}
/* Efeito de ondulação nos botões de busca */
.search-btn {
position: relative;
overflow: hidden;
}
.search-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.6s ease;
transform: translate(-50%, -50%);
}
.search-btn:hover::before {
width: 300px;
height: 300px;
}
/* Animações responsivas para mobile */
@media (max-width: 768px) {
.hero-content-blog > *:nth-child(odd),
.hero-content-blog > *:nth-child(even) {
animation: fadeInUp 0.8s ease-out forwards;
}
.blog-posts-grid .regular-post:nth-child(odd),
.blog-posts-grid .regular-post:nth-child(even) {
animation: fadeInUp 0.8s ease-out forwards;
}
.blog-sidebar .sidebar-widget {
animation: fadeInUp 0.8s ease-out forwards;
}
.titulo-blog::after {
width: 50px;
}
}
/* Acessibilidade - redução de movimento para blog */
@media (prefers-reduced-motion: reduce) {
.hero-content-blog *,
.blog-search-wrapper *,
.blog-posts-grid *,
.blog-sidebar * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.blog-hero::before,
.blog-hero::after,
.blog-search-section::before,
.blog-search-section::after {
animation: none !important;
}
.blog-post:hover {
transform: none !important;
}
}
/* Alto contraste para blog */
@media (prefers-contrast: high) {
.titulo-blog,
.subtitulo-blog,
.post-title {
text-shadow: none;
font-weight: 700;
}
.badge-institucional,
.featured-badge,
.tag-item {
border: 2px solid currentColor;
background-color: #ffffff;
}
.titulo-blog::after {
background: currentColor;
}
}
/* ===== FIM DOS EFEITOS BLOG PADRONIZADOS ===== */
/* ===== SCROLL REVEAL ANIMATIONS ===== */
/* Base Reveal Class */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.reveal.reveal-visible {
opacity: 1;
transform: none;
}
/* Animation Variants */
.fade-up {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-out;
}
.fade-up.reveal-visible {
opacity: 1;
transform: translateY(0);
}
.fade-down {
opacity: 0;
transform: translateY(-50px);
transition: all 0.8s ease-out;
}
.fade-down.reveal-visible {
opacity: 1;
transform: translateY(0);
}
.fade-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease-out;
}
.fade-left.reveal-visible {
opacity: 1;
transform: translateX(0);
}
.fade-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s ease-out;
}
.fade-right.reveal-visible {
opacity: 1;
transform: translateX(0);
}
.zoom-in {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s ease-out;
}
.zoom-in.reveal-visible {
opacity: 1;
transform: scale(1);
}
.slide-up {
opacity: 0;
transform: translateY(80px);
transition: all 1s ease-out;
}
.slide-up.reveal-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered Animations */
.reveal-stagger {
transition-delay: 0.1s;
}
.reveal-stagger:nth-child(2) {
transition-delay: 0.2s;
}
.reveal-stagger:nth-child(3) {
transition-delay: 0.3s;
}
.reveal-stagger:nth-child(4) {
transition-delay: 0.4s;
}
.reveal-stagger:nth-child(5) {
transition-delay: 0.5s;
}
.reveal-stagger:nth-child(6) {
transition-delay: 0.6s;
}
/* Performance Optimized Animations */
@media (prefers-reduced-motion: reduce) {
.reveal,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.slide-up {
transition: none;
opacity: 1;
transform: none;
}
}
/* Enhanced Mobile Experience */
@media (max-width: 768px) {
.reveal,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.slide-up {
transition-duration: 0.5s;
transform: translateY(20px);
}
.fade-left,
.fade-right {
transform: translateY(20px);
}
}
/* Smooth Focus Transitions */
.reveal:focus-visible,
.fade-up:focus-visible,
.fade-down:focus-visible,
.fade-left:focus-visible,
.fade-right:focus-visible,
.zoom-in:focus-visible,
.slide-up:focus-visible {
outline: 2px solid #1a3246;
outline-offset: 2px;
}
/* ===== PÁGINA DE CONTATO - SEGUINDO PADRÃO QUEM-SOMOS ===== */
/* Hero Section - Contato */
.contato-hero {
position: relative;
padding: 120px 0 100px;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.hero-content-contato {
position: relative;
z-index: 3;
}
/* Título Principal da Página Contato */
.titulo-contato {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
}
.titulo-contato::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
margin: 1.5rem 0;
border-radius: 2px;
animation: lineGrow 1s ease-out 0.5s both;
}
/* Subtítulo da Página Contato */
.subtitulo-contato {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 2.5rem;
max-width: 550px;
}
.subtitulo-contato strong {
color: #1a3246;
font-weight: 600;
}
/* Canais Rápidos */
.canais-rapidos {
margin-bottom: 2.5rem;
}
.canal-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.canal-item:hover {
background: rgba(255, 255, 255, 1);
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.canal-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
.canal-texto {
display: flex;
flex-direction: column;
}
.canal-texto strong {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 2px;
}
.canal-texto span {
font-size: 0.875rem;
color: #666;
}
/* Hero Actions - Contato */
.hero-actions-contato {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
/* Seção do Formulário */
.formulario-contato-section {
padding: 100px 0;
background: #fafafa;
}
.formulario-wrapper {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
position: relative;
border-top: 4px solid #1a3246;
}
/* Formulário Moderno */
.formulario-moderno {
position: relative;
}
.form-group-moderno {
margin-bottom: 2rem;
position: relative;
}
.form-label-moderno {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #333;
font-size: 0.95rem;
margin-bottom: 8px;
}
.form-label-moderno i {
color: #1a3246;
font-size: 0.875rem;
}
.form-control-moderno {
width: 100%;
padding: 15px 20px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 1rem;
background: #fff;
transition: all 0.3s ease;
font-family: inherit;
}
.form-control-moderno:focus {
outline: none;
border-color: #1a3246;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
background: #fafbff;
}
.form-control-moderno:valid {
border-color: #f59e0b;
}
.form-control-moderno::placeholder {
color: #999;
}
select.form-control-moderno {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 45px;
}
textarea.form-control-moderno {
resize: vertical;
min-height: 120px;
}
/* Contador de Caracteres */
.char-counter {
text-align: right;
font-size: 12px;
color: #999;
margin-top: 5px;
font-weight: 500;
}
.char-counter.warning {
color: #ff9800;
}
.char-counter.danger {
color: #dc3545;
}
/* Checkbox Moderno */
.form-check-moderno {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 2rem;
}
.form-check-input-moderno {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
position: relative;
flex-shrink: 0;
margin-top: 2px;
}
.form-check-input-moderno:checked {
background: #1a3246;
border-color: #1a3246;
}
.form-check-input-moderno:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.form-check-label-moderno {
font-size: 0.9rem;
color: #666;
line-height: 1.4;
cursor: pointer;
}
.terms-link {
color: #1a3246;
text-decoration: none;
transition: color 0.3s ease;
}
.terms-link:hover {
color: #1a3246;
text-decoration: underline;
}
/* Submit Section */
.form-submit-moderno {
text-align: center;
margin-top: 2rem;
}
.btn-contact-submit {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 40px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}
.btn-contact-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-contact-submit:hover::before {
left: 100%;
}
.btn-contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
.btn-contact-submit:active {
transform: translateY(0);
}
.form-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 1.5rem;
font-size: 0.875rem;
color: #666;
}
.form-note i {
color: #f59e0b;
}
/* Sidebar de Contato */
.contato-sidebar {
position: sticky;
top: 20px;
}
/* Ícones das Redes Sociais - Contato - Sempre Visíveis */
.contato-sidebar .social-media-widget .social-link {
opacity: 1 !important;
visibility: visible !important;
}
.contato-sidebar .social-media-widget .social-link.facebook {
background: linear-gradient(135deg, #1877f2, #165ed0) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-link.instagram {
background: linear-gradient(135deg, #e4405f, #c73650) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-link.linkedin {
background: linear-gradient(135deg, #0077b5, #005885) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-link.youtube {
background: linear-gradient(135deg, #ff0000, #cc0000) !important;
color: white !important;
}
.contato-sidebar .social-media-widget .social-media-links {
opacity: 1 !important;
visibility: visible !important;
}
/* Garantir que os ícones FontAwesome dentro dos links sejam visíveis */
.contato-sidebar .social-media-widget .social-link i {
color: white !important;
opacity: 1 !important;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
position: relative;
border-top: 4px solid #1a3246;
}
.contact-info-widget:hover,
.whatsapp-cta-widget:hover,
.social-media-widget:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.widget-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.widget-title i {
color: #1a3246;
}
.contact-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
transition: all 0.3s ease;
}
.contact-info-item:last-child {
border-bottom: none;
}
.contact-info-item:hover {
background: #f8f9fa;
margin: 0 -15px;
padding: 15px;
border-radius: 10px;
}
.contact-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 5px 0;
}
.contact-details p {
font-size: 0.9rem;
color: #666;
margin: 0;
line-height: 1.4;
}
.contact-details a {
color: #1a3246;
text-decoration: none;
}
.contact-details a:hover {
text-decoration: underline;
}
/* Widget WhatsApp */
.whatsapp-cta-content {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.whatsapp-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
animation: whatsappPulse 2s infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.whatsapp-text h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 5px 0;
}
.whatsapp-text p {
font-size: 0.9rem;
color: #666;
margin: 0;
}
.btn-whatsapp-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-cta:hover {
background: linear-gradient(135deg, #20c659, #0e6b5c);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
/* Widget Redes Sociais */
.social-media-links {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
opacity: 1;
}
.social-link {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white !important;
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
opacity: 1;
}
.social-link.facebook {
background: linear-gradient(135deg, #1877f2, #165ed0) !important;
color: white !important;
}
.social-link.instagram {
background: linear-gradient(135deg, #e4405f, #c73650) !important;
color: white !important;
}
.social-link.linkedin {
background: linear-gradient(135deg, #0077b5, #005885) !important;
color: white !important;
}
.social-link.youtube {
background: linear-gradient(135deg, #ff0000, #cc0000) !important;
color: white !important;
}
.social-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: white !important;
}
/* Seção do Mapa */
.contact-map-section {
padding: 100px 0;
background: #fff;
}
.map-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}
.map-wrapper {
position: relative;
width: 100%;
height: 500px;
}
.google-map {
width: 100%;
height: 100%;
border: none;
border-radius: 20px;
transition: all 0.3s ease;
}
.map-container:hover .google-map {
transform: scale(1.02);
}
/* Animações seguindo padrão do blog para seção hero */
.hero-content-contato > *:nth-child(odd) {
opacity: 0;
animation: slideInLeft 0.8s ease-out forwards;
}
.hero-content-contato > *:nth-child(even) {
opacity: 0;
animation: slideInRight 0.8s ease-out forwards;
}
/* Badge com animação específica */
.badge-institucional {
opacity: 0;
animation: fadeInUp 0.8s ease-out 0.1s forwards;
}
/* Título com animação específica */
.titulo-contato {
opacity: 0;
animation: slideInUp 0.8s ease-out 0.2s forwards;
}
/* Delays escalonados */
.hero-content-contato .badge-institucional {
animation-delay: 0.1s;
}
.hero-content-contato .titulo-contato {
animation-delay: 0.2s;
}
.hero-content-contato .subtitulo-contato {
animation-delay: 0.3s;
}
.hero-content-contato .canais-rapidos {
animation-delay: 0.4s;
}
.hero-content-contato .hero-actions-contato {
animation-delay: 0.5s;
}
/* Sidebar widgets com animação escalonada */
.contato-sidebar .contact-info-widget {
opacity: 1;
animation: fadeInUp 0.8s ease-out 0.6s forwards;
}
.contato-sidebar .whatsapp-cta-widget {
opacity: 1;
animation: fadeInUp 0.8s ease-out 0.7s forwards;
}
.contato-sidebar .social-media-widget {
opacity: 1;
animation: fadeInUp 0.8s ease-out 0.8s forwards;
}
/* Responsividade */
@media (max-width: 1199.98px) {
.titulo-contato {
font-size: 3rem;
}
.formulario-wrapper {
padding: 30px;
}
.contato-sidebar {
position: static;
margin-top: 3rem;
}
}
@media (max-width: 991.98px) {
.contato-hero {
padding: 80px 0 60px;
min-height: auto;
}
.titulo-contato {
font-size: 2.5rem;
text-align: center;
}
.titulo-contato::after {
margin: 1.5rem auto;
}
.subtitulo-contato {
text-align: center;
margin: 0 auto 2rem;
}
.hero-actions-contato {
justify-content: center;
}
.formulario-contato-section {
padding: 60px 0;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 25px;
}
.contact-map-section {
padding: 60px 0;
}
.map-wrapper {
height: 400px;
}
}
@media (max-width: 767.98px) {
.contato-hero {
padding: 60px 0 40px;
}
.titulo-contato {
font-size: 2rem;
}
.titulo-contato::after {
width: 60px;
height: 3px;
}
.subtitulo-contato {
font-size: 1.1rem;
}
.badge-institucional {
font-size: 0.8rem;
padding: 8px 16px;
}
.canais-rapidos {
margin-bottom: 2rem;
}
.canal-item {
padding: 0.75rem;
}
.canal-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-contato {
flex-direction: column;
gap: 1rem;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
width: 100%;
justify-content: center;
}
.formulario-contato-section {
padding: 40px 0;
}
.formulario-wrapper {
padding: 20px;
}
.form-control-moderno {
padding: 12px 16px;
}
.btn-contact-submit {
padding: 14px 30px;
font-size: 1rem;
}
.contact-info-list {
gap: 1rem;
}
.contact-info-item:hover {
margin: 0 -10px;
padding: 15px 10px;
}
.whatsapp-cta-widget {
padding: 20px;
}
.contact-map-section {
padding: 40px 0;
}
.map-wrapper {
height: 300px;
}
}
@media (max-width: 575.98px) {
.contato-hero {
padding: 40px 0 30px;
}
.titulo-contato {
font-size: 1.75rem;
}
.badge-institucional {
font-size: 0.75rem;
padding: 6px 12px;
}
.formulario-wrapper {
padding: 15px;
}
.form-control-moderno {
padding: 10px 14px;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
padding: 20px 15px;
}
.map-wrapper {
height: 250px;
}
.contact-map-section {
padding: 30px 0;
}
.map-container {
border-radius: 15px;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.hero-content-contato *,
.contato-sidebar *,
.canal-item,
.contact-info-item {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.titulo-contato,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
color: #1a3246 !important;
-webkit-text-fill-color: #1a3246 !important;
}
.form-control-moderno {
border-color: #000 !important;
}
.form-control-moderno:focus {
border-color: #1a3246 !important;
box-shadow: 0 0 0 2px #1a3246 !important;
}
.btn-contact-submit,
.btn-whatsapp-cta {
background: #1a3246 !important;
color: white !important;
}
.contact-info-widget,
.whatsapp-cta-widget,
.social-media-widget {
border: 2px solid #1a3246 !important;
}
}
/* ===== FIM DA PÁGINA DE CONTATO ===== */
/* ===== PÁGINA TERMOS DE USO - SEGUINDO PADRÃO FRONTEND RDS ===== */
/* Hero Section Termos - Seguindo Padrão */
.termos-hero {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-termos {
position: relative;
z-index: 3;
}
.titulo-termos {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.titulo-termos::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
.subtitulo-termos {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-termos strong {
color: #1a3246;
font-weight: 700;
}
/* Informações Rápidas */
.info-rapidas {
margin-bottom: 3rem;
}
.info-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #1a3246;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.info-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.info-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.info-texto {
display: flex;
flex-direction: column;
}
.info-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.info-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions Termos */
.hero-actions-termos {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Seção Conteúdo - Seguindo Padrão */
.termos-conteudo-section {
padding: 100px 0;
background: #fafafa;
}
/* Documento Legal */
.termos-documento {
background: #ffffff;
border-radius: 20px;
padding: 60px 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 102, 204, 0.1);
margin-bottom: 40px;
}
.termo-secao {
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
}
.termo-secao:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.termo-titulo {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.8rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 25px;
position: relative;
}
.termo-numero {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 800;
flex-shrink: 0;
}
.termo-conteudo {
margin-left: 60px;
}
.termo-conteudo p {
font-size: 1.1rem;
line-height: 1.7;
color: #333;
margin-bottom: 20px;
text-align: justify;
}
.termo-conteudo strong {
color: #1a3246;
font-weight: 700;
}
/* Listas Estilizadas */
.lista-definicoes,
.lista-obrigacoes,
.lista-limitacoes {
list-style: none;
padding: 0;
margin: 20px 0;
}
.lista-definicoes li,
.lista-obrigacoes li,
.lista-limitacoes li {
padding: 12px 0;
padding-left: 25px;
position: relative;
font-size: 1.05rem;
line-height: 1.6;
color: #333;
}
.lista-definicoes li::before,
.lista-obrigacoes li::before,
.lista-limitacoes li::before {
content: '▶';
position: absolute;
left: 0;
color: #1a3246;
font-size: 0.8rem;
}
/* Componentes Especiais */
.destaque-legal {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
border-left: 4px solid #ffc107;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.destaque-legal i {
color: #ffc107;
margin-right: 10px;
font-size: 1.2rem;
}
.aviso-importante {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
border-left: 4px solid #dc3545;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.aviso-importante h4 {
color: #dc3545;
font-size: 1.2rem;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.responsabilidade-nota {
background: rgba(0, 102, 204, 0.1);
border-left: 4px solid #1a3246;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
}
/* Grids de Serviços e Componentes */
.servicos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.servico-item {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: rgba(0, 102, 204, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.servico-item:hover {
background: rgba(0, 102, 204, 0.1);
transform: translateY(-2px);
}
.servico-item i {
color: #1a3246;
font-size: 1.3rem;
}
.servico-item span {
font-weight: 600;
color: #333;
}
/* Proteção de Dados */
.dados-protecao {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.protecao-item {
display: flex;
gap: 15px;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.protecao-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.protecao-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.protecao-texto h5 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.protecao-texto p {
font-size: 0.95rem;
color: #666;
margin: 0;
line-height: 1.5;
}
/* Propriedade Intelectual */
.propriedade-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.propriedade-item {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(0, 102, 204, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.propriedade-item:hover {
background: rgba(0, 102, 204, 0.1);
transform: translateY(-2px);
}
.propriedade-item i {
color: #1a3246;
font-size: 1.5rem;
width: 30px;
text-align: center;
}
.propriedade-item h5 {
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.propriedade-item p {
color: #666;
margin: 0;
font-size: 0.9rem;
}
.uso-permitido {
background: rgba(40, 167, 69, 0.1);
border-left: 4px solid #28a745;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
color: #155724;
}
/* Processo de Modificações */
.modificacoes-processo {
display: flex;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
}
.processo-step {
flex: 1;
min-width: 200px;
text-align: center;
padding: 25px 15px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.processo-step:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.step-numero {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
margin: 0 auto 15px;
}
.step-conteudo h5 {
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.step-conteudo p {
color: #666;
margin: 0;
font-size: 0.9rem;
}
.continuidade-uso {
background: rgba(0, 102, 204, 0.1);
border-left: 4px solid #1a3246;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
color: #1a3246;
}
/* Legislação Aplicável */
.legislacao-aplicavel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 25px 0;
}
.lei-item {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.lei-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.lei-item i {
color: #1a3246;
font-size: 1.5rem;
width: 30px;
text-align: center;
}
.lei-item h5 {
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
font-size: 1rem;
}
.lei-item p {
color: #666;
margin: 0;
font-size: 0.85rem;
}
/* Contato Termos */
.contato-termos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.contato-item {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(37, 211, 102, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.contato-item:hover {
background: rgba(37, 211, 102, 0.15);
transform: translateY(-2px);
}
.contato-item i {
color: #f59e0b;
font-size: 1.3rem;
width: 30px;
text-align: center;
}
.contato-item h5 {
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.contato-item p {
color: #666;
margin: 0;
font-size: 0.95rem;
}
/* Link Política */
.link-politica {
color: #1a3246;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.link-politica:hover {
color: #1a3246;
text-decoration: underline;
}
/* Seção CTA Final */
.termos-cta-section {
padding: 80px 0;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
color: white;
text-align: center;
}
.cta-content {
max-width: 600px;
margin: 0 auto;
}
.cta-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
font-size: 2rem;
backdrop-filter: blur(10px);
}
.cta-titulo {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-texto {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0.9;
}
.cta-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-whatsapp,
.btn-cta-contato {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.btn-cta-whatsapp {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.btn-cta-whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
.btn-cta-contato {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-cta-contato:hover {
background: white;
color: #1a3246;
text-decoration: none;
transform: translateY(-3px);
}
/* Animações Termos - Seguindo Padrão */
.hero-content-termos > *:nth-child(odd) {
animation: slideInLeft 0.8s ease-out forwards;
}
.hero-content-termos > *:nth-child(even) {
animation: slideInRight 0.8s ease-out forwards;
}
.hero-content-termos .badge-institucional {
animation: fadeInUp 0.8s ease-out 0.1s forwards;
}
.hero-content-termos .titulo-termos {
animation: slideInLeft 1s ease-out 0.2s forwards;
}
.hero-content-termos .subtitulo-termos {
animation: slideInLeft 0.8s ease-out 0.3s forwards;
}
.hero-content-termos .info-rapidas {
animation: fadeInUp 0.8s ease-out 0.4s forwards;
}
.hero-content-termos .hero-actions-termos {
animation: fadeInUp 0.8s ease-out 0.5s forwards;
}
.hero-imagem-wrapper {
animation: slideInRight 1s ease-out 0.3s forwards;
}
.termo-secao {
animation: fadeInUp 0.8s ease-out forwards;
animation-fill-mode: both;
}
.termo-secao:nth-child(1) { animation-delay: 0.1s; }
.termo-secao:nth-child(2) { animation-delay: 0.2s; }
.termo-secao:nth-child(3) { animation-delay: 0.3s; }
.termo-secao:nth-child(4) { animation-delay: 0.4s; }
.termo-secao:nth-child(5) { animation-delay: 0.5s; }
.termo-secao:nth-child(6) { animation-delay: 0.6s; }
.termo-secao:nth-child(7) { animation-delay: 0.7s; }
.termo-secao:nth-child(8) { animation-delay: 0.8s; }
.termo-secao:nth-child(9) { animation-delay: 0.9s; }
.termo-secao:nth-child(10) { animation-delay: 1.0s; }
/* Responsividade Termos - Seguindo Padrão */
@media (max-width: 1199.98px) {
.titulo-termos {
font-size: 2.5rem;
}
.termos-conteudo-section {
padding: 80px 0;
}
.termos-documento {
padding: 50px 30px;
}
}
@media (max-width: 991.98px) {
.termos-hero {
padding: 80px 0;
min-height: auto;
}
.titulo-termos {
font-size: 2.5rem;
}
.titulo-termos::after {
width: 60px;
}
.subtitulo-termos {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.info-item {
padding: 12px;
margin-bottom: 1rem;
}
.hero-actions-termos {
gap: 15px;
margin-top: 2rem;
}
.termos-conteudo-section {
padding: 60px 0;
}
.termo-conteudo {
margin-left: 0;
}
.termo-titulo {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.modificacoes-processo {
flex-direction: column;
}
}
@media (max-width: 767.98px) {
.termos-hero {
padding: 60px 0;
}
.titulo-termos {
font-size: 2rem;
}
.titulo-termos::after {
width: 50px;
height: 3px;
}
.subtitulo-termos {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.info-rapidas {
margin-bottom: 2rem;
}
.info-item {
padding: 12px;
margin-bottom: 1rem;
}
.info-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-termos {
flex-direction: column;
gap: 12px;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
padding: 14px 28px;
font-size: 0.9rem;
}
.termos-conteudo-section {
padding: 40px 0;
}
.termos-documento {
padding: 40px 20px;
}
.termo-titulo {
font-size: 1.5rem;
}
.termo-conteudo p {
font-size: 1rem;
}
.servicos-grid,
.dados-protecao,
.propriedade-grid,
.legislacao-aplicavel,
.contato-termos {
grid-template-columns: 1fr;
}
.cta-titulo {
font-size: 2rem;
}
.cta-texto {
font-size: 1.1rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 575.98px) {
.termos-hero {
padding: 40px 0;
}
.titulo-termos {
font-size: 1.8rem;
}
.badge-institucional {
padding: 10px 16px;
font-size: 0.8rem;
margin-bottom: 1.5rem;
}
.info-item {
padding: 10px;
margin-bottom: 0.8rem;
}
.info-texto strong {
font-size: 1rem;
}
.termos-conteudo-section {
padding: 30px 0;
}
.termos-documento {
padding: 30px 15px;
}
.termo-titulo {
font-size: 1.3rem;
}
.termo-numero {
width: 35px;
height: 35px;
font-size: 1rem;
}
.termo-conteudo p {
font-size: 0.95rem;
}
.cta-titulo {
font-size: 1.8rem;
}
.btn-cta-whatsapp,
.btn-cta-contato {
padding: 14px 24px;
font-size: 0.9rem;
}
}
/* Acessibilidade Termos - Seguindo Padrão */
@media (prefers-reduced-motion: reduce) {
.termos-hero *,
.termos-conteudo-section *,
.info-item,
.info-item:hover,
.hero-actions-termos *,
.termo-secao {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.titulo-termos,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
background: #000 !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.badge-institucional,
.secao-badge {
border: 2px solid #000 !important;
color: #000 !important;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais,
.btn-cta-whatsapp,
.btn-cta-contato {
border: 2px solid #000 !important;
}
.termos-documento,
.info-item,
.protecao-item,
.processo-step,
.lei-item {
border: 2px solid #000 !important;
}
}
/* ===== FIM DA PÁGINA TERMOS DE USO ===== */
/* ===== PÁGINA POLÍTICA DE PRIVACIDADE - SEGUINDO PADRÃO FRONTEND RDS ===== */
/* Hero Section Privacidade - Seguindo Padrão */
.privacidade-hero {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-content-privacidade {
position: relative;
z-index: 3;
}
.titulo-privacidade {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 1.5rem;
letter-spacing: -1px;
position: relative;
}
.titulo-privacidade::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #1a3246);
border-radius: 2px;
animation: lineGrow 2s ease-in-out;
}
.subtitulo-privacidade {
font-size: 1.25rem;
line-height: 1.6;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
}
.subtitulo-privacidade strong {
color: #1a3246;
font-weight: 700;
}
/* Informações LGPD */
.lgpd-info {
margin-bottom: 3rem;
}
.lgpd-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border-left: 4px solid #f59e0b;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.lgpd-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.15);
}
.lgpd-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.lgpd-texto {
display: flex;
flex-direction: column;
}
.lgpd-texto strong {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 4px;
}
.lgpd-texto span {
font-size: 0.9rem;
color: #666;
}
/* Hero Actions Privacidade */
.hero-actions-privacidade {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Seção Conteúdo Privacidade - Seguindo Padrão */
.privacidade-conteudo-section {
padding: 100px 0;
background: #fafafa;
}
/* Documento Política */
.privacidade-documento {
background: #ffffff;
border-radius: 20px;
padding: 60px 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 102, 204, 0.1);
margin-bottom: 40px;
}
.politica-secao {
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
}
.politica-secao:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.politica-titulo {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.8rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 25px;
position: relative;
}
.politica-numero {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 800;
flex-shrink: 0;
}
.politica-conteudo {
margin-left: 60px;
}
.politica-conteudo p {
font-size: 1.1rem;
line-height: 1.7;
color: #333;
margin-bottom: 20px;
text-align: justify;
}
.politica-conteudo strong {
color: #1a3246;
font-weight: 700;
}
/* Componente Destaque LGPD */
.destaque-lgpd {
background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(18, 140, 126, 0.05));
border-left: 4px solid #f59e0b;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.destaque-lgpd i {
color: #f59e0b;
margin-right: 10px;
font-size: 1.2rem;
}
/* Tipos de Dados */
.dados-tipos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 30px 0;
}
.tipo-dados {
display: flex;
gap: 15px;
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.tipo-dados:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.tipo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.tipo-info h5 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.lista-dados {
list-style: none;
padding: 0;
margin: 0;
}
.lista-dados li {
padding: 8px 0;
padding-left: 20px;
position: relative;
font-size: 0.95rem;
line-height: 1.5;
color: #333;
}
.lista-dados li::before {
content: '•';
position: absolute;
left: 0;
color: #1a3246;
font-weight: bold;
}
/* Finalidades Grid */
.finalidades-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.finalidade-card {
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.finalidade-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.finalidade-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.finalidade-header i {
color: #1a3246;
font-size: 1.3rem;
}
.finalidade-header h5 {
font-weight: 700;
color: #1a1a1a;
margin: 0;
}
.finalidade-lista {
list-style: none;
padding: 0;
margin: 0;
}
.finalidade-lista li {
padding: 8px 0;
padding-left: 20px;
position: relative;
font-size: 0.95rem;
line-height: 1.5;
color: #333;
}
.finalidade-lista li::before {
content: '✓';
position: absolute;
left: 0;
color: #f59e0b;
font-weight: bold;
}
/* Bases Legais */
.bases-legais {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.base-legal-item {
display: flex;
gap: 15px;
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.base-legal-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.base-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.base-texto h5 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.base-texto p {
font-size: 0.95rem;
color: #666;
margin-bottom: 8px;
line-height: 1.5;
}
.base-artigo {
font-size: 0.85rem;
color: #1a3246;
font-weight: 600;
}
/* Compartilhamento */
.compartilhamento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.compartilhamento-item {
text-align: center;
padding: 25px;
background: rgba(0, 102, 204, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.compartilhamento-item:hover {
background: rgba(0, 102, 204, 0.1);
transform: translateY(-3px);
}
.compartilhamento-item i {
color: #1a3246;
font-size: 2rem;
margin-bottom: 15px;
display: block;
}
.compartilhamento-item h5 {
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
}
.compartilhamento-item p {
color: #666;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
.garantias-compartilhamento {
background: rgba(37, 211, 102, 0.1);
border-left: 4px solid #f59e0b;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.garantias-compartilhamento h5 {
color: #128c7e;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.lista-garantias {
list-style: none;
padding: 0;
margin: 0;
}
.lista-garantias li {
padding: 8px 0;
padding-left: 25px;
position: relative;
font-size: 1rem;
line-height: 1.6;
color: #333;
}
.lista-garantias li::before {
content: '🛡️';
position: absolute;
left: 0;
font-size: 0.9rem;
}
/* Direitos Grid */
.direitos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.direito-card {
display: flex;
gap: 15px;
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.direito-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.direito-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.direito-info h5 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.direito-info p {
font-size: 0.95rem;
color: #666;
margin-bottom: 8px;
line-height: 1.5;
}
.direito-artigo {
font-size: 0.85rem;
color: #f59e0b;
font-weight: 600;
}
.como-exercer {
background: rgba(0, 102, 204, 0.1);
border-left: 4px solid #1a3246;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.como-exercer h5 {
color: #1a3246;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
/* Segurança */
.seguranca-medidas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.medida-seguranca {
display: flex;
gap: 15px;
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.medida-seguranca:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.medida-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #dc3545, #a71e2a);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.medida-content h5 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.medida-content p {
font-size: 0.95rem;
color: #666;
margin: 0;
line-height: 1.5;
}
.incidente-seguranca {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
border-left: 4px solid #ffc107;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.incidente-seguranca h5 {
color: #e0a800;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
/* Retenção */
.retencao-periodos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 30px 0;
}
.periodo-retencao {
padding: 25px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.periodo-retencao:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.periodo-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.periodo-header i {
color: #1a3246;
font-size: 1.3rem;
}
.periodo-header h5 {
font-weight: 700;
color: #1a1a1a;
margin: 0;
}
.periodo-retencao p {
color: #666;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
.exclusao-automatica {
background: rgba(40, 167, 69, 0.1);
border-left: 4px solid #28a745;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.exclusao-automatica h5 {
color: #1e7e34;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
/* Processo de Alteração */
.processo-alteracao {
display: flex;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
}
.alteracao-step {
flex: 1;
min-width: 200px;
text-align: center;
padding: 25px 15px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.alteracao-step:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.step-numero {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
margin: 0 auto 15px;
}
.step-conteudo h5 {
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.step-conteudo p {
color: #666;
margin: 0;
font-size: 0.9rem;
}
.versao-atual {
background: rgba(0, 102, 204, 0.1);
border-left: 4px solid #1a3246;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.versao-atual h5 {
color: #1a3246;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
/* DPO Contato */
.dpo-contato {
background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(18, 140, 126, 0.05));
border-radius: 12px;
padding: 30px;
margin: 25px 0;
}
.dpo-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(37, 211, 102, 0.2);
}
.dpo-avatar {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
.dpo-dados h5 {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.dpo-dados p {
color: #666;
margin: 0;
}
.dpo-canais {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.canal-dpo {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
}
.canal-dpo i {
color: #f59e0b;
font-size: 1.2rem;
}
.canal-dpo h6 {
font-weight: 600;
color: #1a1a1a;
margin-bottom: 5px;
}
.canal-dpo p {
color: #666;
margin: 0;
font-size: 0.9rem;
}
.anpd-info {
background: rgba(0, 102, 204, 0.1);
border-left: 4px solid #1a3246;
padding: 20px;
border-radius: 8px;
margin: 25px 0;
}
.anpd-info h5 {
color: #1a3246;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.link-anpd {
color: #1a3246;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.link-anpd:hover {
color: #1a3246;
text-decoration: underline;
}
/* Seção CTA Final Privacidade */
.privacidade-cta-section {
padding: 80px 0;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
text-align: center;
}
/* Animações Privacidade - Seguindo Padrão */
.hero-content-privacidade > *:nth-child(odd) {
animation: slideInLeft 0.8s ease-out forwards;
}
.hero-content-privacidade > *:nth-child(even) {
animation: slideInRight 0.8s ease-out forwards;
}
.hero-content-privacidade .badge-institucional {
animation: fadeInUp 0.8s ease-out 0.1s forwards;
}
.hero-content-privacidade .titulo-privacidade {
animation: slideInLeft 1s ease-out 0.2s forwards;
}
.hero-content-privacidade .subtitulo-privacidade {
animation: slideInLeft 0.8s ease-out 0.3s forwards;
}
.hero-content-privacidade .lgpd-info {
animation: fadeInUp 0.8s ease-out 0.4s forwards;
}
.hero-content-privacidade .hero-actions-privacidade {
animation: fadeInUp 0.8s ease-out 0.5s forwards;
}
.hero-imagem-wrapper {
animation: slideInRight 1s ease-out 0.3s forwards;
}
.politica-secao {
animation: fadeInUp 0.8s ease-out forwards;
animation-fill-mode: both;
}
.politica-secao:nth-child(1) { animation-delay: 0.1s; }
.politica-secao:nth-child(2) { animation-delay: 0.2s; }
.politica-secao:nth-child(3) { animation-delay: 0.3s; }
.politica-secao:nth-child(4) { animation-delay: 0.4s; }
.politica-secao:nth-child(5) { animation-delay: 0.5s; }
.politica-secao:nth-child(6) { animation-delay: 0.6s; }
.politica-secao:nth-child(7) { animation-delay: 0.7s; }
.politica-secao:nth-child(8) { animation-delay: 0.8s; }
.politica-secao:nth-child(9) { animation-delay: 0.9s; }
.politica-secao:nth-child(10) { animation-delay: 1.0s; }
/* Responsividade Privacidade - Seguindo Padrão */
@media (max-width: 1199.98px) {
.titulo-privacidade {
font-size: 2.5rem;
}
.privacidade-conteudo-section {
padding: 80px 0;
}
.privacidade-documento {
padding: 50px 30px;
}
}
@media (max-width: 991.98px) {
.privacidade-hero {
padding: 80px 0;
min-height: auto;
}
.titulo-privacidade {
font-size: 2.5rem;
}
.titulo-privacidade::after {
width: 60px;
}
.subtitulo-privacidade {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.lgpd-item {
padding: 12px;
margin-bottom: 1rem;
}
.hero-actions-privacidade {
gap: 15px;
margin-top: 2rem;
}
.privacidade-conteudo-section {
padding: 60px 0;
}
.politica-conteudo {
margin-left: 0;
}
.politica-titulo {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.processo-alteracao {
flex-direction: column;
}
}
@media (max-width: 767.98px) {
.privacidade-hero {
padding: 60px 0;
}
.titulo-privacidade {
font-size: 2rem;
}
.titulo-privacidade::after {
width: 50px;
height: 3px;
}
.subtitulo-privacidade {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.lgpd-info {
margin-bottom: 2rem;
}
.lgpd-item {
padding: 12px;
margin-bottom: 1rem;
}
.lgpd-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-privacidade {
flex-direction: column;
gap: 12px;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
padding: 14px 28px;
font-size: 0.9rem;
}
.privacidade-conteudo-section {
padding: 40px 0;
}
.privacidade-documento {
padding: 40px 20px;
}
.politica-titulo {
font-size: 1.5rem;
}
.politica-conteudo p {
font-size: 1rem;
}
.dados-tipos,
.finalidades-grid,
.bases-legais,
.direitos-grid,
.seguranca-medidas,
.retencao-periodos,
.dpo-canais {
grid-template-columns: 1fr;
}
.cta-titulo {
font-size: 2rem;
}
.cta-texto {
font-size: 1.1rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 575.98px) {
.privacidade-hero {
padding: 40px 0;
}
.titulo-privacidade {
font-size: 1.8rem;
}
.badge-institucional {
padding: 10px 16px;
font-size: 0.8rem;
margin-bottom: 1.5rem;
}
.lgpd-item {
padding: 10px;
margin-bottom: 0.8rem;
}
.lgpd-texto strong {
font-size: 1rem;
}
.privacidade-conteudo-section {
padding: 30px 0;
}
.privacidade-documento {
padding: 30px 15px;
}
.politica-titulo {
font-size: 1.3rem;
}
.politica-numero {
width: 35px;
height: 35px;
font-size: 1rem;
}
.politica-conteudo p {
font-size: 0.95rem;
}
.cta-titulo {
font-size: 1.8rem;
}
.btn-cta-whatsapp,
.btn-cta-contato {
padding: 14px 24px;
font-size: 0.9rem;
}
.dpo-info {
flex-direction: column;
text-align: center;
}
.dpo-avatar {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* Acessibilidade Privacidade - Seguindo Padrão */
@media (prefers-reduced-motion: reduce) {
.privacidade-hero *,
.privacidade-conteudo-section *,
.lgpd-item,
.lgpd-item:hover,
.hero-actions-privacidade *,
.politica-secao {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.titulo-privacidade,
.titulo-secao {
color: #000 !important;
}
.texto-destaque,
.titulo-destaque {
background: #000 !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.badge-institucional,
.secao-badge {
border: 2px solid #000 !important;
color: #000 !important;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais,
.btn-cta-whatsapp,
.btn-cta-contato {
border: 2px solid #000 !important;
}
.privacidade-documento,
.lgpd-item,
.tipo-dados,
.finalidade-card,
.direito-card {
border: 2px solid #000 !important;
}
}
/* ===== FIM DA PÁGINA POLÍTICA DE PRIVACIDADE ===== */
/* ===== PÁGINA FROTA - ESTILOS ESPECÍFICOS ===== */
/* ===== FROTA HERO SECTION ===== */
.frota-hero {
background: linear-gradient(135deg, rgba(0, 102, 204, 0.03) 0%, rgba(0, 68, 153, 0.06) 100%);
padding: var(--espacamento-secao-desktop) 0;
position: relative;
overflow: hidden;
}
.hero-content-frota {
position: relative;
z-index: 2;
}
.hero-content-frota .badge-institucional {
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
color: white;
padding: 12px 24px;
border-radius: var(--border-radius-pequeno);
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
animation: slideInLeft 0.8s ease-out;
}
.titulo-frota {
font-size: var(--fonte-titulo-h1-desktop);
font-weight: 700;
color: var(--cor-azul-escuro);
line-height: 1.2;
margin-bottom: 1.5rem;
animation: slideInLeft 0.8s ease-out 0.2s both;
}
.titulo-frota .texto-destaque {
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitulo-frota {
font-size: var(--fonte-subtitulo-desktop);
color: var(--cor-texto-secundario);
line-height: 1.6;
margin-bottom: 2rem;
animation: slideInLeft 0.8s ease-out 0.4s both;
}
/* Estatísticas da Frota */
.frota-stats {
display: flex;
gap: 2rem;
margin-bottom: 2.5rem;
animation: slideInUp 0.8s ease-out 0.6s both;
}
.stat-frota {
display: flex;
align-items: center;
gap: 1rem;
background: white;
padding: 1.5rem;
border-radius: var(--border-radius-medio);
box-shadow: 0 8px 32px rgba(0, 102, 204, 0.1);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.stat-frota:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 102, 204, 0.15);
}
.stat-icon-frota {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
border-radius: var(--border-radius-pequeno);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.stat-info-frota strong {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--cor-azul-escuro);
line-height: 1;
}
.stat-info-frota span {
font-size: 0.9rem;
color: var(--cor-texto-secundario);
font-weight: 500;
}
/* Hero Actions */
.hero-actions-frota {
display: flex;
gap: 1rem;
align-items: center;
animation: slideInUp 0.8s ease-out 0.8s both;
}
/* ===== GALERIA DA FROTA ===== */
.frota-galeria-section {
padding: var(--espacamento-secao-desktop) 0;
background: #fafbfc;
}
/* Filtros da Frota */
.frota-filtros {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.filtro-btn {
background: white;
border: 2px solid #e2e8f0;
color: var(--cor-texto-secundario);
padding: 0.8rem 1.5rem;
border-radius: var(--border-radius-botao);
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.filtro-btn:hover,
.filtro-btn.active {
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
color: white;
border-color: var(--cor-azul-primario);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
}
/* Cards de Veículos */
.frota-item {
animation: fadeInUp 0.6s ease-out;
}
.frota-item:nth-child(1) { animation-delay: 0.1s; }
.frota-item:nth-child(2) { animation-delay: 0.2s; }
.frota-item:nth-child(3) { animation-delay: 0.3s; }
.frota-item:nth-child(4) { animation-delay: 0.4s; }
.frota-item:nth-child(5) { animation-delay: 0.5s; }
.frota-item:nth-child(6) { animation-delay: 0.6s; }
.veiculo-card {
background: white;
border-radius: var(--border-radius-grande);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0, 102, 204, 0.1);
}
.veiculo-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
}
.veiculo-image-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
}
.veiculo-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
cursor: pointer;
}
.veiculo-card:hover .veiculo-image {
transform: scale(1.05);
}
.veiculo-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.9) 0%, rgba(0, 68, 153, 0.9) 100%);
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
opacity: 0;
transition: all 0.3s ease;
}
.veiculo-card:hover .veiculo-overlay {
opacity: 1;
}
.veiculo-info h4 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.veiculo-info p {
font-size: 1rem;
opacity: 0.9;
}
.veiculo-actions {
display: flex;
justify-content: center;
}
.btn-veiculo-view {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-veiculo-view:hover {
background: white;
color: var(--cor-azul-primario);
transform: scale(1.1);
}
/* Badges dos Veículos */
.veiculo-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--border-radius-pequeno);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.3rem;
box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
}
.veiculo-badge-premium {
background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
box-shadow: 0 4px 16px rgba(255, 140, 0, 0.3);
}
.veiculo-badge-aqua {
background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
box-shadow: 0 4px 16px rgba(0, 188, 212, 0.3);
}
.veiculo-badge-sport {
background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.3);
}
/* Conteúdo dos Cards */
.veiculo-content {
padding: 1.5rem;
}
.veiculo-titulo {
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-azul-escuro);
margin-bottom: 1rem;
}
.veiculo-specs {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.spec-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
color: var(--cor-texto-secundario);
background: #f8fafc;
padding: 0.4rem 0.8rem;
border-radius: var(--border-radius-pequeno);
border: 1px solid #e2e8f0;
}
.spec-item i {
color: var(--cor-azul-primario);
font-size: 0.8rem;
}
/* ===== SEÇÃO CARACTERÍSTICAS ===== */
.frota-caracteristicas-section {
padding: var(--espacamento-secao-desktop) 0;
background: white;
}
.caracteristica-card {
text-align: center;
padding: 2rem 1.5rem;
background: #fafbfc;
border-radius: var(--border-radius-grande);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
height: 100%;
animation: fadeInUp 0.6s ease-out;
}
.caracteristica-card:nth-child(1) { animation-delay: 0.1s; }
.caracteristica-card:nth-child(2) { animation-delay: 0.2s; }
.caracteristica-card:nth-child(3) { animation-delay: 0.3s; }
.caracteristica-card:nth-child(4) { animation-delay: 0.4s; }
.caracteristica-card:hover {
background: white;
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 102, 204, 0.1);
}
.caracteristica-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
transition: all 0.3s ease;
}
.caracteristica-card:hover .caracteristica-icon {
transform: scale(1.1) rotate(5deg);
}
.caracteristica-card h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-azul-escuro);
margin-bottom: 1rem;
}
.caracteristica-card p {
color: var(--cor-texto-secundario);
line-height: 1.6;
}
/* ===== FROTA CTA SECTION ===== */
.frota-cta-section {
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
padding: var(--espacamento-secao-desktop) 0;
position: relative;
overflow: hidden;
}
.frota-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
animation: floatingPattern 20s linear infinite;
}
.cta-content {
position: relative;
z-index: 2;
color: white;
animation: fadeInUp 0.8s ease-out;
}
.cta-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.cta-titulo {
font-size: var(--fonte-titulo-h2-desktop);
font-weight: 700;
margin-bottom: 1rem;
}
.cta-texto {
font-size: var(--fonte-subtitulo-desktop);
opacity: 0.9;
margin-bottom: 2rem;
line-height: 1.6;
}
.cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn-cta-whatsapp {
background: linear-gradient(135deg, var(--cor-whatsapp) 0%, #128c7e 100%);
color: white;
padding: 1rem 2rem;
border-radius: var(--border-radius-botao);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.btn-cta-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
color: white;
}
.btn-cta-contato {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
padding: 1rem 2rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--border-radius-botao);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.btn-cta-contato:hover {
background: white;
color: var(--cor-azul-primario);
transform: translateY(-2px);
}
/* ===== MODAL CUSTOMIZAÇÃO ===== */
.modal-content {
border-radius: var(--border-radius-grande);
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-header {
border-bottom: 1px solid #e2e8f0;
background: #fafbfc;
border-radius: var(--border-radius-grande) var(--border-radius-grande) 0 0;
}
.modal-title {
font-weight: 700;
color: var(--cor-azul-escuro);
}
.modal-body {
padding: 2rem;
}
#modalImage {
border-radius: var(--border-radius-medio);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.modal-description {
color: var(--cor-texto-secundario);
line-height: 1.6;
margin-bottom: 0;
}
.modal-footer {
border-top: 1px solid #e2e8f0;
background: #fafbfc;
border-radius: 0 0 var(--border-radius-grande) var(--border-radius-grande);
}
/* ===== RESPONSIVIDADE FROTA ===== */
@media (max-width: 992px) {
.frota-hero {
padding: var(--espacamento-secao-tablet) 0;
}
.titulo-frota {
font-size: var(--fonte-titulo-h1-tablet);
}
.frota-stats {
flex-direction: column;
gap: 1rem;
}
.stat-frota {
padding: 1rem;
}
.hero-actions-frota {
flex-direction: column;
align-items: stretch;
}
.frota-galeria-section {
padding: var(--espacamento-secao-tablet) 0;
}
.frota-caracteristicas-section {
padding: var(--espacamento-secao-tablet) 0;
}
.frota-cta-section {
padding: var(--espacamento-secao-tablet) 0;
}
}
@media (max-width: 768px) {
.frota-hero {
padding: var(--espacamento-secao-mobile) 0;
}
.titulo-frota {
font-size: var(--fonte-titulo-h1-mobile);
}
.subtitulo-frota {
font-size: var(--fonte-subtitulo-mobile);
}
.frota-filtros {
gap: 0.5rem;
}
.filtro-btn {
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.veiculo-specs {
flex-direction: column;
}
.cta-actions {
flex-direction: column;
}
.frota-galeria-section {
padding: var(--espacamento-secao-mobile) 0;
}
.frota-caracteristicas-section {
padding: var(--espacamento-secao-mobile) 0;
}
.frota-cta-section {
padding: var(--espacamento-secao-mobile) 0;
}
.cta-titulo {
font-size: var(--fonte-titulo-h2-mobile);
}
.cta-texto {
font-size: var(--fonte-subtitulo-mobile);
}
}
/* ===== ACESSIBILIDADE ===== */
@media (prefers-reduced-motion: reduce) {
.frota-item,
.caracteristica-card,
.veiculo-card,
.hero-content-frota > *,
.hero-imagem-wrapper,
.cta-content {
animation: none;
}
.veiculo-card:hover,
.caracteristica-card:hover {
transform: none;
}
}
@media (prefers-contrast: high) {
.veiculo-card {
border: 2px solid var(--cor-azul-primario);
}
.filtro-btn {
border-width: 3px;
}
.caracteristica-card {
border: 2px solid #e2e8f0;
}
}
/* ===== FIM DA PÁGINA FROTA ===== */
/* ===== PÁGINA SERVIÇOS - ESTILOS ESPECÍFICOS ===== */
/* ===== SERVICOS HERO SECTION ===== */
.servicos-hero {
background: linear-gradient(135deg, rgba(0, 102, 204, 0.03) 0%, rgba(0, 68, 153, 0.06) 100%);
padding: var(--espacamento-secao-desktop) 0;
position: relative;
overflow: hidden;
}
.hero-content-servicos {
position: relative;
z-index: 2;
}
.titulo-servicos {
font-size: 3.5rem;
font-weight: 800;
color: #1a1a1a;
line-height: 1.1;
margin-bottom: 2rem;
animation: slideInLeft 0.8s ease-out;
}
.titulo-servicos .texto-destaque {
background: linear-gradient(135deg, var(--cor-azul-primario), var(--cor-azul-escuro));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitulo-servicos {
font-size: 1.25rem;
color: var(--cor-texto-secundario);
line-height: 1.6;
margin-bottom: 2.5rem;
animation: slideInLeft 0.8s ease-out 0.2s;
animation-fill-mode: both;
}
.subtitulo-servicos strong {
color: var(--cor-azul-primario);
font-weight: 700;
}
/* Estatísticas Hero */
.servicos-stats {
display: flex;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
animation: slideInUp 0.8s ease-out 0.4s;
animation-fill-mode: both;
}
.stat-servico {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius-medio);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.stat-servico:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}
.stat-icon-servico {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--cor-azul-primario), var(--cor-azul-escuro));
border-radius: var(--border-radius-medio);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.stat-info-servico strong {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: #1a1a1a;
line-height: 1;
}
.stat-info-servico span {
display: block;
font-size: 0.875rem;
color: var(--cor-texto-secundario);
font-weight: 500;
}
.hero-actions-servicos {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
animation: slideInUp 0.8s ease-out 0.6s;
animation-fill-mode: both;
}
/* ===== SEÇÃO LISTA DE SERVIÇOS ===== */
.servicos-lista-section {
padding: var(--espacamento-secao-desktop) 0;
background: #ffffff;
position: relative;
}
.card-servico {
background: #ffffff;
border-radius: var(--border-radius-grande);
padding: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 1px solid rgba(0, 102, 204, 0.1);
position: relative;
overflow: hidden;
height: 100%;
animation: slideInUp 0.6s ease-out;
animation-fill-mode: both;
}
.card-servico:nth-child(1) { animation-delay: 0.1s; }
.card-servico:nth-child(2) { animation-delay: 0.2s; }
.card-servico:nth-child(3) { animation-delay: 0.3s; }
.card-servico:nth-child(4) { animation-delay: 0.4s; }
.card-servico:nth-child(5) { animation-delay: 0.5s; }
.card-servico:nth-child(6) { animation-delay: 0.6s; }
.card-servico:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 102, 204, 0.15);
}
.servico-icone-wrapper {
position: relative;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 68, 153, 0.15));
padding: 30px;
text-align: center;
}
.servico-icone {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--cor-azul-primario), var(--cor-azul-escuro));
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.card-servico:hover .servico-icone {
transform: scale(1.1) rotate(5deg);
}
.servico-badge {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, var(--cor-whatsapp), #128c7e);
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.servico-content {
padding: 30px;
}
.servico-titulo {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1rem;
line-height: 1.3;
}
.servico-descricao {
font-size: 1rem;
color: var(--cor-texto-secundario);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.servico-descricao strong {
color: var(--cor-azul-primario);
font-weight: 600;
}
.servico-features {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.servico-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 0.95rem;
color: #555;
}
.servico-features li i {
color: var(--cor-whatsapp);
font-size: 0.875rem;
width: 16px;
}
.servico-actions {
margin-top: auto;
}
.btn-servico-whatsapp {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--cor-whatsapp), #128c7e);
color: white;
padding: 12px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
width: 100%;
justify-content: center;
}
.btn-servico-whatsapp:hover {
background: linear-gradient(135deg, #20c659, #0e6b5c);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
/* ===== SEÇÃO DIFERENCIAIS ===== */
.servicos-diferenciais-section {
padding: var(--espacamento-secao-desktop) 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f0f7ff 100%);
position: relative;
}
.diferencial-card {
text-align: center;
padding: 40px 25px;
background: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius-grande);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
transition: all 0.4s ease;
border: 1px solid rgba(0, 102, 204, 0.1);
height: 100%;
animation: slideInUp 0.6s ease-out;
animation-fill-mode: both;
}
.diferencial-card:nth-child(1) { animation-delay: 0.1s; }
.diferencial-card:nth-child(2) { animation-delay: 0.2s; }
.diferencial-card:nth-child(3) { animation-delay: 0.3s; }
.diferencial-card:nth-child(4) { animation-delay: 0.4s; }
.diferencial-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 102, 204, 0.12);
background: #ffffff;
}
.diferencial-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--cor-azul-primario), var(--cor-azul-escuro));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
margin: 0 auto 20px;
transition: all 0.3s ease;
}
.diferencial-card:hover .diferencial-icon {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}
.diferencial-card h4 {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.diferencial-card p {
font-size: 0.95rem;
color: var(--cor-texto-secundario);
line-height: 1.5;
margin: 0;
}
/* ===== SEÇÃO PROCESSO ===== */
.servicos-processo-section {
padding: var(--espacamento-secao-desktop) 0;
background: #ffffff;
position: relative;
}
.processo-timeline {
display: flex;
justify-content: space-between;
position: relative;
gap: 2rem;
flex-wrap: wrap;
}
.processo-timeline::before {
content: '';
position: absolute;
top: 35px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(135deg, var(--cor-azul-primario), var(--cor-azul-escuro));
z-index: 0;
}
.processo-step {
flex: 1;
min-width: 200px;
text-align: center;
position: relative;
z-index: 1;
animation: slideInUp 0.6s ease-out;
animation-fill-mode: both;
}
.processo-step:nth-child(1) { animation-delay: 0.1s; }
.processo-step:nth-child(2) { animation-delay: 0.2s; }
.processo-step:nth-child(3) { animation-delay: 0.3s; }
.processo-step:nth-child(4) { animation-delay: 0.4s; }
.step-numero {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--cor-azul-primario), var(--cor-azul-escuro));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
margin: 0 auto 20px;
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
border: 4px solid #ffffff;
transition: all 0.3s ease;
}
.processo-step:hover .step-numero {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
.step-content h4 {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
}
.step-content p {
font-size: 0.95rem;
color: var(--cor-texto-secundario);
line-height: 1.5;
margin: 0;
}
/* ===== SEÇÃO CTA FINAL ===== */
.servicos-cta-section {
padding: var(--espacamento-secao-desktop) 0;
background: linear-gradient(135deg, var(--cor-azul-primario) 0%, var(--cor-azul-escuro) 100%);
position: relative;
overflow: hidden;
}
.servicos-cta-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
animation: floatingDots 20s linear infinite;
}
@keyframes floatingDots {
0% { transform: translate(0, 0); }
100% { transform: translate(30px, 30px); }
}
.cta-content {
position: relative;
z-index: 2;
animation: slideInUp 0.8s ease-out;
}
.cta-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin: 0 auto 30px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.cta-titulo {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-titulo .titulo-destaque {
color: #ffd700;
}
.cta-texto {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 40px;
}
.cta-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-whatsapp,
.btn-cta-contato {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.btn-cta-whatsapp {
background: linear-gradient(135deg, var(--cor-whatsapp), #128c7e);
color: white;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.btn-cta-whatsapp:hover {
background: linear-gradient(135deg, #20c659, #0e6b5c);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
.btn-cta-contato {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-cta-contato:hover {
background: white;
color: var(--cor-azul-primario);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3);
text-decoration: none;
}
.cta-background-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 68, 153, 0.2) 50%, rgba(37, 211, 102, 0.1) 100%);
opacity: 0.5;
}
/* ===== RESPONSIVIDADE PÁGINA SERVIÇOS ===== */
/* Tablets */
@media (max-width: 1199.98px) {
.titulo-servicos {
font-size: 3rem;
}
.servicos-stats {
gap: 1.5rem;
}
.processo-timeline::before {
display: none;
}
}
@media (max-width: 991.98px) {
.servicos-hero {
padding: var(--espacamento-secao-tablet) 0;
}
.titulo-servicos {
font-size: 2.5rem;
}
.subtitulo-servicos {
font-size: 1.1rem;
}
.servicos-stats {
justify-content: center;
gap: 1rem;
}
.stat-servico {
flex: 1;
min-width: 150px;
}
.hero-actions-servicos {
justify-content: center;
gap: 1rem;
}
.servicos-lista-section,
.servicos-diferenciais-section,
.servicos-processo-section,
.servicos-cta-section {
padding: var(--espacamento-secao-tablet) 0;
}
.processo-timeline {
flex-direction: column;
gap: 3rem;
}
.cta-titulo {
font-size: 2.2rem;
}
.cta-texto {
font-size: 1.1rem;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.servicos-hero {
padding: var(--espacamento-secao-mobile) 0;
}
.titulo-servicos {
font-size: 2rem;
}
.subtitulo-servicos {
font-size: 1rem;
}
.servicos-stats {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.stat-servico {
width: 100%;
max-width: 300px;
}
.hero-actions-servicos {
flex-direction: column;
align-items: center;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
width: 100%;
max-width: 300px;
justify-content: center;
}
.servicos-lista-section,
.servicos-diferenciais-section,
.servicos-processo-section,
.servicos-cta-section {
padding: var(--espacamento-secao-mobile) 0;
}
.card-servico {
margin-bottom: 2rem;
}
.servico-icone-wrapper {
padding: 25px;
}
.servico-icone {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.servico-content {
padding: 25px;
}
.diferencial-card {
padding: 30px 20px;
}
.diferencial-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.step-numero {
width: 60px;
height: 60px;
font-size: 1.3rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.btn-cta-whatsapp,
.btn-cta-contato {
width: 100%;
max-width: 300px;
justify-content: center;
}
.cta-titulo {
font-size: 1.8rem;
}
.cta-texto {
font-size: 1rem;
}
}
/* Mobile Small */
@media (max-width: 575.98px) {
.titulo-servicos {
font-size: 1.8rem;
}
.servico-icone-wrapper {
padding: 20px;
}
.servico-content {
padding: 20px;
}
.diferencial-card {
padding: 25px 15px;
}
.cta-titulo {
font-size: 1.6rem;
}
}
/* Otimizações para Performance */
@media (prefers-reduced-motion: reduce) {
.card-servico,
.diferencial-card,
.processo-step,
.servicos-stats,
.hero-actions-servicos,
.cta-content {
animation: none !important;
}
.card-servico:hover,
.diferencial-card:hover,
.processo-step:hover .step-numero,
.servico-icone,
.diferencial-icon {
transform: none !important;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.card-servico {
border: 2px solid #000000;
}
.diferencial-card {
border: 2px solid #000000;
}
.btn-servico-whatsapp {
background: #128c7e;
border: 2px solid #ffffff;
}
.btn-cta-whatsapp {
background: #128c7e;
border: 2px solid #ffffff;
}
}
/* ===== FIM DA PÁGINA SERVIÇOS ===== */
/* ===== PÁGINA DE SERVIÇO - SERVICO.PHP ===== */
/* ===== BREADCRUMB NAVIGATION ===== */
.breadcrumb-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 1rem 0;
border-bottom: 1px solid rgba(0, 102, 204, 0.1);
}
.breadcrumb-nav {
margin: 0;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.875rem;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
content: '/';
margin: 0 0.75rem;
color: #6c757d;
font-weight: 300;
}
.breadcrumb-link {
color: #6c757d;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.375rem;
transition: all 0.3s ease;
}
.breadcrumb-link:hover {
color: #1a3246;
text-decoration: none;
}
.breadcrumb-link i {
font-size: 0.75rem;
}
.breadcrumb-current {
color: #1a3246;
font-weight: 600;
}
/* ===== HERO SECTION SERVIÇO ===== */
.servico-hero {
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e9ecef 100%);
padding: 3rem 0;
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.hero-content-servico {
position: relative;
z-index: 2;
}
.badge-institucional {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
animation: slideInLeft 0.8s ease;
}
.badge-institucional i {
font-size: 1rem;
}
.titulo-servico {
font-size: 3rem;
font-weight: 800;
color: #2c3e50;
line-height: 1.1;
margin-bottom: 1.5rem;
animation: slideInLeft 0.8s ease 0.2s both;
}
.texto-destaque {
background: linear-gradient(135deg, #1a3246, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #1a3246;
}
.subtitulo-servico {
font-size: 1.25rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 2rem;
animation: slideInLeft 0.8s ease 0.4s both;
}
/* ===== INFORMAÇÕES RÁPIDAS ===== */
.servico-info-rapidas {
margin: 2rem 0;
animation: fadeInUp 0.8s ease 0.6s both;
}
.info-item-servico {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
transition: all 0.3s ease;
}
.info-item-servico:hover {
transform: translateX(10px);
}
.info-icon-servico {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.2);
transition: all 0.3s ease;
}
.info-item-servico:hover .info-icon-servico {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
.info-texto-servico strong {
display: block;
color: #2c3e50;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.info-texto-servico span {
color: #6c757d;
font-size: 0.9rem;
}
/* ===== HERO ACTIONS ===== */
.hero-actions-servico {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
animation: fadeInUp 0.8s ease 0.8s both;
}
.btn-hero-whatsapp {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-hero-whatsapp::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-hero-whatsapp:hover::before {
left: 100%;
}
.btn-hero-whatsapp:hover {
background: linear-gradient(135deg, #128c7e 0%, #f59e0b 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
text-decoration: none;
color: white;
}
.btn-hero-saiba-mais {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: transparent;
color: #1a3246;
text-decoration: none;
border: 2px solid #1a3246;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-hero-saiba-mais:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
text-decoration: none;
}
.btn-hero-saiba-mais i {
font-size: 0.875rem;
transition: transform 0.3s ease;
}
.btn-hero-saiba-mais:hover i {
transform: translateY(2px);
}
/* ===== HERO IMAGE ===== */
.hero-imagem-wrapper {
position: relative;
z-index: 2;
animation: slideInRight 0.8s ease 0.4s both;
}
.hero-imagem-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.hero-imagem-container:hover {
transform: translateY(-10px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}
.hero-imagem {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.hero-imagem-container:hover .hero-imagem {
transform: scale(1.05);
}
.badge-servico-flutuante {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: float 3s ease-in-out infinite;
}
.badge-conteudo-servico {
display: flex;
align-items: center;
gap: 0.75rem;
}
.badge-conteudo-servico i {
font-size: 1.5rem;
color: #1a3246;
}
.badge-info-servico strong {
display: block;
color: #2c3e50;
font-size: 1.1rem;
font-weight: 700;
}
.badge-info-servico span {
color: #6c757d;
font-size: 0.875rem;
}
/* ===== BACKGROUND DECORATIVO ===== */
.hero-background-decorativo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.forma-bg-1,
.forma-bg-2 {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(37, 211, 102, 0.1));
}
.forma-bg-1 {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
animation: rotate 20s linear infinite;
}
.forma-bg-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: -100px;
animation: rotate 15s linear infinite reverse;
}
.particulas-flutuantes {
position: absolute;
width: 100%;
height: 100%;
}
.particula {
position: absolute;
width: 6px;
height: 6px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
border-radius: 50%;
animation: floatParticle 8s ease-in-out infinite;
}
.particula:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.particula:nth-child(2) { left: 80%; top: 30%; animation-delay: 2s; }
.particula:nth-child(3) { left: 30%; top: 70%; animation-delay: 4s; }
/* ===== SEÇÃO DESCRIÇÃO DO SERVIÇO ===== */
.servico-descricao-section {
padding: 5rem 0;
background: #ffffff;
}
.secao-badge {
text-align: center;
margin-bottom: 1rem;
}
.badge-text {
display: inline-block;
padding: 0.5rem 1.5rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.titulo-secao {
font-size: 2.5rem;
font-weight: 800;
color: #2c3e50;
text-align: center;
margin-bottom: 1rem;
}
.titulo-destaque {
background: linear-gradient(135deg, #1a3246, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #1a3246;
}
.subtitulo-secao {
font-size: 1.125rem;
color: #6c757d;
text-align: center;
line-height: 1.6;
margin-bottom: 3rem;
}
.servico-descricao-content {
padding: 2rem 0;
}
.descricao-texto h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.descricao-texto p {
color: #6c757d;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.servico-vantagens h4 {
color: #2c3e50;
font-size: 1.25rem;
font-weight: 700;
margin: 2rem 0 1rem;
}
.vantagens-lista {
list-style: none;
padding: 0;
}
.vantagens-lista li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
color: #6c757d;
}
.vantagens-lista i {
color: #f59e0b;
font-size: 1rem;
}
/* ===== ESPECIFICAÇÕES MELHORADAS ===== */
.servico-especificacoes {
background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #ffffff 100%);
border-radius: 25px;
padding: 2.5rem;
box-shadow: 0 15px 50px rgba(0, 102, 204, 0.08);
border: 1px solid rgba(0, 102, 204, 0.1);
position: relative;
overflow: hidden;
}
.servico-especificacoes::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
}
.servico-especificacoes h3 {
color: #2c3e50;
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 2.5rem;
text-align: center;
position: relative;
}
.servico-especificacoes h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
border-radius: 2px;
}
.spec-item {
background: white;
border-radius: 15px;
padding: 1.75rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(0, 102, 204, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.spec-item:last-child {
margin-bottom: 0;
}
.spec-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.02), rgba(37, 211, 102, 0.02));
opacity: 0;
transition: all 0.3s ease;
}
.spec-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 102, 204, 0.12);
border-color: rgba(0, 102, 204, 0.2);
}
.spec-item:hover::before {
opacity: 1;
}
.spec-header {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.spec-header i {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
font-size: 1.25rem;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.25);
transition: all 0.3s ease;
}
.spec-item:hover .spec-header i {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
}
.spec-header h5 {
color: #2c3e50;
font-weight: 700;
font-size: 1.125rem;
margin: 0;
transition: color 0.3s ease;
}
.spec-item:hover .spec-header h5 {
color: #1a3246;
}
.spec-item p {
color: #6c757d;
line-height: 1.7;
margin: 0;
font-size: 0.95rem;
position: relative;
z-index: 2;
}
/* Efeito especial para destaque */
.spec-item:nth-child(2) {
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}
.spec-item:nth-child(2) .spec-header i {
background: linear-gradient(135deg, #f59e0b, #128c7e);
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25);
}
.spec-item:nth-child(2):hover .spec-header i {
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}
.spec-item:nth-child(4) {
background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%);
}
.spec-item:nth-child(4) .spec-header i {
background: linear-gradient(135deg, #ff8c00, #ff6b00);
box-shadow: 0 4px 15px rgba(255, 140, 0, 0.25);
}
.spec-item:nth-child(4):hover .spec-header i {
box-shadow: 0 6px 20px rgba(255, 140, 0, 0.35);
}
/* ===== GALERIA DE FOTOS ===== */
.servico-galeria-section {
padding: 5rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.servico-galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.galeria-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.galeria-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.galeria-image-wrapper {
position: relative;
height: 250px;
overflow: hidden;
}
.galeria-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.galeria-card:hover .galeria-image {
transform: scale(1.1);
}
.galeria-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 102, 204, 0.9), rgba(37, 211, 102, 0.9));
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
opacity: 0;
transition: all 0.3s ease;
}
.galeria-card:hover .galeria-overlay {
opacity: 1;
}
.galeria-info {
color: white;
}
.galeria-item-titulo {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.galeria-item-descricao {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 1rem;
}
.galeria-capacidade {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.galeria-action {
text-align: center;
}
.btn-galeria-view {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: white;
color: #1a3246;
border: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-galeria-view:hover {
background: #1a3246;
color: white;
transform: scale(1.05);
}
.galeria-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a3246;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.galeria-play-btn:hover {
background: white;
transform: translate(-50%, -50%) scale(1.1);
}
.galeria-price-badge {
position: absolute;
top: 15px;
right: 15px;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
/* ===== CARACTERÍSTICAS ===== */
.servico-caracteristicas-section {
padding: 5rem 0;
background: white;
}
.caracteristica-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
}
.caracteristica-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.caracteristica-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.caracteristica-card:hover .caracteristica-icon {
transform: scale(1.1) rotate(5deg);
}
.caracteristica-card h4 {
color: #2c3e50;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
.caracteristica-card p {
color: #6c757d;
line-height: 1.6;
}
/* ===== CTA SECTION ===== */
.servico-cta-section {
padding: 5rem 0;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 50%, #f59e0b 100%);
position: relative;
overflow: hidden;
}
.cta-content {
text-align: center;
position: relative;
z-index: 2;
}
.cta-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin: 0 auto 2rem;
animation: pulse 2s infinite;
}
.cta-titulo {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 1rem;
}
.cta-texto {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 2rem;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.btn-cta-whatsapp,
.btn-cta-contato {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-cta-whatsapp {
background: #f59e0b;
color: white;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.btn-cta-whatsapp:hover {
background: #128c7e;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
text-decoration: none;
color: white;
}
.btn-cta-contato {
background: white;
color: #1a3246;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}
.btn-cta-contato:hover {
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
text-decoration: none;
color: #1a3246;
}
.cta-background-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: floatingDots 20s linear infinite;
}
/* ===== MODAL GALERIA ===== */
.modal-content {
border: none;
border-radius: 20px;
overflow: hidden;
}
.modal-header {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
border: none;
}
.modal-title {
font-weight: 700;
}
.btn-close {
filter: invert(1);
}
.modal-description {
font-size: 1rem;
color: white;
}
.btn-modal-whatsapp {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
border: none;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-modal-whatsapp:hover {
background: linear-gradient(135deg, #128c7e, #f59e0b);
transform: translateY(-2px);
text-decoration: none;
color: white;
}
/* ===== ANIMAÇÕES ===== */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ===== SEO DE BLOG HOME - AO SAT RASTREADORES ===== */
/* Seo Principal */
.blog-home-section {
position: relative;
margin: 120px 0;
padding: 100px 0;
background: linear-gradient(135deg, #f8fafe 0%, #e8f4fd 100%);
overflow: hidden;
}
.blog-home-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
pointer-events: none;
}
.blog-home-section > .container {
position: relative;
z-index: 2;
}
/* Header da Seo */
.blog-header {
text-align: center;
margin-bottom: 60px;
}
.blog-titulo {
font-size: 3.2rem;
font-weight: 900;
color: #1a3246;
margin: 0 0 20px 0;
line-height: 1.1;
letter-spacing: -1px;
}
.blog-subtitulo {
font-size: 1.3rem;
color: #64748b;
line-height: 1.6;
margin: 0 0 30px 0;
font-weight: 400;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.blog-separador {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ffb413, #f59e0b);
border-radius: 2px;
margin: 0 auto;
box-shadow: 0 2px 8px rgba(255, 180, 19, 0.3);
}
/* Grid de Artigos */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
/* Cards de Blog */
.blog-card {
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
/* Imagem do Card */
.blog-card-image {
position: relative;
height: 220px;
overflow: hidden;
}
.blog-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-img {
transform: scale(1.05);
}
/* Placeholder para imagens */
.blog-img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a3246, #ffb413);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
transition: all 0.4s ease;
}
.blog-card:hover .blog-img-placeholder {
transform: scale(1.05);
background: linear-gradient(135deg, #ffb413, #1a3246);
}
.blog-card-overlay {
position: absolute;
top: 15px;
left: 15px;
z-index: 2;
}
.blog-card-category {
background: rgba(255, 180, 19, 0.9);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Contedo do Card */
.blog-card-content {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
/* Metadados */
.blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-size: 0.85rem;
color: #6b7280;
}
.blog-date,
.blog-views {
display: flex;
align-items: center;
gap: 6px;
}
.blog-date i,
.blog-views i {
font-size: 0.8rem;
color: #ffb413;
}
/* Ttulo do Artigo */
.blog-card-title {
font-size: 1.3rem;
font-weight: 700;
color: #1a3246;
margin: 0 0 15px 0;
line-height: 1.4;
flex: 1;
}
.blog-card-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.blog-card-title a:hover {
color: #ffb413;
}
/* Resumo do Artigo */
.blog-card-excerpt {
font-size: 0.95rem;
color: #64748b;
line-height: 1.6;
margin: 0 0 20px 0;
flex: 1;
}
/* Footer do Card */
.blog-card-footer {
margin-top: auto;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ffb413;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.blog-read-more::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #ffb413;
transition: width 0.3s ease;
}
.blog-read-more:hover {
color: #1a3246;
}
.blog-read-more:hover::after {
width: 100%;
}
.blog-read-more i {
transition: transform 0.3s ease;
}
.blog-read-more:hover i {
transform: translateX(4px);
}
/* Boto Ver Todos os Artigos */
.blog-actions {
text-align: center;
}
.btn-blog-all {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(26, 50, 70, 0.3);
position: relative;
overflow: hidden;
}
.btn-blog-all::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-blog-all:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(26, 50, 70, 0.4);
color: white;
text-decoration: none;
}
.btn-blog-all:hover::before {
left: 100%;
}
.btn-blog-all i {
transition: transform 0.3s ease;
}
.btn-blog-all:hover i {
transform: translateX(4px);
}
/* Elementos Decorativos */
.blog-decorativos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.decorativo-particula {
position: absolute;
width: 8px;
height: 8px;
background: rgba(255, 180, 19, 0.2);
border-radius: 50%;
animation: flutuarBlog 15s infinite ease-in-out;
}
.decorativo-particula:nth-child(1) {
top: 15%;
left: 10%;
animation-delay: 0s;
}
.decorativo-particula:nth-child(2) {
top: 65%;
left: 5%;
animation-delay: 5s;
}
.decorativo-particula:nth-child(3) {
top: 85%;
right: 15%;
animation-delay: 10s;
}
.decorativo-particula:nth-child(4) {
top: 35%;
right: 10%;
animation-delay: 15s;
}
@keyframes flutuarBlog {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-25px) scale(1.3);
opacity: 0.6;
}
}
/* ===== RESPONSIVIDADE ===== */
@media (max-width: 1199.98px) {
.blog-home-section {
margin: 0px 0;
padding: 80px 0;
}
.blog-titulo {
font-size: 2.8rem;
}
.blog-subtitulo {
font-size: 1.2rem;
}
.blog-grid {
gap: 25px;
}
.blog-card-content {
padding: 20px;
}
.blog-card-title {
font-size: 1.2rem;
}
}
@media (max-width: 991.98px) {
.blog-home-section {
margin: 80px 0;
padding: 60px 0;
}
.blog-titulo {
font-size: 2.5rem;
}
.blog-subtitulo {
font-size: 1.1rem;
}
.blog-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.blog-card-image {
height: 200px;
}
}
@media (max-width: 767.98px) {
.blog-home-section {
margin: 60px 0;
padding: 40px 0;
}
.blog-titulo {
font-size: 2.2rem;
}
.blog-subtitulo {
font-size: 1rem;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.blog-card-image {
height: 180px;
}
.blog-card-content {
padding: 20px;
}
.blog-card-title {
font-size: 1.1rem;
}
.blog-card-excerpt {
font-size: 0.9rem;
}
.btn-blog-all {
padding: 12px 25px;
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.blog-home-section {
margin: 40px 0;
padding: 30px 0;
}
.blog-titulo {
font-size: 1.8rem;
}
.blog-subtitulo {
font-size: 0.95rem;
}
.blog-separador {
width: 60px;
height: 3px;
}
.blog-card-image {
height: 160px;
}
.blog-card-content {
padding: 18px;
}
.blog-card-title {
font-size: 1rem;
}
.blog-card-excerpt {
font-size: 0.85rem;
}
.blog-meta {
font-size: 0.8rem;
}
.blog-card-category {
font-size: 0.75rem;
padding: 4px 10px;
}
.btn-blog-all {
padding: 10px 20px;
font-size: 0.85rem;
}
.blog-decorativos {
display: none;
}
}
/* Animaes de entrada */
.blog-home-section {
animation: fadeInBlog 0.8s ease-out;
}
.blog-header {
animation: slideInUp 1s ease-out 0.2s both;
}
.blog-grid {
animation: slideInUp 1s ease-out 0.4s both;
}
.blog-actions {
animation: slideInUp 1s ease-out 0.6s both;
}
@keyframes fadeInBlog {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== CSS SIMPLIFICADO PARA BLOG HOME - GARANTIR VISIBILIDADE ===== */
/* Fora exibio da seo */
.blog-home-section {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0px 0 !important;
padding: 60px 0 !important;
background: #f8f9fa !important;
position: relative !important;
overflow: hidden !important;
}
/* Header visvel */
.blog-header {
display: block !important;
text-align: center !important;
margin-bottom: 50px !important;
}
.blog-titulo {
display: block !important;
font-size: 2.5rem !important;
font-weight: 700 !important;
color: #1a3246 !important;
margin: 0 0 20px 0 !important;
line-height: 1.2 !important;
text-align: center !important;
}
.blog-subtitulo {
display: block !important;
font-size: 1.1rem !important;
color: #6c757d !important;
margin: 0 0 30px 0 !important;
line-height: 1.6 !important;
}
.blog-separador {
display: block !important;
width: 60px !important;
height: 4px !important;
background: #ffb413 !important;
margin: 0 auto !important;
border-radius: 2px !important;
text-align: center !important;
}
/* Grid visvel */
.blog-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 30px !important;
margin-bottom: 50px !important;
}
/* Cards visveis */
.blog-card {
display: block !important;
background: white !important;
border-radius: 12px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
overflow: hidden !important;
transition: transform 0.3s ease !important;
}
.blog-card:hover {
transform: translateY(-5px) !important;
}
/* Imagem visvel */
.blog-card-image {
display: block !important;
height: 200px !important;
position: relative !important;
overflow: hidden !important;
}
.blog-img-placeholder {
display: flex !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, #1a3246, #ffb413) !important;
align-items: center !important;
justify-content: center !important;
color: white !important;
font-size: 2.5rem !important;
}
/* Categoria visvel */
.blog-card-overlay {
position: absolute !important;
top: 15px !important;
left: 15px !important;
z-index: 2 !important;
}
.blog-card-category {
background: rgba(255, 180, 19, 0.9) !important;
color: white !important;
padding: 5px 10px !important;
border-radius: 15px !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
/* Contedo visvel */
.blog-card-content {
display: block !important;
padding: 20px !important;
}
/* Metadados visveis */
.blog-meta {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 15px !important;
font-size: 0.8rem !important;
color: #6c757d !important;
}
.blog-date,
.blog-views {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.blog-date i,
.blog-views i {
color: #ffb413 !important;
}
/* Ttulo visvel */
.blog-card-title {
display: block !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #1a3246 !important;
margin: 0 0 10px 0 !important;
line-height: 1.4 !important;
}
.blog-card-title a {
color: inherit !important;
text-decoration: none !important;
}
.blog-card-title a:hover {
color: #ffb413 !important;
}
/* Resumo visvel */
.blog-card-excerpt {
display: block !important;
font-size: 0.9rem !important;
color: #6c757d !important;
line-height: 1.5 !important;
margin: 0 0 15px 0 !important;
}
/* Footer visvel */
.blog-card-footer {
display: block !important;
}
.blog-read-more {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
color: #ffb413 !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
text-decoration: none !important;
}
.blog-read-more:hover {
color: #1a3246 !important;
}
/* Boto visvel */
.blog-actions {
display: block !important;
text-align: center !important;
}
.btn-blog-all {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 25px !important;
background: #1a3246 !important;
color: white !important;
text-decoration: none !important;
border-radius: 25px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
transition: all 0.3s ease !important;
}
.btn-blog-all:hover {
background: #ffb413 !important;
color: white !important;
text-decoration: none !important;
transform: translateY(-2px) !important;
}
/* Decorativos visveis */
.blog-decorativos {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
overflow: hidden !important;
}
.decorativo-particula {
position: absolute !important;
width: 6px !important;
height: 6px !important;
background: rgba(255, 180, 19, 0.3) !important;
border-radius: 50% !important;
}
.decorativo-particula:nth-child(1) {
top: 20% !important;
left: 10% !important;
}
.decorativo-particula:nth-child(2) {
top: 60% !important;
left: 5% !important;
}
.decorativo-particula:nth-child(3) {
top: 80% !important;
right: 15% !important;
}
.decorativo-particula:nth-child(4) {
top: 30% !important;
right: 10% !important;
}
/* Responsividade forada */
@media (max-width: 768px) {
.blog-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.blog-titulo {
font-size: 2rem !important;
}
.blog-subtitulo {
font-size: 1rem !important;
}
.blog-card-image {
height: 180px !important;
}
.blog-img-placeholder {
font-size: 2rem !important;
}
.blog-card-content {
padding: 15px !important;
}
.blog-card-title {
font-size: 1rem !important;
}
.blog-card-excerpt {
font-size: 0.85rem !important;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes floatParticle {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 1;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.7;
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes floatingDots {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
/* ===== RESPONSIVIDADE ===== */
/* Large screens (1200px+) */
@media (min-width: 1200px) {
.servico-galeria-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablets (768px - 1199px) */
@media (max-width: 1199.98px) {
.titulo-servico {
font-size: 2.5rem;
}
.hero-imagem-wrapper {
margin-top: 2rem;
}
.servico-galeria-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
}
@media (max-width: 991.98px) {
.servico-hero {
padding: 2rem 0;
min-height: auto;
}
.titulo-servico {
font-size: 2.25rem;
text-align: center;
}
.subtitulo-servico {
text-align: center;
}
.hero-actions-servico {
justify-content: center;
}
.hero-imagem-wrapper {
margin-top: 3rem;
order: -1;
}
.badge-servico-flutuante {
top: 15px;
right: 15px;
padding: 0.75rem;
}
.badge-conteudo-servico i {
font-size: 1.25rem;
}
.info-item-servico:hover {
transform: none;
}
}
/* Mobile (576px - 767px) */
@media (max-width: 767.98px) {
.servico-hero {
padding: 1.5rem 0;
}
.titulo-servico {
font-size: 2rem;
margin-bottom: 1rem;
}
.subtitulo-servico {
font-size: 1.125rem;
margin-bottom: 1.5rem;
}
.badge-institucional {
padding: 0.5rem 1.25rem;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.info-item-servico {
flex-direction: column;
text-align: center;
gap: 0.75rem;
padding: 1.5rem 0;
}
.info-icon-servico {
width: 50px;
height: 50px;
font-size: 1.125rem;
}
.hero-actions-servico {
flex-direction: column;
align-items: center;
}
.btn-hero-whatsapp,
.btn-hero-saiba-mais {
width: 100%;
justify-content: center;
max-width: 300px;
}
.servico-galeria-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.galeria-image-wrapper {
height: 200px;
}
.badge-servico-flutuante {
position: static;
margin: 1rem auto 0;
display: inline-block;
}
.titulo-secao {
font-size: 2rem;
}
.servico-especificacoes {
padding: 2rem 1.5rem;
border-radius: 20px;
}
.servico-especificacoes h3 {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.spec-item {
padding: 1.5rem;
margin-bottom: 1.25rem;
}
.spec-header {
gap: 1rem;
}
.spec-header i {
width: 45px;
height: 45px;
font-size: 1.125rem;
}
.caracteristica-card {
padding: 2rem 1rem;
}
.caracteristica-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.cta-titulo {
font-size: 2rem;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.btn-cta-whatsapp,
.btn-cta-contato {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Small mobile (up to 575px) */
@media (max-width: 575.98px) {
.breadcrumb-list {
font-size: 0.8rem;
}
.breadcrumb-item:not(:last-child)::after {
margin: 0 0.5rem;
}
.servico-hero {
padding: 1rem 0;
}
.titulo-servico {
font-size: 1.75rem;
}
.badge-institucional {
padding: 0.4rem 1rem;
font-size: 0.75rem;
}
.info-item-servico {
padding: 1rem 0;
}
.info-icon-servico {
width: 45px;
height: 45px;
font-size: 1rem;
}
.info-texto-servico strong {
font-size: 1rem;
}
.servico-descricao-section,
.servico-galeria-section,
.servico-caracteristicas-section,
.servico-cta-section {
padding: 3rem 0;
}
.servico-especificacoes {
padding: 1.5rem 1rem;
border-radius: 15px;
}
.servico-especificacoes h3 {
font-size: 1.375rem;
margin-bottom: 1.5rem;
}
.servico-especificacoes h3::after {
width: 40px;
height: 2px;
}
.spec-item {
padding: 1.25rem;
margin-bottom: 1rem;
border-radius: 12px;
}
.spec-header {
gap: 0.875rem;
margin-bottom: 0.75rem;
}
.spec-header i {
width: 40px;
height: 40px;
font-size: 1rem;
border-radius: 10px;
}
.spec-header h5 {
font-size: 1rem;
}
.spec-item p {
font-size: 0.875rem;
line-height: 1.6;
}
.titulo-secao {
font-size: 1.75rem;
}
.subtitulo-secao {
font-size: 1rem;
}
.galeria-image-wrapper {
height: 180px;
}
.galeria-overlay {
padding: 1rem;
}
.galeria-item-titulo {
font-size: 1.125rem;
}
.galeria-item-descricao {
font-size: 0.85rem;
}
.btn-galeria-view {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.caracteristica-card {
padding: 1.5rem 1rem;
}
.caracteristica-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.cta-titulo {
font-size: 1.75rem;
}
.cta-texto {
font-size: 1rem;
}
.cta-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
}
/* ===== ACESSIBILIDADE ===== */
@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;
}
.badge-institucional,
.titulo-servico,
.subtitulo-servico,
.servico-info-rapidas,
.hero-actions-servico,
.hero-imagem-wrapper {
animation: none !important;
}
}
@media (prefers-contrast: high) {
.titulo-servico,
.titulo-secao {
color: #000000;
}
.texto-destaque,
.titulo-destaque {
color: #1a3246 !important;
-webkit-text-fill-color: #1a3246 !important;
}
.galeria-card,
.caracteristica-card,
.servico-especificacoes {
border: 2px solid #1a3246;
}
.btn-hero-whatsapp,
.btn-cta-whatsapp {
border: 2px solid #f59e0b;
}
.btn-hero-saiba-mais,
.btn-cta-contato {
border: 2px solid #1a3246;
}
}
/* ===== FIM DA PÁGINA SERVIÇO ===== */
/* ===== APRESENTAÇÃO EMPRESA V4 - VERSÃO FIEL AO PRINT ===== */
.apresentacao-empresa-v4 {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #f0f7ff 100%);
overflow: hidden;
display: flex;
align-items: center;
padding: 80px 0;
}
.apresentacao-empresa-v4::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(0, 102, 204, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(37, 211, 102, 0.08) 0%, transparent 50%);
z-index: 1;
}
/* Container do Conteúdo V4 */
.conteudo-print-v4 {
position: relative;
z-index: 2;
padding: 0 2rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Caixa do Título V4 */
.caixa-titulo-v4 {
position: relative;
margin-bottom: 2rem;
animation: slideInLeft 1s ease-out;
}
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Título Principal V4 */
.titulo-print-v4 {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #1a3246;
line-height: 1.1;
margin: 0;
text-shadow: 0 4px 8px rgba(0, 102, 204, 0.1);
position: relative;
}
.titulo-print-v4::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 120px;
height: 6px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 3px;
animation: lineGrowV4 1.5s ease-out 0.5s both;
}
@keyframes lineGrowV4 {
0% { width: 0; opacity: 0; }
100% { width: 120px; opacity: 1; }
}
/* Texto Descritivo V4 */
.texto-print-v4 {
margin: 3rem 0 2.5rem 0;
animation: fadeInUp 1s ease-out 0.3s both;
}
.texto-print-v4 p {
font-size: 1.25rem;
color: #495057;
line-height: 1.6;
margin: 0;
font-weight: 400;
}
.texto-print-v4 strong {
color: #1a3246;
font-weight: 700;
position: relative;
}
.texto-print-v4 strong::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
opacity: 0.3;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Container do Botão V4 */
.botao-print-v4 {
margin-top: 1rem;
animation: zoomIn 1s ease-out 0.6s both;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Botão WhatsApp V4 */
.btn-print-whatsapp-v4 {
display: inline-flex;
align-items: center;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
text-decoration: none;
font-size: 1.1rem;
font-weight: 700;
border-radius: 50px;
box-shadow:
0 8px 25px rgba(37, 211, 102, 0.3),
0 4px 15px rgba(37, 211, 102, 0.2);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
outline: none;
}
.btn-print-whatsapp-v4::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-print-whatsapp-v4:hover::before {
left: 100%;
}
.btn-print-whatsapp-v4:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(37, 211, 102, 0.4),
0 8px 25px rgba(37, 211, 102, 0.3);
color: white;
text-decoration: none;
}
.btn-print-whatsapp-v4:active {
transform: translateY(-1px);
}
.btn-print-whatsapp-v4 i {
font-size: 1.3rem;
margin-right: 0.75rem;
animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Container da Imagem V4 */
.imagem-print-v4 {
position: relative;
padding: 2rem;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
animation: slideInRight 1s ease-out 0.4s both;
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Imagem Principal V4 */
.img-print-v4 {
width: 100%;
height: auto;
max-height: 80vh;
object-fit: cover;
object-position: center;
border-radius: 25px;
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.15),
0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
z-index: 2;
}
.imagem-print-v4:hover .img-print-v4 {
transform: scale(1.05) rotateY(5deg);
box-shadow:
0 35px 80px rgba(0, 0, 0, 0.2),
0 25px 50px rgba(0, 0, 0, 0.15);
}
/* Elementos Decorativos V4 */
.imagem-print-v4::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: 20px;
bottom: 20px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
border-radius: 30px;
z-index: 1;
opacity: 0.1;
animation: float 6s ease-in-out infinite;
}
.imagem-print-v4::after {
content: '';
position: absolute;
top: 20px;
right: -20px;
width: 100px;
height: 100px;
background: linear-gradient(135deg, #f59e0b, #1a3246);
border-radius: 50%;
z-index: 1;
opacity: 0.1;
animation: floatReverse 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
}
@keyframes floatReverse {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
}
50% {
transform: translateY(15px) rotate(-2deg) scale(1.1);
}
}
/* Responsividade V4 */
@media (max-width: 1199.98px) {
.titulo-print-v4 {
font-size: 3rem;
}
.img-print-v4 {
max-height: 70vh;
}
}
@media (max-width: 991.98px) {
.apresentacao-empresa-v4 {
min-height: auto;
padding: 60px 0;
}
.titulo-print-v4 {
font-size: 2.5rem;
}
.texto-print-v4 p {
font-size: 1.125rem;
}
.imagem-print-v4 {
height: auto;
margin-top: 3rem;
padding: 1rem;
}
.img-print-v4 {
max-height: 60vh;
}
}
@media (max-width: 767.98px) {
.apresentacao-empresa-v4 {
padding: 40px 0;
}
.conteudo-print-v4 {
padding: 0 1rem;
text-align: center;
}
.titulo-print-v4 {
font-size: 2rem;
}
.titulo-print-v4::after {
width: 80px;
left: 50%;
transform: translateX(-50%);
}
.texto-print-v4 {
margin: 2rem 0;
}
.texto-print-v4 p {
font-size: 1rem;
}
.btn-print-whatsapp-v4 {
padding: 0.875rem 2rem;
font-size: 1rem;
}
.imagem-print-v4 {
margin-top: 2rem;
padding: 0.5rem;
}
.img-print-v4 {
max-height: 50vh;
border-radius: 20px;
}
.imagem-print-v4::before {
border-radius: 25px;
}
}
@media (max-width: 575.98px) {
.apresentacao-empresa-v4 {
padding: 30px 0;
}
.titulo-print-v4 {
font-size: 1.75rem;
}
.titulo-print-v4::after {
width: 60px;
height: 4px;
}
.texto-print-v4 p {
font-size: 0.95rem;
}
.btn-print-whatsapp-v4 {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}
.btn-print-whatsapp-v4 i {
font-size: 1.1rem;
margin-right: 0.5rem;
}
.img-print-v4 {
max-height: 40vh;
border-radius: 15px;
}
}
/* Acessibilidade V4 */
@media (prefers-reduced-motion: reduce) {
.apresentacao-empresa-v4 *,
.apresentacao-empresa-v4 *::before,
.apresentacao-empresa-v4 *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.imagem-print-v4:hover .img-print-v4 {
transform: none;
}
}
@media (prefers-contrast: high) {
.titulo-print-v4 {
color: #000;
-webkit-text-fill-color: #000;
}
.texto-print-v4 p {
color: #000;
}
.btn-print-whatsapp-v4 {
background: #000;
color: #fff;
}
.img-print-v4 {
border: 2px solid #000;
}
}
/* Animações de entrada sequencial V4 */
.conteudo-print-v4 > *:nth-child(1) {
animation-delay: 0.2s;
}
.conteudo-print-v4 > *:nth-child(2) {
animation-delay: 0.4s;
}
.conteudo-print-v4 > *:nth-child(3) {
animation-delay: 0.6s;
}
/* Efeitos de hover aprimorados V4 */
.btn-print-whatsapp-v4:focus {
outline: 3px solid rgba(37, 211, 102, 0.3);
outline-offset: 2px;
}
.btn-print-whatsapp-v4:focus:not(:focus-visible) {
outline: none;
}
/* Otimização de performance V4 */
.apresentacao-empresa-v4 {
will-change: auto;
}
.img-print-v4 {
will-change: transform;
}
.btn-print-whatsapp-v4 {
will-change: transform, box-shadow;
}
/* ===== FIM DA APRESENTAÇÃO EMPRESA V4 ===== */
/* ===== CAROUSEL DE SERVIÇOS RDS ===== */
.servicos-carousel-section {
position: relative;
background: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #f0f7ff 100%);
padding: 100px 0;
overflow: hidden;
}
.servicos-carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(0, 102, 204, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(37, 211, 102, 0.06) 0%, transparent 50%);
z-index: 1;
}
.servicos-carousel-section > .container {
position: relative;
z-index: 2;
}
/* Títulos da Seção */
.servicos-titulo {
font-size: 3rem;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.servicos-titulo .titulo-destaque {
background: linear-gradient(135deg, #1a3246 0%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.servicos-subtitulo {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
margin-bottom: 0;
}
.servicos-subtitulo strong {
color: #1a3246;
font-weight: 600;
}
/* Container do Carousel */
.servicos-carousel-container {
position: relative;
margin-top: 4rem;
max-width: 100%;
overflow: hidden;
}
.servicos-carousel {
display: flex;
gap: 2rem;
padding: 1rem;
scroll-behavior: smooth;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.servicos-carousel::-webkit-scrollbar {
height: 8px;
background: rgba(0, 102, 204, 0.1);
border-radius: 4px;
}
.servicos-carousel::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #1a3246, #f59e0b);
border-radius: 4px;
}
.servicos-carousel::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #1a3246, #128c7e);
}
/* Cards dos Serviços */
.servico-card {
flex: 0 0 auto;
width: 380px;
max-width: 100%;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
scroll-snap-align: start;
position: relative;
}
.servico-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 102, 204, 0.15);
}
/* Imagem do Serviço */
.servico-image-wrapper {
position: relative;
height: 240px;
overflow: hidden;
background: linear-gradient(135deg, #f8fbff, #e3f2fd);
}
.servico-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.servico-card:hover .servico-image {
transform: scale(1.1);
}
.servico-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.servico-card:hover .servico-overlay {
opacity: 1;
}
.servico-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, #1a3246, #f59e0b);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.servico-badge i {
font-size: 0.9rem;
}
/* Conteúdo do Card */
.servico-content {
padding: 2rem;
}
.servico-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.servico-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #ffb413;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(26, 50, 70, 0.3);
}
.servico-categoria {
color: #666;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.servico-titulo {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1rem;
line-height: 1.3;
}
.servico-descricao {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
/* Features do Serviço */
.servico-features {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(0, 102, 204, 0.08);
border-radius: 20px;
font-size: 0.85rem;
color: #1a3246;
font-weight: 500;
border: 1px solid rgba(0, 102, 204, 0.1);
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(0, 102, 204, 0.12);
transform: translateY(-2px);
}
.feature-item i {
font-size: 0.9rem;
}
/* Botões de Ação */
.servico-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-servico-detalhes,
.btn-servico-whatsapp {
flex: 1;
min-width: 140px;
padding: 0.8rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-servico-detalhes {
background: transparent;
color: #1a3246;
border: 2px solid #1a3246;
}
.btn-servico-detalhes:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}
.btn-servico-whatsapp {
background: linear-gradient(135deg, #f59e0b 0%, #128c7e 100%);
color: white;
border: 2px solid transparent;
}
.btn-servico-whatsapp::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;
}
.btn-servico-whatsapp:hover::before {
left: 100%;
}
.btn-servico-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
color: white;
}
/* Navegação do Carousel */
.carousel-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 3;
}
.carousel-btn {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
border: none;
border-radius: 50%;
color: white;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 30px rgba(0, 102, 204, 0.3);
pointer-events: all;
z-index: 4;
position: relative;
}
.carousel-btn:hover {
transform: scale(1.1);
box-shadow: 0 12px 40px rgba(0, 102, 204, 0.4);
}
.carousel-btn:active {
transform: scale(0.95);
}
.carousel-prev {
margin-left: -25px;
}
.carousel-next {
margin-right: -25px;
}
/* Indicadores */
.carousel-indicators {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 2rem;
}
.carousel-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0, 102, 204, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicator.active {
background: linear-gradient(135deg, #1a3246, #f59e0b);
transform: scale(1.2);
}
.carousel-indicator:hover {
background: rgba(0, 102, 204, 0.6);
transform: scale(1.1);
}
/* Fallback dos Serviços */
.servicos-fallback {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
width: 100%;
}
.fallback-content {
text-align: center;
padding: 3rem;
background: white;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
max-width: 500px;
}
.fallback-icon {
font-size: 4rem;
color: #1a3246;
margin-bottom: 1.5rem;
opacity: 0.7;
}
.fallback-content h3 {
font-size: 1.8rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 1rem;
}
.fallback-content p {
color: #666;
margin-bottom: 2rem;
line-height: 1.6;
}
.btn-fallback-whatsapp {
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
padding: 1rem 2rem;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.7rem;
transition: all 0.3s ease;
}
.btn-fallback-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
color: white;
}
/* Elementos Decorativos */
.servicos-decorativo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.elemento-decorativo-1,
.elemento-decorativo-2,
.elemento-decorativo-3 {
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(37, 211, 102, 0.1));
border-radius: 50%;
animation: floatElement 6s ease-in-out infinite;
}
.elemento-decorativo-1 {
top: 10%;
left: 5%;
animation-delay: 0s;
}
.elemento-decorativo-2 {
top: 60%;
right: 8%;
width: 80px;
height: 80px;
animation-delay: 2s;
}
.elemento-decorativo-3 {
bottom: 15%;
left: 10%;
width: 60px;
height: 60px;
animation-delay: 4s;
}
@keyframes floatElement {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Responsividade */
@media (max-width: 1199.98px) {
.servico-card {
width: 350px;
}
.servicos-titulo {
font-size: 2.5rem;
}
}
@media (max-width: 991.98px) {
.servicos-carousel-section {
padding: 80px 0;
}
.servicos-titulo {
font-size: 2.2rem;
}
.servico-card {
width: 320px;
}
.carousel-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.servico-actions {
flex-direction: column;
}
.btn-servico-detalhes,
.btn-servico-whatsapp {
flex: none;
min-width: auto;
}
}
@media (max-width: 767.98px) {
.servicos-carousel-section {
padding: 60px 0;
}
.servicos-titulo {
font-size: 1.8rem;
}
.servicos-subtitulo {
font-size: 1rem;
}
.servico-card {
width: 280px;
}
.servico-content {
padding: 1.5rem;
}
.servico-image-wrapper {
height: 200px;
}
.servico-features {
gap: 0.5rem;
}
.feature-item {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.carousel-navigation {
display: none;
}
.servicos-carousel {
gap: 1rem;
padding: 0.5rem;
}
}
@media (max-width: 575.98px) {
.servicos-carousel-section {
padding: 40px 0;
}
.servicos-titulo {
font-size: 1.6rem;
}
.servico-card {
width: 260px;
}
.servico-titulo {
font-size: 1.2rem;
}
.servico-descricao {
font-size: 0.9rem;
}
.btn-servico-detalhes,
.btn-servico-whatsapp {
padding: 0.7rem 1.2rem;
font-size: 0.85rem;
}
.servico-icon {
width: 40px;
height: 40px;
font-size: 1rem;
color: #ffb413;
}
.elemento-decorativo-1,
.elemento-decorativo-2,
.elemento-decorativo-3 {
display: none;
}
}
/* Animações suaves para carregamento */
@keyframes slideInCarousel {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.servico-card {
animation: slideInCarousel 0.6s ease-out;
}
.servico-card:nth-child(1) { animation-delay: 0.1s; }
.servico-card:nth-child(2) { animation-delay: 0.2s; }
.servico-card:nth-child(3) { animation-delay: 0.3s; }
.servico-card:nth-child(4) { animation-delay: 0.4s; }
.servico-card:nth-child(5) { animation-delay: 0.5s; }
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.servico-card,
.elemento-decorativo-1,
.elemento-decorativo-2,
.elemento-decorativo-3 {
animation: none;
}
.servico-card:hover {
transform: none;
}
.btn-servico-detalhes:hover,
.btn-servico-whatsapp:hover,
.carousel-btn:hover {
transform: none;
}
}
@media (prefers-contrast: high) {
.servico-card {
border: 2px solid #1a3246;
}
.servicos-titulo {
color: #000;
}
.btn-servico-detalhes,
.btn-servico-whatsapp {
border-width: 3px;
}
}
/* ===== FIM DO CAROUSEL DE SERVIÇOS RDS ===== */
/* ========================================
FORMULÁRIO DE CONTATO HOME - RDS
======================================== */
/* Seção Principal do Contato */
.contato-home-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8fafe 0%, #e8f4fd 100%);
position: relative;
overflow: hidden;
}
.contato-home-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
.contato-home-section > .container {
position: relative;
z-index: 2;
}
.contato-subtitulo {
font-size: 1.125rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
/* Opções de Contato */
.contato-opcoes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.contato-opcao {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 102, 204, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
animation: fadeInUp 0.6s ease-out;
}
.contato-opcao:nth-child(1) {
animation-delay: 0.1s;
}
.contato-opcao:nth-child(2) {
animation-delay: 0.2s;
}
.contato-opcao::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contato-opcao:hover::before {
transform: scaleX(1);
}
.contato-opcao:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 102, 204, 0.15);
border-color: #1a3246;
}
.opcao-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.opcao-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1a3246, #0052a3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
transition: all 0.3s ease;
position: relative;
}
.opcao-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.contato-opcao:hover .opcao-icon::after {
opacity: 1;
}
.opcao-titulo {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
margin: 0;
line-height: 1.3;
}
.opcao-info {
margin-left: 76px;
}
.opcao-link {
font-size: 1.125rem;
font-weight: 500;
color: #1a3246;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.opcao-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.opcao-link:hover::after {
width: 100%;
}
.opcao-link:hover {
color: #0052a3;
transform: translateX(4px);
}
/* Wrapper do Formulário */
.contato-form-wrapper {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 102, 204, 0.1);
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out 0.3s both;
}
.contato-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #1a3246, #f59e0b, #1a3246);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
/* Estilos dos Campos do Formulário */
.contato-form-wrapper .form-group {
margin-bottom: 1.5rem;
position: relative;
}
.contato-form-wrapper .form-label {
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contato-form-wrapper .form-label i {
color: #1a3246;
margin-right: 0.5rem;
font-size: 1rem;
}
.contato-form-wrapper .form-control {
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 0.875rem 1rem;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background-color: #f8fafc;
position: relative;
}
.contato-form-wrapper .form-control:focus {
border-color: #1a3246;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
background-color: white;
outline: none;
}
.contato-form-wrapper .form-control:valid {
border-color: #f59e0b;
}
.contato-form-wrapper .form-control::placeholder {
color: #94a3b8;
font-size: 0.875rem;
}
.contato-form-wrapper textarea.form-control {
resize: vertical;
min-height: 120px;
}
/* Feedback de Validação */
.contato-form-wrapper .invalid-feedback {
display: block;
font-size: 0.875rem;
color: #ef4444;
margin-top: 0.5rem;
font-weight: 500;
}
.contato-form-wrapper .form-text {
font-size: 0.75rem;
color: #64748b;
margin-top: 0.5rem;
text-align: right;
}
/* Contador de Caracteres */
#contador-mensagem {
font-weight: 600;
color: #1a3246;
}
/* Botão de Envio Aprimorado */
.btn-enviar-contato {
background: linear-gradient(135deg, #1a3246, #0052a3);
color: white;
border: none;
padding: 1rem 2.5rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
min-width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.btn-enviar-contato::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-enviar-contato:hover::before {
left: 100%;
}
.btn-enviar-contato:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
background: linear-gradient(135deg, #0052a3, #003d7a);
}
.btn-enviar-contato:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}
.btn-enviar-contato:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn-enviar-contato .btn-loading {
display: none;
align-items: center;
gap: 0.5rem;
}
.btn-enviar-contato.loading .btn-text,
.btn-enviar-contato.loading .fa-paper-plane {
display: none;
}
.btn-enviar-contato.loading .btn-loading {
display: flex;
}
/* Área de Resultado */
.contato-result {
margin-top: 2rem;
text-align: center;
}
.contato-result-message {
padding: 1.5rem;
border-radius: 12px;
margin-top: 1rem;
font-weight: 500;
display: none;
align-items: center;
justify-content: center;
gap: 0.75rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contato-result-message.show {
display: flex;
opacity: 1;
transform: translateY(0);
}
.contato-result-message.success {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #15803d;
border: 2px solid #f59e0b;
}
.contato-result-message.error {
background: linear-gradient(135deg, #fef2f2, #fecaca);
color: #dc2626;
border: 2px solid #ef4444;
}
.result-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.contato-result-message.success .result-icon::before {
content: '✓';
font-weight: bold;
font-size: 16px;
}
.contato-result-message.error .result-icon::before {
content: '✕';
font-weight: bold;
font-size: 16px;
}
/* Elementos Decorativos Aprimorados */
.contato-decorativo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.elemento-contato-1,
.elemento-contato-2,
.elemento-contato-3,
.elemento-contato-4 {
position: absolute;
border-radius: 50%;
opacity: 0.1;
animation: floatElement 6s ease-in-out infinite;
}
.elemento-contato-1 {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
top: 10%;
left: 5%;
animation-delay: 0s;
}
.elemento-contato-2 {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f59e0b, #1a3246);
top: 20%;
right: 8%;
animation-delay: 2s;
}
.elemento-contato-3 {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #1a3246, #f59e0b);
bottom: 15%;
left: 10%;
animation-delay: 4s;
}
.elemento-contato-4 {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #f59e0b, #1a3246);
bottom: 25%;
right: 15%;
animation-delay: 1s;
transform: rotate(45deg);
border-radius: 12px;
}
/* Responsividade */
@media (max-width: 1199.98px) {
.contato-form-wrapper {
padding: 2.5rem;
}
.contato-opcoes {
gap: 1.5rem;
}
}
@media (max-width: 991.98px) {
.contato-home-section {
padding: 60px 0;
}
.contato-form-wrapper {
padding: 2rem;
}
.contato-opcoes {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.contato-opcao {
padding: 1.5rem;
}
.opcao-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.opcao-titulo {
font-size: 1.125rem;
}
.opcao-info {
margin-left: 66px;
}
}
@media (max-width: 767.98px) {
.contato-home-section {
padding: 50px 0;
}
.contato-subtitulo {
font-size: 1rem;
}
.contato-form-wrapper {
padding: 1.5rem;
border-radius: 16px;
}
.contato-opcao {
padding: 1.25rem;
border-radius: 12px;
}
.opcao-header {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.opcao-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
margin: 0 auto;
}
.opcao-titulo {
font-size: 1rem;
text-align: center;
}
.opcao-info {
margin-left: 0;
text-align: center;
margin-top: 0.75rem;
}
.btn-enviar-contato {
width: 100%;
padding: 1rem;
font-size: 0.875rem;
}
.contato-form-wrapper .form-control {
padding: 0.75rem;
font-size: 0.875rem;
}
}
@media (max-width: 575.98px) {
.contato-home-section {
padding: 40px 0;
}
.contato-form-wrapper {
padding: 1.25rem;
margin: 0 0.5rem;
}
.contato-opcao {
padding: 1rem;
margin: 0 0.5rem;
}
.opcao-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.opcao-titulo {
font-size: 0.875rem;
}
.opcao-link {
font-size: 1rem;
word-break: break-all;
}
.elemento-contato-1,
.elemento-contato-2,
.elemento-contato-3,
.elemento-contato-4 {
opacity: 0.05;
}
}
@media (prefers-reduced-motion: reduce) {
.contato-opcao,
.contato-form-wrapper,
.elemento-contato-1,
.elemento-contato-2,
.elemento-contato-3,
.elemento-contato-4 {
animation: none;
}
.contato-opcao:hover,
.btn-enviar-contato:hover {
transform: none;
}
.btn-enviar-contato::before {
display: none;
}
}
@media (prefers-contrast: high) {
.contato-form-wrapper {
border: 3px solid #1a3246;
}
.contato-form-wrapper .form-control {
border-width: 3px;
}
.contato-form-wrapper .form-control:focus {
box-shadow: 0 0 0 3px #000;
}
.btn-enviar-contato {
border: 2px solid #fff;
}
.contato-opcao {
border: 2px solid #1a3246;
}
.opcao-link {
text-decoration: underline;
}
}
/* ===== FIM DO FORMULÁRIO DE CONTATO HOME ===== */
/* ========================================
PÁGINA BLOG INTERNO - RDS
======================================== */
/* Classe Principal da Página */
.blog-internal-page {
min-height: 100vh;
background: #ffffff;
position: relative;
}
/* Garantir visibilidade de todos os elementos */
.blog-internal-page * {
visibility: visible;
opacity: 1;
}
/* Seções principais */
.blog-internal-page .breadcrumb-section,
.blog-internal-page .article-header-section,
.blog-internal-page .article-featured-image,
.blog-internal-page .article-content-section {
display: block;
visibility: visible;
opacity: 1;
}
/* Breadcrumb específico para blog interno */
.blog-internal-page .breadcrumb-section {
background: #f8f9fa;
padding: 15px 0;
border-bottom: 1px solid rgba(0, 102, 204, 0.1);
margin-bottom: 0;
}
.blog-internal-page .breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
.blog-internal-page .breadcrumb-item {
display: flex;
align-items: center;
}
.blog-internal-page .breadcrumb-current {
color: #6c757d;
font-weight: 500;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Header do artigo */
.blog-internal-page .article-header-section {
padding: 40px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.blog-internal-page .article-header {
text-align: center;
max-width: 800px;
margin: 0 auto;
display: block;
}
.blog-internal-page .article-meta-top {
margin-bottom: 25px;
display: block;
}
.blog-internal-page .article-category {
display: inline-block;
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
padding: 6px 16px;
border-radius: 25px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 15px;
}
.blog-internal-page .article-meta-info {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
color: #6c757d;
font-size: 14px;
}
.blog-internal-page .article-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin: 20px 0;
line-height: 1.2;
display: block;
}
.blog-internal-page .article-subtitle {
font-size: 1.125rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 30px;
display: block;
}
/* Seção do autor */
.blog-internal-page .article-author-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
padding: 20px 0;
border-top: 1px solid #e2e8f0;
flex-wrap: wrap;
gap: 20px;
}
.blog-internal-page .author-info-main {
display: flex;
align-items: center;
gap: 15px;
}
.blog-internal-page .author-avatar-large {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #1a3246;
}
.blog-internal-page .author-details h3 {
font-size: 1.125rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.blog-internal-page .author-title {
font-size: 0.875rem;
color: #64748b;
margin: 2px 0 8px 0;
}
.blog-internal-page .author-social {
display: flex;
gap: 8px;
}
.blog-internal-page .author-social-link {
width: 32px;
height: 32px;
background: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a3246;
text-decoration: none;
transition: all 0.3s ease;
font-size: 14px;
}
.blog-internal-page .author-social-link:hover {
background: #1a3246;
color: white;
transform: translateY(-2px);
}
/* Botões de compartilhamento */
.blog-internal-page .article-share-buttons {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.blog-internal-page .share-label {
font-size: 0.875rem;
color: #64748b;
font-weight: 500;
}
.blog-internal-page .share-buttons-list {
display: flex;
gap: 8px;
}
.blog-internal-page .share-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
.blog-internal-page .share-facebook {
background: #1877f2;
color: white;
}
.blog-internal-page .share-twitter {
background: #1da1f2;
color: white;
}
.blog-internal-page .share-linkedin {
background: #0077b5;
color: white;
}
.blog-internal-page .share-whatsapp {
background: #f59e0b;
color: white;
}
.blog-internal-page .share-copy {
background: #6b7280;
color: white;
}
.blog-internal-page .share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Imagem em destaque */
.blog-internal-page .article-featured-image {
padding: 30px 0;
background: #ffffff;
}
.blog-internal-page .featured-image-wrapper {
position: relative;
display: block;
}
.blog-internal-page .featured-image {
width: 100%;
height: auto;
max-height: 600px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 102, 204, 0.1);
}
.blog-internal-page .image-caption {
text-align: center;
font-size: 0.875rem;
color: #64748b;
font-style: italic;
margin-top: 10px;
padding: 0 20px;
}
/* Conteúdo do artigo */
.blog-internal-page .article-content-section {
padding: 40px 0;
background: #ffffff;
}
.blog-internal-page .article-content-wrapper {
position: relative;
}
.blog-internal-page .article-main-content {
background: white;
padding: 0;
display: block;
}
.blog-internal-page .content-section {
display: block;
line-height: 1.7;
}
.blog-internal-page .content-section h2 {
font-size: 1.875rem;
font-weight: 600;
color: #1e293b;
margin: 2rem 0 1rem 0;
position: relative;
padding-bottom: 0.5rem;
}
.blog-internal-page .content-section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 2px;
}
.blog-internal-page .content-section h3 {
font-size: 1.5rem;
font-weight: 600;
color: #374151;
margin: 1.5rem 0 0.75rem 0;
}
.blog-internal-page .content-section p {
font-size: 1rem;
color: #4b5563;
margin-bottom: 1.25rem;
line-height: 1.7;
}
.blog-internal-page .content-section ul,
.blog-internal-page .content-section ol {
margin: 1.25rem 0;
padding-left: 2rem;
}
.blog-internal-page .content-section li {
margin-bottom: 0.5rem;
color: #4b5563;
line-height: 1.6;
}
.blog-internal-page .content-section strong {
color: #1e293b;
font-weight: 600;
}
.blog-internal-page .content-section em {
color: #1a3246;
font-style: italic;
}
.blog-internal-page .content-section code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
color: #dc2626;
}
/* Info box */
.blog-internal-page .info-box {
background: linear-gradient(135deg, #e0f2fe, #b3e5fc);
border-left: 4px solid #1a3246;
padding: 1.5rem;
margin: 2rem 0;
border-radius: 8px;
position: relative;
}
.blog-internal-page .info-box::before {
content: '💡';
position: absolute;
top: 1rem;
left: 1rem;
font-size: 1.25rem;
}
.blog-internal-page .info-box p {
margin: 0 0 0 2rem;
color: #1a3246;
font-weight: 500;
}
/* Engajamento do artigo */
.blog-internal-page .article-engagement {
background: #f8fafc;
padding: 2rem;
border-radius: 12px;
margin-top: 3rem;
border: 1px solid #e2e8f0;
position: relative;
}
.blog-internal-page .article-engagement::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1a3246, #f59e0b);
border-radius: 12px 12px 0 0;
}
.blog-internal-page .engagement-actions {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.blog-internal-page .engagement-btn {
background: white;
border: 2px solid #e2e8f0;
border-radius: 50px;
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
color: #64748b;
font-weight: 500;
text-decoration: none;
}
.blog-internal-page .engagement-btn:hover {
border-color: #1a3246;
color: #1a3246;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}
.blog-internal-page .engagement-btn.active {
background: #1a3246;
border-color: #1a3246;
color: white;
}
.blog-internal-page .engagement-count {
font-weight: 600;
font-size: 0.875rem;
}
.blog-internal-page .engagement-label {
font-size: 0.875rem;
}
/* Sidebar do artigo */
.blog-internal-page .article-sidebar {
position: relative;
}
.blog-internal-page .sidebar-sticky {
position: sticky;
top: 2rem;
}
.blog-internal-page .sidebar-widget {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);
border: 1px solid #e2e8f0;
display: block;
}
.blog-internal-page .widget-title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f1f5f9;
}
.blog-internal-page .widget-title i {
color: #1a3246;
font-size: 1rem;
}
/* Widget CTA específico do artigo */
.blog-internal-page .cta-widget-article {
background: linear-gradient(135deg, #1a3246, #1a3246);
color: white;
text-align: center;
}
.blog-internal-page .cta-widget-article .widget-title {
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
.blog-internal-page .cta-widget-article .widget-title i {
color: #f59e0b;
}
.blog-internal-page .cta-content-article {
display: block;
}
.blog-internal-page .cta-icon-article {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem auto;
font-size: 1.5rem;
color: #f59e0b;
}
.blog-internal-page .cta-title-article {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: white;
}
.blog-internal-page .cta-text-article {
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
color: rgba(255, 255, 255, 0.9);
}
.blog-internal-page .btn-cta-article {
background: #f59e0b;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
font-size: 0.875rem;
}
.blog-internal-page .btn-cta-article:hover {
background: #22c55e;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
color: white;
}
/* Widget de navegação mobile */
.blog-internal-page .toc-widget-mobile {
display: block;
}
.blog-internal-page .toc-mobile-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.blog-internal-page .toc-mobile-link {
color: #64748b;
text-decoration: none;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.3s ease;
font-size: 0.875rem;
border-left: 3px solid transparent;
}
.blog-internal-page .toc-mobile-link:hover {
background: #f1f5f9;
color: #1a3246;
border-left-color: #1a3246;
transform: translateX(4px);
}
/* Posts relacionados */
.blog-internal-page .related-posts-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.blog-internal-page .related-post-item {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 8px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.blog-internal-page .related-post-item:hover {
background: #f8fafc;
border-color: #e2e8f0;
transform: translateY(-2px);
}
.blog-internal-page .related-post-image {
flex-shrink: 0;
}
.blog-internal-page .related-post-image img {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}
.blog-internal-page .related-post-content {
flex: 1;
}
.blog-internal-page .related-post-title {
margin: 0 0 0.5rem 0;
font-size: 0.875rem;
line-height: 1.4;
}
.blog-internal-page .related-post-link {
color: #374151;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.blog-internal-page .related-post-link:hover {
color: #1a3246;
}
.blog-internal-page .related-post-meta {
display: flex;
gap: 0.75rem;
font-size: 0.75rem;
color: #9ca3af;
}
.blog-internal-page .post-date::after {
content: "•";
margin-left: 0.75rem;
}
.blog-internal-page .post-category {
color: #1a3246;
font-weight: 500;
}
/* Newsletter */
.blog-internal-page .newsletter-widget-article .newsletter-description {
font-size: 0.875rem;
color: #64748b;
margin-bottom: 1.25rem;
line-height: 1.5;
}
.blog-internal-page .newsletter-form-article {
display: flex;
flex-direction: column;
gap: 1rem;
}
.blog-internal-page .newsletter-input-article {
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem;
font-size: 0.875rem;
transition: border-color 0.3s ease;
}
.blog-internal-page .newsletter-input-article:focus {
outline: none;
border-color: #1a3246;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.blog-internal-page .btn-newsletter-article {
background: #1a3246;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.blog-internal-page .btn-newsletter-article:hover {
background: #0052a3;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 102, 204, 0.2);
}
/* Widget de compartilhamento */
.blog-internal-page .share-buttons-sidebar {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.blog-internal-page .share-btn-sidebar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.blog-internal-page .share-btn-sidebar.facebook {
background: #1877f2;
color: white;
}
.blog-internal-page .share-btn-sidebar.twitter {
background: #1da1f2;
color: white;
}
.blog-internal-page .share-btn-sidebar.linkedin {
background: #0077b5;
color: white;
}
.blog-internal-page .share-btn-sidebar.whatsapp {
background: #f59e0b;
color: white;
}
.blog-internal-page .share-btn-sidebar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Responsividade */
@media (max-width: 991.98px) {
.blog-internal-page .article-sidebar {
margin-top: 3rem;
}
.blog-internal-page .sidebar-sticky {
position: static;
}
.blog-internal-page .engagement-actions {
gap: 1rem;
}
.blog-internal-page .article-author-section {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.blog-internal-page .article-share-buttons {
align-self: stretch;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.blog-internal-page .article-title {
font-size: 2rem;
}
.blog-internal-page .article-subtitle {
font-size: 1rem;
}
.blog-internal-page .article-meta-info {
flex-direction: column;
gap: 8px;
align-items: center;
}
.blog-internal-page .breadcrumb-current {
max-width: 150px;
}
.blog-internal-page .engagement-actions {
flex-direction: column;
align-items: center;
}
.blog-internal-page .engagement-btn {
width: 100%;
max-width: 200px;
justify-content: center;
}
.blog-internal-page .related-post-item {
flex-direction: column;
text-align: center;
}
.blog-internal-page .related-post-image {
align-self: center;
}
.blog-internal-page .sidebar-widget {
margin-bottom: 1.5rem;
}
}
@media (max-width: 575.98px) {
.blog-internal-page .article-header-section {
padding: 30px 0;
}
.blog-internal-page .article-content-section {
padding: 30px 0;
}
.blog-internal-page .sidebar-widget {
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.blog-internal-page .content-section h2 {
font-size: 1.5rem;
}
.blog-internal-page .content-section h3 {
font-size: 1.25rem;
}
.blog-internal-page .article-title {
font-size: 1.75rem;
}
.blog-internal-page .breadcrumb-current {
max-width: 120px;
}
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
.blog-internal-page * {
animation: none !important;
transition: none !important;
}
.blog-internal-page .share-btn:hover,
.blog-internal-page .engagement-btn:hover,
.blog-internal-page .btn-cta-article:hover {
transform: none;
}
}
@media (prefers-contrast: high) {
.blog-internal-page .content-section h2,
.blog-internal-page .content-section h3,
.blog-internal-page .article-title {
color: #000;
}
.blog-internal-page .engagement-btn,
.blog-internal-page .share-btn,
.blog-internal-page .btn-cta-article {
border-width: 3px;
}
.blog-internal-page .sidebar-widget {
border-width: 2px;
border-color: #1a3246;
}
}
/* ===== ARTICLE ENGAGEMENT SECTION - BLOG INTERNO ===== */
.blog-internal-page .article-engagement {
margin: 3rem 0;
padding: 2.5rem 2rem;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 24px;
border: 1px solid rgba(59, 130, 246, 0.12);
box-shadow:
0 8px 32px rgba(0, 102, 204, 0.06),
0 2px 8px rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
}
.blog-internal-page .article-engagement::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1a3246 0%, #f59e0b 50%, #1a3246 100%);
background-size: 200% 100%;
animation: engagementGradient 3s ease-in-out infinite;
}
@keyframes engagementGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.blog-internal-page .engagement-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.blog-internal-page .engagement-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.875rem;
padding: 2rem 2.25rem;
background: #ffffff;
border: 2px solid transparent;
border-radius: 20px;
color: #475569;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
min-width: 140px;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(0, 0, 0, 0.04);
text-decoration: none;
outline: none;
backdrop-filter: blur(10px);
}
.blog-internal-page .engagement-btn:focus {
outline: 3px solid rgba(0, 102, 204, 0.3);
outline-offset: 2px;
}
.blog-internal-page .engagement-btn i {
font-size: 1.75rem;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #6b7280;
}
.blog-internal-page .engagement-count {
font-weight: 800;
font-size: 1.5rem;
color: #0f172a;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
letter-spacing: -0.025em;
line-height: 1;
}
.blog-internal-page .engagement-label {
font-weight: 600;
font-size: 0.875rem;
color: #64748b;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
letter-spacing: 0.01em;
text-transform: uppercase;
font-size: 0.75rem;
}
/* Hover Effects Específicos */
.blog-internal-page .like-btn:hover {
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
border-color: #f87171;
color: #dc2626;
transform: translateY(-6px) scale(1.03);
box-shadow:
0 16px 40px rgba(239, 68, 68, 0.2),
0 4px 12px rgba(239, 68, 68, 0.15);
}
.blog-internal-page .like-btn:hover i {
color: #ef4444;
transform: scale(1.25);
animation: heartBeat 0.8s ease-in-out;
}
.blog-internal-page .like-btn:hover .engagement-count {
color: #dc2626;
transform: scale(1.05);
}
.blog-internal-page .like-btn:hover .engagement-label {
color: #dc2626;
}
@keyframes heartBeat {
0%, 50%, 100% { transform: scale(1.25); }
25%, 75% { transform: scale(1.4); }
}
.blog-internal-page .bookmark-btn:hover {
background: linear-gradient(135deg, #fffbeb 0%, #fed7aa 100%);
border-color: #fb923c;
color: #ea580c;
transform: translateY(-6px) scale(1.03);
box-shadow:
0 16px 40px rgba(245, 158, 11, 0.2),
0 4px 12px rgba(245, 158, 11, 0.15);
}
.blog-internal-page .bookmark-btn:hover i {
color: #f59e0b;
transform: scale(1.25) rotate(12deg);
}
.blog-internal-page .bookmark-btn:hover .engagement-label {
color: #ea580c;
}
.blog-internal-page .share-btn:hover {
background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
border-color: #60a5fa;
color: #1a3246;
transform: translateY(-6px) scale(1.03);
box-shadow:
0 16px 40px rgba(0, 102, 204, 0.2),
0 4px 12px rgba(0, 102, 204, 0.15);
}
.blog-internal-page .share-btn:hover i {
color: #1a3246;
transform: scale(1.25) rotate(18deg);
}
.blog-internal-page .share-btn:hover .engagement-label {
color: #1a3246;
}
/* Active States */
.blog-internal-page .engagement-btn:active {
transform: translateY(-2px) scale(0.97);
}
.blog-internal-page .like-btn.active {
background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
border-color: #ef4444;
color: #dc2626;
box-shadow:
0 8px 25px rgba(239, 68, 68, 0.25),
0 2px 8px rgba(239, 68, 68, 0.15);
}
.blog-internal-page .like-btn.active i {
color: #ef4444;
animation: likeActive 0.8s ease-in-out;
transform: scale(1.1);
}
.blog-internal-page .like-btn.active .engagement-count {
color: #dc2626;
}
.blog-internal-page .like-btn.active .engagement-label {
color: #dc2626;
}
@keyframes likeActive {
0% { transform: scale(1.1); }
50% { transform: scale(1.35); }
100% { transform: scale(1.15); }
}
.blog-internal-page .bookmark-btn.active {
background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
border-color: #f59e0b;
color: #ea580c;
box-shadow:
0 8px 25px rgba(245, 158, 11, 0.25),
0 2px 8px rgba(245, 158, 11, 0.15);
}
.blog-internal-page .bookmark-btn.active i {
color: #f59e0b;
transform: scale(1.1);
}
.blog-internal-page .bookmark-btn.active .engagement-label {
color: #ea580c;
}
/* Responsividade específica para Article Engagement */
@media (max-width: 768px) {
.blog-internal-page .article-engagement {
margin: 2rem 0;
padding: 2rem 1.5rem;
border-radius: 20px;
}
.blog-internal-page .engagement-actions {
gap: 1.5rem;
}
.blog-internal-page .engagement-btn {
padding: 1.75rem 2rem;
min-width: 120px;
border-radius: 16px;
}
.blog-internal-page .engagement-btn i {
font-size: 1.5rem;
}
.blog-internal-page .engagement-count {
font-size: 1.375rem;
}
.blog-internal-page .engagement-label {
font-size: 0.7rem;
}
}
@media (max-width: 576px) {
.blog-internal-page .article-engagement {
margin: 1.5rem 0;
padding: 1.75rem 1rem;
border-radius: 18px;
}
.blog-internal-page .engagement-actions {
gap: 1rem;
justify-content: space-around;
}
.blog-internal-page .engagement-btn {
padding: 1.5rem 1.75rem;
min-width: 110px;
gap: 0.75rem;
border-radius: 14px;
}
.blog-internal-page .engagement-btn i {
font-size: 1.375rem;
}
.blog-internal-page .engagement-count {
font-size: 1.25rem;
}
.blog-internal-page .engagement-label {
font-size: 0.65rem;
}
}
/* Accessibility - Reduced Motion para Article Engagement */
@media (prefers-reduced-motion: reduce) {
.blog-internal-page .article-engagement::before {
animation: none;
background: linear-gradient(90deg, #1a3246 0%, #f59e0b 100%);
}
.blog-internal-page .engagement-btn,
.blog-internal-page .engagement-btn i,
.blog-internal-page .engagement-count,
.blog-internal-page .engagement-label {
transition: none;
}
.blog-internal-page .engagement-btn:hover {
transform: none;
}
}
/* High Contrast Support para Article Engagement */
@media (prefers-contrast: high) {
.blog-internal-page .article-engagement {
background: #ffffff;
border: 2px solid #000000;
box-shadow: none;
}
.blog-internal-page .engagement-btn {
background: #ffffff;
border: 2px solid #000000;
color: #000000;
box-shadow: none;
}
.blog-internal-page .engagement-btn:hover {
background: #f0f0f0;
border-color: #000000;
color: #000000;
}
}
/* Print Styles para Article Engagement */
@media print {
.blog-internal-page .article-engagement {
background: none;
border: 1px solid #ccc;
box-shadow: none;
page-break-inside: avoid;
}
.blog-internal-page .engagement-btn {
background: none;
border: 1px solid #ccc;
box-shadow: none;
}
}
/* ===== FIM DA PÁGINA BLOG INTERNO ===== */
/* ===== FORMULÁRIO DE CONTATO - PÁGINA CONTATO ===== */
.contato-result {
margin-bottom: 1rem;
}
.form-control-moderno.is-valid {
border-color: #28a745;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.26.27c.3.31.77.31 1.08 0L7.4 3.24a.75.75 0 0 0-1.08-1.05L3.67 4.84 2.4 3.56A.75.75 0 0 0 1.31 4.6l1 1.13z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control-moderno.is-invalid {
border-color: #dc3545;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 2.4 2.8m0-2.4-2.4 2.4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 0.875em;
color: #dc3545;
}
.form-control-moderno.is-invalid ~ .invalid-feedback {
display: block;
}
.text-warning {
color: #ffc107 !important;
}
.text-danger {
color: #dc3545 !important;
}
.btn-loading {
display: none !important;
align-items: center;
}
.me-2 {
margin-right: 0.5rem !important;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.375rem;
}
.alert-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
}
.alert-danger {
color: #842029;
background-color: #f8d7da;
border-color: #f5c2c7;
}
.alert-dismissible .btn-close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 0.9375rem 1.25rem;
background: none;
border: 0;
font-size: 1.25rem;
opacity: 0.5;
cursor: pointer;
}
.alert-dismissible .btn-close:hover {
opacity: 0.75;
}
.fade {
transition: opacity 0.15s linear;
}
.fade:not(.show) {
opacity: 0;
}
.show {
opacity: 1;
}
/* ===== FIM DO FORMULÁRIO DE CONTATO ===== */
/* ============================================
TRABALHE CONOSCO - BOTÃO ENVIAR
============================================ */
.btn-trabalhe-submit {
background: linear-gradient(135deg, #228B22 0%, #006400 100%) !important;
color: white !important;
border: none !important;
padding: 1rem 3rem !important;
border-radius: 50px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
justify-content: center !important;
max-width: 320px !important;
margin: 0 auto !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-shadow: 0 4px 15px rgba(34, 139, 34, 0.3) !important;
}
.btn-trabalhe-submit:hover {
background: linear-gradient(135deg, #006400 0%, #004400 100%) !important;
color: white !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(34, 139, 34, 0.4) !important;
}
.btn-trabalhe-submit:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.3) !important;
}
.btn-trabalhe-submit:disabled {
opacity: 0.7 !important;
cursor: not-allowed !important;
transform: none !important;
}
.btn-trabalhe-submit .btn-text {
display: inline !important;
font-weight: 600 !important;
}
.btn-trabalhe-submit .btn-loading {
display: none !important;
align-items: center !important;
gap: 0.5rem !important;
}
.btn-trabalhe-submit .fa-paper-plane,
.btn-trabalhe-submit .fa-spinner {
font-size: 1rem !important;
}
.form-submit-moderno {
text-align: center !important;
margin-top: 2rem !important;
padding: 2rem 0 !important;
}
.form-note {
margin-top: 1rem !important;
font-size: 0.9rem !important;
color: #6c757d !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
}
.form-note i {
color: #228B22 !important;
}
/* ============================================
TRABALHE CONOSCO - HERO SECTION
============================================ */
.trabalhe-conosco-hero {
position: relative;
background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
color: white;
overflow: hidden;
padding: 80px 0;
}
.hero-content-trabalhe {
z-index: 3;
position: relative;
}
.titulo-trabalhe {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
color: white;
}
.subtitulo-trabalhe {
font-size: 1.3rem;
line-height: 1.6;
margin-bottom: 2.5rem;
color: rgba(255, 255, 255, 0.9);
}
.beneficios-rapidos {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 3rem;
}
.beneficio-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.beneficio-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.beneficio-icon {
width: 50px;
height: 50px;
background: var(--cor-secundaria);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: white;
flex-shrink: 0;
}
.beneficio-texto {
flex: 1;
}
.beneficio-texto strong {
display: block;
font-size: 1.1rem;
margin-bottom: 0.3rem;
color: white;
}
.beneficio-texto span {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
}
.hero-actions-trabalhe {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-hero-candidatar, .btn-hero-whatsapp {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-hero-candidatar {
background: var(--cor-secundaria);
color: white;
}
.btn-hero-candidatar:hover {
background: var(--cor-secundaria-escura);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.btn-hero-whatsapp {
background: rgba(255, 255, 255, 0.15);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-hero-whatsapp:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
}
/* ============================================
TRABALHE CONOSCO - FORMULÁRIO
============================================ */
.formulario-trabalhe-section {
padding: 80px 0;
background: #f8f9fa;
}
.form-section {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
}
.section-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.4rem;
font-weight: 600;
color: var(--cor-primaria);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e9ecef;
}
.section-title i {
color: var(--cor-secundaria);
font-size: 1.2rem;
}
/* Upload de Arquivo */
.file-upload-area {
position: relative;
border: 2px dashed #dee2e6;
border-radius: 12px;
padding: 2rem;
text-align: center;
background: #f8f9fa;
transition: all 0.3s ease;
cursor: pointer;
}
.file-upload-area:hover {
border-color: var(--cor-secundaria);
background: rgba(34, 139, 34, 0.05);
}
.file-upload-area.dragover {
border-color: var(--cor-secundaria);
background: rgba(34, 139, 34, 0.1);
}
.file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-upload-display {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.file-upload-icon {
font-size: 3rem;
color: var(--cor-secundaria);
}
.file-upload-text {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.file-upload-text strong {
font-size: 1.1rem;
color: var(--cor-primaria);
}
.file-upload-text small {
color: #6c757d;
font-size: 0.9rem;
}
.file-selected {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: rgba(34, 139, 34, 0.1);
border-radius: 8px;
border: 1px solid var(--cor-secundaria);
}
.file-selected i {
color: var(--cor-secundaria);
font-size: 1.5rem;
}
.file-name {
flex: 1;
font-weight: 500;
color: var(--cor-primaria);
}
.btn-remove-file {
background: #dc3545;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-remove-file:hover {
background: #c82333;
transform: scale(1.1);
}
/* Consentimento LGPD */
.lgpd-consent {
background: #f8f9fa;
border-radius: 12px;
padding: 1.5rem;
border-left: 4px solid var(--cor-secundaria);
}
.form-check {
margin-bottom: 1rem;
}
.form-check-input {
margin-right: 0.75rem;
transform: scale(1.2);
}
.form-check-label {
font-size: 0.95rem;
line-height: 1.5;
color: #495057;
}
.form-check-label strong {
color: var(--cor-primaria);
}
.form-check-label a {
color: var(--cor-secundaria);
text-decoration: none;
font-weight: 500;
}
.form-check-label a:hover {
text-decoration: underline;
}
/* Botão de Envio */
.btn-trabalhe-submit {
background: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-secundaria-escura) 100%);
color: white;
border: none;
padding: 1rem 3rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
width: 100%;
justify-content: center;
max-width: 300px;
}
.btn-trabalhe-submit:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(34, 139, 34, 0.3);
}
.btn-trabalhe-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* ============================================
TRABALHE CONOSCO - SIDEBAR
============================================ */
.trabalhe-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.trabalhe-info-widget, .trabalhe-dicas-widget, .rh-contato-widget {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
}
.widget-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.3rem;
font-weight: 600;
color: var(--cor-primaria);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e9ecef;
}
.widget-title i {
color: var(--cor-secundaria);
}
.trabalhe-beneficios-list {
list-style: none;
padding: 0;
margin: 0;
}
.trabalhe-beneficios-list .beneficio-item {
display: flex;
gap: 1rem;
padding: 1.5rem 0;
border-bottom: 1px solid #e9ecef;
}
.trabalhe-beneficios-list .beneficio-item:last-child {
border-bottom: none;
}
.trabalhe-beneficios-list .beneficio-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-secundaria-escura));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
flex-shrink: 0;
}
.beneficio-details h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--cor-primaria);
margin-bottom: 0.5rem;
}
.beneficio-details p {
font-size: 0.9rem;
color: #6c757d;
margin: 0;
line-height: 1.5;
}
/* Dicas Widget */
.dicas-list {
list-style: none;
padding: 0;
margin: 0;
}
.dicas-list li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
font-size: 0.95rem;
color: #495057;
}
.dicas-list li i {
color: var(--cor-secundaria);
font-size: 0.9rem;
}
/* RH Contato Widget */
.rh-contato-content {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.rh-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-secundaria-escura));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.rh-text h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--cor-primaria);
margin-bottom: 0.5rem;
}
.rh-text p {
font-size: 0.95rem;
color: #6c757d;
margin: 0;
}
.btn-rh-contato {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: #f59e0b;
color: white;
text-decoration: none;
padding: 1rem 1.5rem;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-rh-contato:hover {
background: #128C7E;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}
/* Área de Resultado */
.trabalhe-result {
margin-bottom: 1rem;
}
/* ============================================
TRABALHE CONOSCO - RESPONSIVIDADE
============================================ */
@media (max-width: 992px) {
.titulo-trabalhe {
font-size: 2.5rem;
}
.subtitulo-trabalhe {
font-size: 1.2rem;
}
.beneficios-rapidos {
gap: 1rem;
}
.hero-actions-trabalhe {
justify-content: center;
}
.form-section {
padding: 1.5rem;
}
.section-title {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.trabalhe-conosco-hero {
padding: 60px 0;
}
.titulo-trabalhe {
font-size: 2rem;
}
.subtitulo-trabalhe {
font-size: 1.1rem;
}
.beneficio-item {
padding: 0.75rem;
}
.beneficio-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-actions-trabalhe {
flex-direction: column;
align-items: center;
}
.btn-hero-candidatar, .btn-hero-whatsapp {
width: 100%;
justify-content: center;
max-width: 280px;
}
.formulario-trabalhe-section {
padding: 60px 0;
}
.form-section {
padding: 1rem;
margin-bottom: 1.5rem;
}
.file-upload-area {
padding: 1.5rem;
}
.trabalhe-sidebar {
margin-top: 2rem;
}
.trabalhe-info-widget, .trabalhe-dicas-widget, .rh-contato-widget {
padding: 1.5rem;
}
}
@media (max-width: 576px) {
.titulo-trabalhe {
font-size: 1.8rem;
}
.beneficios-rapidos {
gap: 0.75rem;
}
.beneficio-item {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.file-upload-icon {
font-size: 2.5rem;
}
.file-upload-text strong {
font-size: 1rem;
}
.file-upload-text small {
font-size: 0.85rem;
}
}
/* ===== APRESENTAO DE SERVIOS - AO SAT RASTREADORES ===== */
/* Seo Principal */
.apresentacao-servicos-section {
position: relative;
margin: 100px 0;
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
overflow: hidden;
}
/* Container e Row */
.apresentacao-servicos-section .container-fluid {
padding: 0 15px;
}
.apresentacao-servicos-section .row {
margin: 0;
display: flex;
align-items: stretch;
}
.apresentacao-servicos-section .col-lg-6 {
padding: 15px;
display: flex;
}
/* Wrappers de Contedo */
.servicos-carro-wrapper,
.servicos-moto-wrapper {
width: 100%;
border-radius: 25px;
padding: 60px 50px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transform: translateY(0);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.servicos-carro-wrapper {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid rgba(231, 76, 60, 0.1);
}
.servicos-moto-wrapper {
background: linear-gradient(135deg, #1a3246 0%, #34495e 100%);
color: white;
}
/* Efeitos de Hover */
.servicos-carro-wrapper:hover {
transform: translateY(-15px);
box-shadow: 0 40px 80px rgba(231, 76, 60, 0.15);
border-color: rgba(231, 76, 60, 0.3);
}
.servicos-moto-wrapper:hover {
transform: translateY(-15px);
box-shadow: 0 40px 80px rgba(45, 61, 79, 0.4);
}
/* Contedo dos Wrappers */
.servicos-carro-content,
.servicos-moto-content {
position: relative;
z-index: 2;
}
/* Ttulos Principais */
.servicos-titulo-wrapper {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.servicos-titulo {
font-size: 3rem;
font-weight: 900;
color: #1a3246;
margin: 0 0 15px 0;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
line-height: 1.1;
}
.servicos-moto-wrapper .servicos-titulo {
color: #ffffff;
}
.servicos-subtitulo {
font-size: 1.2rem;
color: #666;
margin: 0;
font-weight: 400;
opacity: 0.8;
}
.servicos-moto-wrapper .servicos-subtitulo {
color: rgba(255, 255, 255, 0.8);
}
/* Linha Decorativa Sob o Ttulo */
.servicos-titulo-wrapper::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 5px;
background: linear-gradient(90deg, #f59e0b, #c0392b);
border-radius: 3px;
}
.servicos-moto-wrapper .servicos-titulo-wrapper::after {
background: linear-gradient(90deg, #f59e0b, #128c7e);
}
/* Lista de Servios */
.servicos-lista {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Itens de Servio */
.servico-item {
display: flex;
align-items: flex-start;
gap: 25px;
padding: 30px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
border-left: 6px solid #f59e0b;
backdrop-filter: blur(15px);
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.servico-item:hover {
transform: translateX(15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 1);
}
.servicos-moto-wrapper .servico-item {
background: rgba(255, 255, 255, 0.15);
border-left-color: #f59e0b;
backdrop-filter: blur(20px);
}
.servicos-moto-wrapper .servico-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateX(15px);
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}
/* Wrapper do cone */
.servico-icon-wrapper {
flex-shrink: 0;
position: relative;
}
/* cones dos Servios */
.servico-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #1a3246, #1a3246);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffb413;
font-size: 1.8rem;
box-shadow: 0 12px 25px rgba(26, 50, 70, 0.3);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.servico-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), transparent);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
}
.servico-item:hover .servico-icon::before {
opacity: 1;
}
.servico-item:hover .servico-icon {
transform: scale(1.1) rotate(5deg);
}
.servicos-moto-wrapper .servico-icon {
background: linear-gradient(135deg, #1a3246, #1a3246);
box-shadow: 0 12px 25px rgba(26, 50, 70, 0.3);
}
/* Contedo dos Servios */
.servico-content {
flex: 1;
min-width: 0;
}
.servico-content .servico-titulo {
font-size: 1.4rem;
font-weight: 700;
color: #1a3246;
margin: 0 0 15px 0;
line-height: 1.3;
transition: color 0.3s ease;
}
.servico-content .servico-descricao {
font-size: 1rem;
color: #666;
line-height: 1.7;
margin: 0;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.servico-item:hover .servico-content .servico-titulo {
color: #f59e0b;
}
.servico-item:hover .servico-content .servico-descricao {
opacity: 1;
}
.servicos-moto-wrapper .servico-content .servico-titulo {
color: #ffffff;
}
.servicos-moto-wrapper .servico-content .servico-descricao {
color: rgba(255, 255, 255, 0.9);
}
.servicos-moto-wrapper .servico-item:hover .servico-content .servico-titulo {
color: #f59e0b;
}
/* Separador Visual */
.servicos-separador-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.servicos-separador {
width: 5px;
height: 100px;
background: linear-gradient(180deg, #f59e0b 0%, #f59e0b 100%);
border-radius: 3px;
position: relative;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}
.separador-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #f59e0b;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}
/* Elementos Decorativos */
.servicos-carro-wrapper::before,
.servicos-moto-wrapper::before {
content: '';
position: absolute;
top: -60%;
right: -60%;
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
}
.servicos-carro-wrapper:hover::before,
.servicos-moto-wrapper:hover::before {
opacity: 1;
}
/* Partculas Decorativas */
.servicos-decorativos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.decorativo-particula {
position: absolute;
width: 6px;
height: 6px;
background: rgba(231, 76, 60, 0.3);
border-radius: 50%;
animation: flutuar 8s infinite ease-in-out;
}
.decorativo-particula:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.decorativo-particula:nth-child(2) {
top: 60%;
left: 5%;
animation-delay: 2s;
}
.decorativo-particula:nth-child(3) {
top: 80%;
left: 15%;
animation-delay: 4s;
}
.decorativo-particula:nth-child(4) {
top: 30%;
right: 10%;
animation-delay: 1s;
}
.decorativo-particula:nth-child(5) {
top: 70%;
right: 5%;
animation-delay: 3s;
}
@keyframes flutuar {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.8;
}
}
/* Responsividade */
@media (max-width: 1199.98px) {
.servicos-titulo {
font-size: 2.5rem;
}
.servicos-carro-wrapper,
.servicos-moto-wrapper {
padding: 50px 40px;
}
.servico-item {
padding: 25px;
gap: 20px;
}
.servico-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
color: #ffb413;
}
}
@media (max-width: 991.98px) {
.apresentacao-servicos-section {
margin: 80px 0;
padding: 60px 0;
}
.servicos-carro-wrapper,
.servicos-moto-wrapper {
padding: 40px 30px;
margin-bottom: 30px;
}
.servicos-titulo {
font-size: 2.2rem;
letter-spacing: 2px;
}
.servicos-separador-container {
display: none;
}
.servico-item {
padding: 20px;
gap: 15px;
}
.servico-icon {
width: 55px;
height: 55px;
font-size: 1.4rem;
color: #ffb413;
}
.servico-content .servico-titulo {
font-size: 1.2rem;
}
.servico-content .servico-descricao {
font-size: 0.95rem;
}
}
@media (max-width: 767.98px) {
.apresentacao-servicos-section .col-lg-6 {
padding: 10px;
}
.servicos-carro-wrapper,
.servicos-moto-wrapper {
padding: 35px 25px;
margin-bottom: 25px;
}
.servicos-titulo {
font-size: 1.8rem;
letter-spacing: 1px;
}
.servicos-subtitulo {
font-size: 1rem;
}
.servicos-titulo-wrapper {
margin-bottom: 40px;
}
.servicos-lista {
gap: 25px;
}
.servico-item {
padding: 18px;
gap: 15px;
}
.servico-content .servico-titulo {
font-size: 1.1rem;
margin-bottom: 12px;
}
.servico-content .servico-descricao {
font-size: 0.9rem;
line-height: 1.6;
}
}
@media (max-width: 575.98px) {
.apresentacao-servicos-section {
margin: 60px 0;
padding: 40px 0;
}
.servicos-carro-wrapper,
.servicos-moto-wrapper {
padding: 30px 20px;
margin-bottom: 20px;
border-radius: 20px;
}
.servicos-titulo {
font-size: 1.6rem;
}
.servico-item {
flex-direction: column;
text-align: center;
gap: 15px;
padding: 20px 15px;
}
.servico-icon-wrapper {
align-self: center;
}
.servico-icon {
width: 50px;
height: 50px;
font-size: 1.3rem;
color: #ffb413;
}
.servico-content .servico-titulo {
font-size: 1rem;
margin-bottom: 10px;
}
.servico-content .servico-descricao {
font-size: 0.85rem;
line-height: 1.5;
}
.servicos-decorativos {
display: none;
}
}
/* Reset para animaes AOS para garantir visibilidade */
.apresentacao-servicos-section [data-aos] {
opacity: 1;
transform: none;
visibility: visible;
transition-delay: 0s;
}
/* Estados de carregamento */
.apresentacao-servicos-section * {
box-sizing: border-box;
}
/* Fora exibio para debug */
.apresentacao-servicos-section,
.servicos-carro-wrapper,
.servicos-moto-wrapper,
.servicos-carro-content,
.servicos-moto-content,
.servicos-lista,
.servico-item,
.servico-content {
display: block;
visibility: visible;
opacity: 1;
}
.servicos-lista {
display: flex;
}
.servico-item {
display: flex;
}
.servico-icon {
display: flex;
color: #ffb413 !important;
}
.servico-icon i {
color: #ffb413 !important;
}
/* ===== SEO DE PLANOS - AO SAT RASTREADORES ===== */
/* Seo Principal */
.planos-section {
position: relative;
margin: 120px 0;
padding: 100px 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
overflow: hidden;
}
.planos-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
/* Container e Row */
.planos-section .container {
position: relative;
z-index: 2;
}
.planos-section .row {
align-items: center;
}
/* Contedo do Lado Esquerdo */
.planos-content {
color: white;
padding-right: 60px;
}
.planos-header {
margin-bottom: 40px;
}
.planos-titulo {
font-size: 3.5rem;
font-weight: 900;
color: white;
margin: 0 0 30px 0;
line-height: 1.1;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
animation: slideInLeft 1s ease-out;
}
.planos-descricao {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin: 0 0 25px 0;
line-height: 1.6;
font-weight: 400;
animation: slideInLeft 1s ease-out 0.2s both;
}
.planos-detalhes {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.7;
font-weight: 300;
animation: slideInLeft 1s ease-out 0.4s both;
}
/* Boto de Ao */
.planos-actions {
margin-top: 50px;
animation: slideInLeft 1s ease-out 0.6s both;
}
.btn-planos-cliente {
display: inline-flex;
align-items: center;
padding: 18px 35px;
background: transparent;
color: white;
text-decoration: none;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.btn-planos-cliente::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-planos-cliente:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
color: white;
text-decoration: none;
}
.btn-planos-cliente:hover::before {
left: 100%;
}
/* Dispositivos do Lado Direito */
.planos-devices {
position: relative;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
/* Tablet */
.device-tablet {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-15deg);
width: 280px;
height: 200px;
background: #1a1a1a;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
animation: floatTablet 6s ease-in-out infinite;
z-index: 3;
}
.tablet-screen {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
margin: 8px;
overflow: hidden;
position: relative;
}
.app-interface {
padding: 15px;
height: 100%;
display: flex;
flex-direction: column;
}
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.app-title {
color: white;
font-weight: 700;
font-size: 0.9rem;
}
.app-status {
display: flex;
align-items: center;
color: white;
font-size: 0.7rem;
}
.status-dot {
width: 8px;
height: 8px;
background: #f59e0b;
border-radius: 50%;
margin-right: 5px;
animation: pulse 2s infinite;
}
.app-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.app-chart {
display: flex;
align-items: end;
gap: 8px;
height: 60px;
}
.chart-bar {
flex: 1;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
animation: chartGrow 2s ease-out;
}
.app-stats {
display: flex;
justify-content: space-around;
}
.stat-item {
text-align: center;
color: white;
}
.stat-number {
display: block;
font-size: 1.2rem;
font-weight: 900;
line-height: 1;
}
.stat-label {
display: block;
font-size: 0.6rem;
opacity: 0.8;
margin-top: 2px;
}
/* Smartphone */
.device-phone {
position: absolute;
top: 60%;
left: 60%;
transform: translate(-50%, -50%) rotate(15deg);
width: 120px;
height: 200px;
background: #1a1a1a;
border-radius: 25px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
animation: floatPhone 6s ease-in-out infinite 1s;
z-index: 2;
}
.phone-screen {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
margin: 6px;
overflow: hidden;
position: relative;
}
.app-interface-mobile {
padding: 12px;
height: 100%;
display: flex;
flex-direction: column;
}
.mobile-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.mobile-title {
color: white;
font-weight: 700;
font-size: 0.8rem;
}
.mobile-icon {
color: white;
font-size: 0.9rem;
}
.mobile-map {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
position: relative;
margin-bottom: 10px;
}
.map-point {
position: absolute;
top: 30%;
left: 50%;
width: 8px;
height: 8px;
background: #f59e0b;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: mapPulse 3s infinite;
}
.map-route {
position: absolute;
bottom: 20%;
left: 20%;
width: 60%;
height: 2px;
background: rgba(37, 211, 102, 0.6);
border-radius: 1px;
}
.mobile-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.info-item {
display: flex;
justify-content: space-between;
color: white;
font-size: 0.6rem;
}
.info-label {
opacity: 0.8;
}
.info-value {
font-weight: 600;
}
/* Elementos Decorativos */
.planos-decorativos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.decorativo-circulo {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: float 8s ease-in-out infinite;
}
.decorativo-circulo.decorativo-1 {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.decorativo-circulo.decorativo-2 {
width: 120px;
height: 120px;
top: 60%;
right: 15%;
animation-delay: 2s;
}
.decorativo-circulo.decorativo-3 {
width: 60px;
height: 60px;
bottom: 30%;
left: 20%;
animation-delay: 4s;
}
.decorativo-linha {
position: absolute;
background: rgba(255, 255, 255, 0.1);
animation: slide 10s linear infinite;
}
.decorativo-linha.decorativo-4 {
width: 100px;
height: 2px;
top: 40%;
left: -100px;
animation-delay: 1s;
}
.decorativo-linha.decorativo-5 {
width: 150px;
height: 1px;
bottom: 40%;
right: -150px;
animation-delay: 3s;
}
/* Animaes */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes floatTablet {
0%, 100% {
transform: translate(-50%, -50%) rotate(-15deg) translateY(0px);
}
50% {
transform: translate(-50%, -50%) rotate(-15deg) translateY(-20px);
}
}
@keyframes floatPhone {
0%, 100% {
transform: translate(-50%, -50%) rotate(15deg) translateY(0px);
}
50% {
transform: translate(-50%, -50%) rotate(15deg) translateY(-15px);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-30px) rotate(180deg);
opacity: 0.6;
}
}
@keyframes slide {
0% {
transform: translateX(0);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateX(400px);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.2);
}
}
@keyframes chartGrow {
from {
height: 0;
}
to {
height: var(--height);
}
}
@keyframes mapPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.7;
}
}
/* Responsividade */
@media (max-width: 1199.98px) {
.planos-titulo {
font-size: 3rem;
}
.planos-descricao {
font-size: 1.2rem;
}
.planos-content {
padding-right: 40px;
}
.device-tablet {
width: 250px;
height: 180px;
}
.device-phone {
width: 100px;
height: 170px;
}
}
@media (max-width: 991.98px) {
.planos-section {
margin: 80px 0;
padding: 80px 0;
}
.planos-content {
padding-right: 0;
margin-bottom: 60px;
text-align: center;
}
.planos-titulo {
font-size: 2.5rem;
}
.planos-descricao {
font-size: 1.1rem;
}
.planos-detalhes {
font-size: 0.95rem;
}
.planos-devices {
height: 500px;
}
.device-tablet {
width: 220px;
height: 160px;
}
.device-phone {
width: 90px;
height: 150px;
}
}
@media (max-width: 767.98px) {
.planos-section {
margin: 60px 0;
padding: 60px 0;
}
.planos-titulo {
font-size: 2rem;
margin-bottom: 20px;
}
.planos-descricao {
font-size: 1rem;
margin-bottom: 20px;
}
.planos-detalhes {
font-size: 0.9rem;
}
.planos-actions {
margin-top: 30px;
}
.btn-planos-cliente {
padding: 15px 30px;
font-size: 1rem;
}
.planos-devices {
height: 400px;
}
.device-tablet {
width: 180px;
height: 130px;
}
.device-phone {
width: 70px;
height: 120px;
}
.app-interface {
padding: 10px;
}
.app-header {
margin-bottom: 10px;
}
.app-title {
font-size: 0.7rem;
}
.app-status {
font-size: 0.6rem;
}
.app-chart {
height: 40px;
gap: 5px;
}
.stat-number {
font-size: 1rem;
}
.stat-label {
font-size: 0.5rem;
}
}
@media (max-width: 575.98px) {
.planos-section {
margin: 40px 0;
padding: 40px 0;
}
.planos-titulo {
font-size: 1.8rem;
}
.planos-descricao {
font-size: 0.95rem;
}
.planos-detalhes {
font-size: 0.85rem;
}
.btn-planos-cliente {
padding: 12px 25px;
font-size: 0.9rem;
}
.planos-devices {
height: 300px;
}
.device-tablet {
width: 150px;
height: 110px;
}
.device-phone {
width: 60px;
height: 100px;
}
.app-interface {
padding: 8px;
}
.app-chart {
height: 30px;
gap: 3px;
}
.stat-number {
font-size: 0.8rem;
}
.stat-label {
font-size: 0.4rem;
}
.decorativo-circulo,
.decorativo-linha {
display: none;
}
}
/* ===== VARIVEIS DE CORES DA MARCA AO SAT ===== */
:root {
--acao-azul: #1a3246; /* Azul marinho escuro */
--acao-ouro: #f59e0b; /* Amarelo-ouro vibrante */
--acao-cinza: #6b7280; /* Cinza claro */
--acao-azul-claro: #3b82f6; /* Azul mais claro para hover */
--acao-ouro-claro: #fbbf24; /* Ouro mais claro para hover */
--acao-branco: #ffffff;
--acao-cinza-claro: #f3f4f6;
--acao-cinza-escuro: #374151;
}
/* ===== SEO DE PLANOS2 - COMPARAO DE PREOS ===== */
/* Seo Principal */
.planos2-section {
position: relative;
margin: 120px 0;
padding: 100px 0;
background: linear-gradient(135deg, var(--acao-branco) 0%, var(--acao-cinza-claro) 100%);
overflow: hidden;
}
.planos2-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Container */
.planos2-section .container {
position: relative;
z-index: 2;
}
/* Cabealho da Seo */
.planos2-titulo {
font-size: 3.5rem;
font-weight: 900;
color: var(--acao-azul);
margin: 0 0 20px 0;
text-align: center;
line-height: 1.1;
animation: slideInDown 1s ease-out;
}
.planos2-subtitulo {
font-size: 1.3rem;
color: var(--acao-cinza-escuro);
margin: 0;
text-align: center;
line-height: 1.6;
font-weight: 400;
animation: slideInDown 1s ease-out 0.2s both;
}
/* Wrapper da Tabela */
.planos2-table-wrapper {
margin-top: 60px;
animation: slideInUp 1s ease-out 0.4s both;
}
.planos2-table {
background: var(--acao-branco);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
/* Cabealho da Tabela */
.planos2-table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
background: linear-gradient(135deg, var(--acao-azul) 0%, var(--acao-azul-claro) 100%);
color: var(--acao-branco);
padding: 40px 30px;
}
.planos2-col-vantagens {
display: flex;
align-items: center;
padding: 0 20px;
}
.planos2-col-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
color: var(--acao-branco);
}
.planos2-col-plano {
text-align: center;
padding: 0 15px;
position: relative;
}
.plano-header {
position: relative;
}
.plano-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--acao-ouro), var(--acao-ouro-claro));
color: var(--acao-branco);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
animation: pulse 2s infinite;
}
.plano-nome {
font-size: 1.3rem;
font-weight: 800;
margin: 0 0 15px 0;
color: var(--acao-branco);
}
.plano-preco {
margin-bottom: 10px;
}
.preco-valor {
font-size: 2.5rem;
font-weight: 900;
color: var(--acao-ouro);
display: block;
line-height: 1;
}
.preco-periodo {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
}
.plano-descricao {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
line-height: 1.4;
}
/* Corpo da Tabela */
.planos2-table-body {
background: white;
}
.planos2-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
border-bottom: 1px solid #e9ecef;
transition: background-color 0.3s ease;
}
.planos2-row:hover {
background-color: #f8f9fa;
}
.planos2-row:last-child {
border-bottom: none;
}
.planos2-col-vantagens {
display: flex;
align-items: center;
padding: 20px;
background: #f8f9fa;
}
.vantagem-texto {
font-size: 1rem;
font-weight: 500;
color: #1a3246;
line-height: 1.4;
}
.planos2-col-plano {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 15px;
position: relative;
}
.plano-check {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
font-size: 1.2rem;
transition: all 0.3s ease;
animation: checkPop 0.6s ease-out;
}
.plano-check.plano-nao {
background: linear-gradient(135deg, #f59e0b, #c0392b);
}
.plano-check:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.plano-check.plano-nao:hover {
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}
/* Footer da Tabela */
.planos2-table-footer {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
background: #f8f9fa;
padding: 40px 30px;
border-top: 1px solid #e9ecef;
}
.planos2-col-vantagens {
/* Espao vazio */
}
.planos2-col-plano {
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
}
.btn-plano {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: linear-gradient(135deg, #f59e0b, #128c7e);
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
position: relative;
overflow: hidden;
}
.btn-plano::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-plano:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
color: white;
text-decoration: none;
}
.btn-plano:hover::before {
left: 100%;
}
.btn-plano-destaque {
background: linear-gradient(135deg, #f59e0b, #c0392b);
box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
animation: pulse 2s infinite;
}
.btn-plano-destaque:hover {
box-shadow: 0 15px 30px rgba(231, 76, 60, 0.4);
}
/* Elementos Decorativos */
.planos2-decorativos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.planos2-decorativos .decorativo-circulo {
position: absolute;
border-radius: 50%;
background: rgba(231, 76, 60, 0.1);
animation: float 8s ease-in-out infinite;
}
.planos2-decorativos .decorativo-circulo.decorativo-1 {
width: 100px;
height: 100px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.planos2-decorativos .decorativo-circulo.decorativo-2 {
width: 80px;
height: 80px;
bottom: 30%;
right: 15%;
animation-delay: 2s;
}
.planos2-decorativos .decorativo-linha {
position: absolute;
background: rgba(231, 76, 60, 0.1);
animation: slide 10s linear infinite;
}
.planos2-decorativos .decorativo-linha.decorativo-3 {
width: 120px;
height: 2px;
top: 40%;
left: -120px;
animation-delay: 1s;
}
.planos2-decorativos .decorativo-linha.decorativo-4 {
width: 80px;
height: 1px;
bottom: 40%;
right: -80px;
animation-delay: 3s;
}
/* Animaes */
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes checkPop {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Responsividade */
@media (max-width: 1199.98px) {
.planos2-titulo {
font-size: 3rem;
}
.planos2-subtitulo {
font-size: 1.2rem;
}
.planos2-table-header {
padding: 30px 20px;
}
.plano-nome {
font-size: 1.2rem;
}
.preco-valor {
font-size: 2.2rem;
}
}
@media (max-width: 991.98px) {
.planos2-section {
margin: 80px 0;
padding: 80px 0;
}
.planos2-titulo {
font-size: 2.5rem;
}
.planos2-subtitulo {
font-size: 1.1rem;
}
.planos2-table-wrapper {
margin-top: 40px;
}
.planos2-table-header {
grid-template-columns: 1fr;
padding: 30px 20px;
gap: 20px;
}
.planos2-col-vantagens {
display: none;
}
.planos2-row {
grid-template-columns: 1fr;
gap: 15px;
padding: 20px;
border-bottom: 2px solid #e9ecef;
}
.planos2-col-vantagens {
display: block;
background: none;
padding: 0;
text-align: center;
border-bottom: 1px solid #e9ecef;
padding-bottom: 10px;
margin-bottom: 15px;
}
.vantagem-texto {
font-size: 1.1rem;
font-weight: 600;
color: #1a3246;
}
.planos2-col-plano {
padding: 10px;
flex-direction: column;
gap: 10px;
}
.plano-check {
width: 35px;
height: 35px;
font-size: 1rem;
}
.planos2-table-footer {
grid-template-columns: 1fr;
gap: 20px;
padding: 30px 20px;
}
.btn-plano {
width: 100%;
justify-content: center;
padding: 18px 30px;
font-size: 1.1rem;
}
}
@media (max-width: 767.98px) {
.planos2-section {
margin: 60px 0;
padding: 60px 0;
}
.planos2-titulo {
font-size: 2rem;
margin-bottom: 15px;
}
.planos2-subtitulo {
font-size: 1rem;
}
.planos2-table-wrapper {
margin-top: 30px;
}
.planos2-table {
border-radius: 15px;
}
.planos2-table-header {
padding: 25px 15px;
}
.plano-badge {
font-size: 0.7rem;
padding: 6px 12px;
}
.plano-nome {
font-size: 1.1rem;
margin-bottom: 10px;
}
.preco-valor {
font-size: 1.8rem;
}
.preco-periodo {
font-size: 0.9rem;
}
.plano-descricao {
font-size: 0.8rem;
}
.planos2-row {
padding: 15px;
}
.vantagem-texto {
font-size: 1rem;
}
.planos2-table-footer {
padding: 25px 15px;
}
.btn-plano {
padding: 15px 25px;
font-size: 1rem;
}
}
@media (max-width: 575.98px) {
.planos2-section {
margin: 40px 0;
padding: 40px 0;
}
.planos2-titulo {
font-size: 1.8rem;
}
.planos2-subtitulo {
font-size: 0.95rem;
}
.planos2-table {
border-radius: 10px;
}
.planos2-table-header {
padding: 20px 10px;
}
.plano-nome {
font-size: 1rem;
}
.preco-valor {
font-size: 1.6rem;
}
.planos2-row {
padding: 12px;
}
.vantagem-texto {
font-size: 0.9rem;
}
.plano-check {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.planos2-table-footer {
padding: 20px 10px;
}
.btn-plano {
padding: 12px 20px;
font-size: 0.9rem;
}
.planos2-decorativos .decorativo-circulo,
.planos2-decorativos .decorativo-linha {
display: none;
}
}
/* ===== SEO DE PLANOS2 - DESIGN MODERNO MELHORADO ===== */
.planos2-section {
position: relative;
margin: 120px 0;
padding: 100px 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f8faff 100%);
overflow: hidden;
}
/* Cabealho da Seo */
.planos2-titulo {
font-size: 3rem;
font-weight: 800;
color: #1a3246;
margin-bottom: 1rem;
text-align: center;
position: relative;
}
.planos2-titulo::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a3246, #ffb413);
border-radius: 2px;
animation: lineGrow 2s ease-out;
}
.planos2-subtitulo {
font-size: 1.2rem;
color: #6c757d;
text-align: center;
line-height: 1.6;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Container da Tabela */
.planos2-table-wrapper {
position: relative;
z-index: 2;
}
.planos2-table {
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(26, 50, 70, 0.15);
position: relative;
}
.planos2-table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 180, 19, 0.1) 0%, transparent 50%, rgba(255, 180, 19, 0.05) 100%);
pointer-events: none;
}
/* Cabealho da Tabela */
.planos2-table-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
padding: 0;
position: relative;
}
.planos2-col-vantagens {
background: rgba(255, 255, 255, 0.95);
padding: 2rem 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.planos2-col-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a3246;
margin: 0;
text-align: center;
}
.planos2-col-plano {
padding: 2rem 1.5rem;
text-align: center;
position: relative;
transition: all 0.3s ease;
}
.planos2-col-plano:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
.plano-destaque {
background: linear-gradient(135deg, rgba(255, 180, 19, 0.15) 0%, rgba(255, 180, 19, 0.05) 100%);
border: 2px solid #ffb413;
border-radius: 15px;
margin: 0.5rem;
position: relative;
z-index: 2;
}
.plano-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #ffb413 0%, #e09e00 100%);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(255, 180, 19, 0.4);
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.05); }
}
.plano-header {
margin-top: 1rem;
}
.plano-nome {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plano-preco {
margin-bottom: 1rem;
}
.preco-valor {
font-size: 2.5rem;
font-weight: 800;
color: #ffb413;
display: block;
line-height: 1;
}
.preco-periodo {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.plano-descricao {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
margin: 0;
line-height: 1.4;
}
/* Corpo da Tabela */
.planos2-table-body {
background: white;
}
.planos2-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
border-bottom: 1px solid #f1f3f4;
transition: all 0.3s ease;
}
.planos2-row:hover {
background: rgba(26, 50, 70, 0.02);
}
.planos2-row:last-child {
border-bottom: none;
}
.planos2-col-vantagens {
background: #f8faff;
padding: 1.5rem;
display: flex;
align-items: center;
border-right: 1px solid #e9ecef;
}
.vantagem-texto {
font-size: 0.95rem;
color: #495057;
font-weight: 500;
margin: 0;
}
.planos2-col-plano {
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.plano-check {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
animation: checkPulse 2s ease-in-out infinite;
}
@keyframes checkPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.plano-nao {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}
/* Footer da Tabela */
.planos2-table-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
background: linear-gradient(135deg, #1a3246 0%, #1a3246 100%);
padding: 2rem 1.5rem;
}
.planos2-col-vantagens {
background: transparent;
border: none;
}
.btn-plano {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #ffb413 0%, #e09e00 100%);
color: white;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(255, 180, 19, 0.4);
position: relative;
overflow: hidden;
}
.btn-plano::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-plano:hover::before {
left: 100%;
}
.btn-plano:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 180, 19, 0.6);
color: white;
text-decoration: none;
}
.btn-plano-destaque {
background: linear-gradient(135deg, #ffb413 0%, #e09e00 100%);
box-shadow: 0 8px 25px rgba(255, 180, 19, 0.5);
animation: buttonGlow 2s ease-in-out infinite;
}
@keyframes buttonGlow {
0%, 100% { box-shadow: 0 8px 25px rgba(255, 180, 19, 0.4); }
50% { box-shadow: 0 12px 35px rgba(255, 180, 19, 0.7); }
}
/* Elementos Decorativos */
.planos2-decorativos {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.decorativo-circulo {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(26, 50, 70, 0.1), rgba(255, 180, 19, 0.1));
animation: float 6s ease-in-out infinite;
}
.decorativo-circulo.decorativo-1 {
width: 200px;
height: 200px;
top: -100px;
right: -100px;
animation-delay: 0s;
}
.decorativo-circulo.decorativo-2 {
width: 150px;
height: 150px;
bottom: -75px;
left: -75px;
animation-delay: 2s;
}
.decorativo-linha {
position: absolute;
background: linear-gradient(90deg, transparent, rgba(255, 180, 19, 0.2), transparent);
animation: slide 8s ease-in-out infinite;
}
.decorativo-linha.decorativo-3 {
width: 300px;
height: 2px;
top: 20%;
right: -150px;
animation-delay: 1s;
}
.decorativo-linha.decorativo-4 {
width: 200px;
height: 2px;
bottom: 30%;
left: -100px;
animation-delay: 3s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes slide {
0%, 100% { transform: translateX(0px); opacity: 0.3; }
50% { transform: translateX(50px); opacity: 0.8; }
}
/* Responsividade */
@media (max-width: 991.98px) {
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
grid-template-columns: 1fr;
gap: 1rem;
}
.planos2-col-vantagens {
border-right: none;
border-bottom: 1px solid #e9ecef;
}
.plano-destaque {
margin: 0;
border-radius: 15px;
}
.planos2-titulo {
font-size: 2.5rem;
}
.planos2-subtitulo {
font-size: 1.1rem;
}
}
@media (max-width: 575.98px) {
.planos2-section {
margin: 60px 0;
padding: 60px 0;
}
.planos2-titulo {
font-size: 2rem;
}
.planos2-subtitulo {
font-size: 1rem;
}
.plano-nome {
font-size: 1.1rem;
}
.preco-valor {
font-size: 2rem;
}
.btn-plano {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.decorativo-circulo,
.decorativo-linha {
display: none;
}
}
/* Animaes de entrada */
.planos2-section {
animation: fadeInUp 1s ease-out;
}
.planos2-table {
animation: slideInUp 1.2s ease-out 0.3s both;
}
.planos2-col-plano {
animation: fadeInScale 0.8s ease-out 0.6s both;
}
.planos2-col-plano:nth-child(2) { animation-delay: 0.7s; }
.planos2-col-plano:nth-child(3) { animation-delay: 0.8s; }
.planos2-col-plano:nth-child(4) { animation-delay: 0.9s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===== SEO DE PLANOS2 - DESIGN MODERNO CLEAN MELHORADO ===== */
.planos2-section {
position: relative;
margin: 120px 0;
padding: 100px 0;
background: linear-gradient(135deg, #fafbfc 0%, #ffffff 50%, #f8faff 100%);
overflow: hidden;
}
/* Cabealho da Seo - Design Clean */
.planos2-titulo {
font-size: 3.2rem;
font-weight: 900;
background: linear-gradient(135deg, #1a3246 0%, #2c5aa0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
text-align: center;
position: relative;
letter-spacing: -0.5px;
}
.planos2-subtitulo {
font-size: 1.25rem;
color: #64748b;
text-align: center;
line-height: 1.7;
margin-bottom: 4rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
/* Container da Tabela - Design Moderno */
.planos2-table-wrapper {
position: relative;
z-index: 2;
border-radius: 30px;
background: white;
box-shadow:
0 25px 80px rgba(26, 50, 70, 0.08),
0 10px 40px rgba(26, 50, 70, 0.04);
overflow: hidden;
border: 1px solid rgba(26, 50, 70, 0.06);
}
.planos2-table {
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
}
.planos2-table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1a3246 0%, #ffb413 50%, #1a3246 100%);
z-index: 3;
}
/* Cabealho da Tabela - Design Clean */
.planos2-table-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
background: linear-gradient(135deg, #1a3246 0%, #2c5aa0 100%);
padding: 0;
position: relative;
}
.planos2-col-vantagens {
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
padding: 3rem 2rem;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid rgba(26, 50, 70, 0.08);
position: relative;
}
.planos2-col-vantagens::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent 0%, rgba(26, 50, 70, 0.1) 50%, transparent 100%);
}
.planos2-col-title {
font-size: 1.8rem;
font-weight: 800;
color: #1a3246;
margin: 0;
text-align: center;
letter-spacing: -0.5px;
}
.planos2-col-plano {
padding: 3rem 2rem;
text-align: center;
position: relative;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: linear-gradient(135deg, #1a3246 0%, #2c5aa0 100%);
}
.planos2-col-plano:hover {
background: linear-gradient(135deg, #2c5aa0 0%, #1a3246 100%);
transform: translateY(-5px);
}
.plano-destaque {
background: linear-gradient(135deg, #1a3246 0%, #2c5aa0 100%);
border: 3px solid #ffb413;
border-radius: 20px;
margin: 1rem;
position: relative;
z-index: 2;
box-shadow:
0 20px 60px rgba(255, 180, 19, 0.15),
0 10px 30px rgba(255, 180, 19, 0.1);
}
.plano-destaque::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #ffb413, #e09e00, #ffb413);
border-radius: 20px;
z-index: -1;
opacity: 0.3;
}
.plano-badge {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #ffb413 0%, #e09e00 100%);
color: white;
padding: 0.75rem 2rem;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow:
0 8px 25px rgba(255, 180, 19, 0.4),
0 4px 15px rgba(255, 180, 19, 0.2);
animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
0%, 100% { transform: translateX(-50%) translateY(0px); }
50% { transform: translateX(-50%) translateY(-5px); }
}
.plano-header {
margin-top: 1.5rem;
}
.plano-nome {
font-size: 1.4rem;
font-weight: 800;
color: white;
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.plano-preco {
margin-bottom: 1.5rem;
}
.preco-valor {
font-size: 3rem;
font-weight: 900;
color: #ffb413;
display: block;
line-height: 1;
text-shadow: 0 2px 4px rgba(255, 180, 19, 0.3);
margin-bottom: 0.5rem;
}
.preco-periodo {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
letter-spacing: 0.5px;
}
.plano-descricao {
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.5;
font-weight: 400;
}
/* Corpo da Tabela - Design Clean */
.planos2-table-body {
background: white;
}
.planos2-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
border-bottom: 1px solid #f1f5f9;
transition: all 0.3s ease;
}
.planos2-row:hover {
background: linear-gradient(135deg, rgba(26, 50, 70, 0.02) 0%, rgba(255, 180, 19, 0.02) 100%);
}
.planos2-row:last-child {
border-bottom: none;
}
.planos2-col-vantagens {
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
padding: 2rem 2rem;
display: flex;
align-items: center;
border-right: 1px solid #e2e8f0;
}
.vantagem-texto {
font-size: 1rem;
color: #475569;
font-weight: 600;
margin: 0;
line-height: 1.4;
}
.planos2-col-plano {
padding: 2rem 2rem;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.plano-check {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
box-shadow:
0 8px 25px rgba(16, 185, 129, 0.3),
0 4px 15px rgba(16, 185, 129, 0.2);
animation: checkBounce 2s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.plano-check::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
border-radius: 50%;
}
@keyframes checkBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.plano-nao {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow:
0 8px 25px rgba(239, 68, 68, 0.3),
0 4px 15px rgba(239, 68, 68, 0.2);
}
/* Footer da Tabela - Design Moderno */
.planos2-table-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
background: linear-gradient(135deg, #1a3246 0%, #2c5aa0 100%);
padding: 3rem 2rem;
}
.planos2-col-vantagens {
background: transparent;
border: none;
}
.btn-plano {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffb413 0%, #e09e00 100%);
color: white;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 60px;
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow:
0 12px 35px rgba(255, 180, 19, 0.4),
0 6px 20px rgba(255, 180, 19, 0.2);
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.btn-plano::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;
}
.btn-plano:hover::before {
left: 100%;
}
.btn-plano:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(255, 180, 19, 0.6),
0 10px 30px rgba(255, 180, 19, 0.3);
color: white;
text-decoration: none;
}
.btn-plano-destaque {
background: linear-gradient(135deg, #ffb413 0%, #e09e00 100%);
box-shadow:
0 12px 35px rgba(255, 180, 19, 0.5),
0 6px 20px rgba(255, 180, 19, 0.3);
animation: buttonPulse 2s ease-in-out infinite;
}
@keyframes buttonPulse {
0%, 100% {
box-shadow:
0 12px 35px rgba(255, 180, 19, 0.4),
0 6px 20px rgba(255, 180, 19, 0.2);
}
50% {
box-shadow:
0 20px 50px rgba(255, 180, 19, 0.6),
0 10px 30px rgba(255, 180, 19, 0.4);
}
}
/* Elementos Decorativos - Design Sutil */
.planos2-decorativos {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.decorativo-circulo {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(26, 50, 70, 0.05), rgba(255, 180, 19, 0.05));
animation: floatSmooth 8s ease-in-out infinite;
}
.decorativo-circulo.decorativo-1 {
width: 250px;
height: 250px;
top: -125px;
right: -125px;
animation-delay: 0s;
}
.decorativo-circulo.decorativo-2 {
width: 180px;
height: 180px;
bottom: -90px;
left: -90px;
animation-delay: 3s;
}
.decorativo-linha {
position: absolute;
background: linear-gradient(90deg, transparent, rgba(255, 180, 19, 0.1), transparent);
animation: slideSmooth 10s ease-in-out infinite;
}
.decorativo-linha.decorativo-3 {
width: 400px;
height: 2px;
top: 25%;
right: -200px;
animation-delay: 2s;
}
.decorativo-linha.decorativo-4 {
width: 300px;
height: 2px;
bottom: 35%;
left: -150px;
animation-delay: 5s;
}
@keyframes floatSmooth {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
50% { transform: translateY(-30px) rotate(180deg) scale(1.05); }
}
@keyframes slideSmooth {
0%, 100% { transform: translateX(0px); opacity: 0.2; }
50% { transform: translateX(80px); opacity: 0.6; }
}
/* ===== EXPERINCIA MOBILE OTIMIZADA ===== */
@media (max-width: 991.98px) {
.planos2-section {
margin: 80px 0;
padding: 80px 0;
}
.planos2-titulo {
font-size: 2.8rem;
}
.planos2-subtitulo {
font-size: 1.1rem;
margin-bottom: 3rem;
}
/* Container com scroll horizontal para mobile */
.planos2-table-wrapper {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #ffb413 #f1f5f9;
}
.planos2-table-wrapper::-webkit-scrollbar {
height: 8px;
}
.planos2-table-wrapper::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.planos2-table-wrapper::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #ffb413, #e09e00);
border-radius: 4px;
}
.planos2-table-wrapper::-webkit-scrollbar-thumb:hover {
background: linear-gradient(90deg, #e09e00, #ffb413);
}
/* Tabela com largura fixa para scroll */
.planos2-table {
min-width: 900px;
width: 100%;
}
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
min-width: 900px;
width: 100%;
}
/* Indicador de scroll */
.planos2-table-wrapper::after {
content: '? Deslize para ver mais ?';
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
color: #64748b;
font-weight: 500;
white-space: nowrap;
animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
}
@media (max-width: 767.98px) {
.planos2-section {
margin: 60px 0;
padding: 60px 0;
}
.planos2-titulo {
font-size: 2.4rem;
}
.planos2-subtitulo {
font-size: 1rem;
}
.planos2-table {
min-width: 800px;
}
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
min-width: 800px;
}
.planos2-col-vantagens,
.planos2-col-plano {
padding: 1.5rem 1rem;
}
.planos2-col-title {
font-size: 1.5rem;
}
.plano-nome {
font-size: 1.2rem;
}
.preco-valor {
font-size: 2.5rem;
}
.btn-plano {
padding: 1rem 2rem;
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.planos2-section {
margin: 40px 0;
padding: 40px 0;
}
.planos2-titulo {
font-size: 2rem;
}
.planos2-subtitulo {
font-size: 0.95rem;
}
.planos2-table {
min-width: 700px;
}
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
min-width: 700px;
}
.planos2-col-vantagens,
.planos2-col-plano {
padding: 1rem 0.75rem;
}
.planos2-col-title {
font-size: 1.3rem;
}
.plano-nome {
font-size: 1.1rem;
}
.preco-valor {
font-size: 2rem;
}
.btn-plano {
padding: 0.8rem 1.5rem;
font-size: 0.85rem;
}
.decorativo-circulo,
.decorativo-linha {
display: none;
}
}
/* Animaes de entrada aprimoradas */
.planos2-section {
animation: fadeInUpSmooth 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.planos2-table {
animation: slideInUpSmooth 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}
.planos2-col-plano {
animation: fadeInScaleSmooth 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}
.planos2-col-plano:nth-child(2) { animation-delay: 0.8s; }
.planos2-col-plano:nth-child(3) { animation-delay: 1s; }
.planos2-col-plano:nth-child(4) { animation-delay: 1.2s; }
@keyframes fadeInUpSmooth {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUpSmooth {
from {
opacity: 0;
transform: translateY(60px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInScaleSmooth {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===== SEO DE PLANOS2 - DESIGN COMPACTO E SIMPLES ===== */
.planos2-section {
position: relative;
margin: 80px 0;
padding: 60px 0;
background: #ffffff;
overflow: hidden;
}
/* Cabealho da Seo - Design Simples */
.planos2-titulo {
font-size: 2.5rem;
font-weight: 700;
color: #dc2626;
margin-bottom: 1rem;
text-align: center;
letter-spacing: -0.5px;
}
.planos2-subtitulo {
font-size: 1.1rem;
color: #000000;
text-align: center;
line-height: 1.5;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
/* Container da Tabela - Design Compacto */
.planos2-table-wrapper {
position: relative;
z-index: 2;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.planos2-table {
background: white;
border-radius: 8px;
overflow: hidden;
position: relative;
}
/* Cabealho da Tabela - Design Compacto */
.planos2-table-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
background: white;
padding: 0;
position: relative;
border-bottom: 1px solid #e5e7eb;
}
.planos2-col-vantagens {
background: #f9fafb;
padding: 1.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #e5e7eb;
}
.planos2-col-title {
font-size: 1.2rem;
font-weight: 600;
color: #000000;
margin: 0;
text-align: center;
}
.planos2-col-plano {
padding: 1.5rem 1rem;
text-align: center;
position: relative;
background: white;
border-right: 1px solid #e5e7eb;
}
.planos2-col-plano:last-child {
border-right: none;
}
.plano-destaque {
background: white;
border: 2px solid #ffb413;
border-radius: 8px;
margin: 0.5rem;
position: relative;
z-index: 2;
}
.plano-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #ffb413;
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plano-header {
margin-top: 0.5rem;
}
.plano-nome {
font-size: 1.1rem;
font-weight: 700;
color: #000000;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.plano-preco {
margin-bottom: 0.5rem;
}
.preco-valor {
font-size: 1.8rem;
font-weight: 700;
color: #ffb413;
display: block;
line-height: 1;
}
.preco-periodo {
font-size: 0.9rem;
color: #6b7280;
font-weight: 400;
}
.plano-descricao {
font-size: 0.85rem;
color: #6b7280;
margin: 0;
line-height: 1.3;
}
/* Corpo da Tabela - Design Compacto */
.planos2-table-body {
background: white;
}
.planos2-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
border-bottom: 1px solid #e5e7eb;
transition: background-color 0.2s ease;
}
.planos2-row:hover {
background: #f9fafb;
}
.planos2-row:last-child {
border-bottom: none;
}
.planos2-col-vantagens {
background: #f9fafb;
padding: 1rem 1rem;
display: flex;
align-items: center;
border-right: 1px solid #e5e7eb;
}
.vantagem-texto {
font-size: 0.9rem;
color: #000000;
font-weight: 500;
margin: 0;
line-height: 1.3;
}
.planos2-col-plano {
padding: 1rem 1rem;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-right: 1px solid #e5e7eb;
}
.planos2-col-plano:last-child {
border-right: none;
}
.plano-check {
width: 24px;
height: 24px;
border-radius: 50%;
background: #10b981;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
font-weight: bold;
}
.plano-nao {
background: #ef4444;
}
/* Footer da Tabela - Design Compacto */
.planos2-table-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
background: white;
padding: 1.5rem 1rem;
border-top: 1px solid #e5e7eb;
}
.planos2-col-vantagens {
background: transparent;
border: none;
}
.btn-plano {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #ffb413;
color: white;
text-decoration: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.btn-plano:hover {
background: #e09e00;
transform: translateY(-1px);
color: white;
text-decoration: none;
}
.btn-plano-destaque {
background: #ffb413;
box-shadow: 0 2px 8px rgba(255, 180, 19, 0.3);
}
/* ===== EXPERINCIA MOBILE COMPACTA ===== */
@media (max-width: 991.98px) {
.planos2-section {
margin: 60px 0;
padding: 40px 0;
}
.planos2-titulo {
font-size: 2rem;
}
.planos2-subtitulo {
font-size: 1rem;
margin-bottom: 2rem;
}
/* Container com scroll horizontal para mobile */
.planos2-table-wrapper {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #ffb413 #e5e7eb;
}
.planos2-table-wrapper::-webkit-scrollbar {
height: 6px;
}
.planos2-table-wrapper::-webkit-scrollbar-track {
background: #e5e7eb;
border-radius: 3px;
}
.planos2-table-wrapper::-webkit-scrollbar-thumb {
background: #ffb413;
border-radius: 3px;
}
.planos2-table-wrapper::-webkit-scrollbar-thumb:hover {
background: #e09e00;
}
/* Tabela com largura fixa para scroll */
.planos2-table {
min-width: 800px;
width: 100%;
}
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
min-width: 800px;
width: 100%;
}
/* Indicador de scroll */
.planos2-table-wrapper::after {
content: '? Deslize para ver mais ?';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
color: #6b7280;
font-weight: 500;
white-space: nowrap;
animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
}
@media (max-width: 767.98px) {
.planos2-section {
margin: 40px 0;
padding: 30px 0;
}
.planos2-titulo {
font-size: 1.8rem;
}
.planos2-subtitulo {
font-size: 0.9rem;
}
.planos2-table {
min-width: 700px;
}
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
min-width: 700px;
}
.planos2-col-vantagens,
.planos2-col-plano {
padding: 0.75rem 0.5rem;
}
.planos2-col-title {
font-size: 1rem;
}
.plano-nome {
font-size: 1rem;
}
.preco-valor {
font-size: 1.5rem;
}
.btn-plano {
padding: 0.6rem 1.2rem;
font-size: 0.8rem;
}
}
@media (max-width: 575.98px) {
.planos2-section {
margin: 30px 0;
padding: 20px 0;
}
.planos2-titulo {
font-size: 1.6rem;
}
.planos2-subtitulo {
font-size: 0.85rem;
}
.planos2-table {
min-width: 600px;
}
.planos2-table-header,
.planos2-row,
.planos2-table-footer {
min-width: 600px;
}
.planos2-col-vantagens,
.planos2-col-plano {
padding: 0.6rem 0.4rem;
}
.planos2-col-title {
font-size: 0.9rem;
}
.plano-nome {
font-size: 0.9rem;
}
.preco-valor {
font-size: 1.3rem;
}
.vantagem-texto {
font-size: 0.8rem;
}
.btn-plano {
padding: 0.5rem 1rem;
font-size: 0.75rem;
}
}
/* Animaes simples */
.planos2-section {
animation: fadeIn 0.8s ease-out;
}
.planos2-table {
animation: slideIn 1s ease-out 0.2s both;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== SEO DE DEPOIMENTOS DE CLIENTES - AO SAT RASTREADORES ===== */
/* Seo Principal */
.depoimentos-section {
position: relative;
margin: 120px 0;
padding: 100px 0;
background: linear-gradient(135deg, #f8fafe 0%, #e8f4fd 100%);
overflow: hidden;
}
.depoimentos-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
pointer-events: none;
}
.depoimentos-section > .container {
position: relative;
z-index: 2;
}
/* Contedo da Coluna Esquerda */
.depoimentos-content {
padding-right: 60px;
}
.depoimentos-titulo {
font-size: 3.2rem;
font-weight: 900;
color: #1a3246;
margin: 0 0 30px 0;
line-height: 1.1;
letter-spacing: -1px;
}
.depoimentos-destaque {
background: rgba(26, 50, 70, 0.1);
padding: 8px 16px;
border-radius: 8px;
color: #1a3246;
font-weight: 900;
}
.depoimentos-separador {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ffb413, #f59e0b);
border-radius: 2px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(255, 180, 19, 0.3);
}
.depoimentos-intro {
font-size: 1.2rem;
color: #64748b;
line-height: 1.7;
margin: 0;
font-weight: 400;
}
/* Carrossel de Depoimentos */
.depoimentos-carousel-wrapper {
position: relative;
padding: 20px;
}
.depoimentos-carousel {
position: relative;
overflow: hidden;
border-radius: 20px;
}
/* Cards de Depoimento */
.depoimento-card {
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateX(50px);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.depoimento-card.active {
opacity: 1;
transform: translateX(0);
position: relative;
}
.depoimento-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}
/* Header do Card */
.depoimento-header {
height: 6px;
background: linear-gradient(90deg, #1a3246, #ffb413);
position: relative;
}
.depoimento-linha-accent {
height: 100%;
background: linear-gradient(90deg, #1a3246, #ffb413);
transform: scaleX(0);
transform-origin: left;
animation: expandLine 0.8s ease-out 0.3s forwards;
}
@keyframes expandLine {
to {
transform: scaleX(1);
}
}
/* Contedo do Card */
.depoimento-content {
padding: 40px;
}
.depoimento-texto {
font-size: 1.3rem;
color: #374151;
line-height: 1.7;
margin: 0 0 30px 0;
font-style: italic;
font-weight: 400;
position: relative;
padding-left: 30px;
}
.depoimento-texto::before {
content: '"';
position: absolute;
left: 0;
top: -10px;
font-size: 4rem;
color: #ffb413;
font-family: serif;
line-height: 1;
opacity: 0.3;
}
/* Informaes do Cliente */
.depoimento-cliente {
display: flex;
align-items: center;
gap: 20px;
padding-top: 25px;
border-top: 1px solid #e5e7eb;
}
.cliente-logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.logo-img {
border-radius: 8px;
object-fit: cover;
border: 0px solid #e5e7eb;
transition: all 0.3s ease;
}
.cliente-logo:hover .logo-img {
border-color: #ffb413;
transform: scale(1.05);
}
.empresa-nome {
font-size: 0.9rem;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cliente-info {
flex: 1;
}
.cliente-nome {
font-size: 1.2rem;
font-weight: 700;
color: #1a3246;
margin: 0 0 5px 0;
line-height: 1.2;
}
.cliente-cargo {
font-size: 0.95rem;
color: #6b7280;
margin: 0;
line-height: 1.4;
font-weight: 400;
}
/* Indicadores de Navegao */
.depoimentos-indicadores {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.indicador-btn {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: #d1d5db;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.indicador-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #1a3246;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.indicador-btn.active {
background: #1a3246;
transform: scale(1.2);
}
.indicador-btn.active::before {
width: 100%;
height: 100%;
}
.indicador-btn:hover {
background: #1a3246;
transform: scale(1.1);
}
/* Elementos Decorativos */
.depoimentos-decorativos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.decorativo-particula {
position: absolute;
width: 8px;
height: 8px;
background: rgba(255, 180, 19, 0.2);
border-radius: 50%;
animation: flutuarDepoimentos 12s infinite ease-in-out;
}
.decorativo-particula:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.decorativo-particula:nth-child(2) {
top: 60%;
left: 5%;
animation-delay: 3s;
}
.decorativo-particula:nth-child(3) {
top: 80%;
right: 15%;
animation-delay: 6s;
}
.decorativo-particula:nth-child(4) {
top: 30%;
right: 10%;
animation-delay: 9s;
}
@keyframes flutuarDepoimentos {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-20px) scale(1.2);
opacity: 0.6;
}
}
/* ===== RESPONSIVIDADE ===== */
@media (max-width: 1199.98px) {
.depoimentos-section {
margin: 100px 0;
padding: 80px 0;
}
.depoimentos-titulo {
font-size: 2.8rem;
}
.depoimentos-content {
padding-right: 40px;
}
.depoimento-content {
padding: 35px;
}
.depoimento-texto {
font-size: 1.2rem;
}
}
@media (max-width: 991.98px) {
.depoimentos-section {
margin: 80px 0;
padding: 60px 0;
}
.depoimentos-content {
padding-right: 0;
margin-bottom: 50px;
text-align: center;
}
.depoimentos-titulo {
font-size: 2.5rem;
}
.depoimentos-separador {
margin: 0 auto 30px auto;
}
.depoimentos-intro {
font-size: 1.1rem;
}
.depoimento-content {
padding: 30px;
}
.depoimento-texto {
font-size: 1.1rem;
padding-left: 25px;
}
.depoimento-cliente {
flex-direction: column;
text-align: center;
gap: 15px;
}
.cliente-logo {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.depoimentos-section {
margin: 60px 0;
padding: 40px 0;
}
.depoimentos-titulo {
font-size: 2.2rem;
}
.depoimentos-intro {
font-size: 1rem;
}
.depoimento-content {
padding: 25px;
}
.depoimento-texto {
font-size: 1rem;
padding-left: 20px;
}
.depoimento-texto::before {
font-size: 3rem;
top: -5px;
}
.cliente-nome {
font-size: 1.1rem;
}
.cliente-cargo {
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.depoimentos-section {
margin: 40px 0;
padding: 30px 0;
}
.depoimentos-titulo {
font-size: 1.8rem;
}
.depoimentos-destaque {
padding: 6px 12px;
font-size: 0.9em;
}
.depoimentos-intro {
font-size: 0.95rem;
}
.depoimento-content {
padding: 20px;
}
.depoimento-texto {
font-size: 0.95rem;
padding-left: 15px;
}
.depoimento-texto::before {
font-size: 2.5rem;
top: -3px;
}
.cliente-logo {
gap: 8px;
}
.logo-img { width: 180px;
}
.empresa-nome {
font-size: 0.8rem;
}
.cliente-nome {
font-size: 1rem;
}
.cliente-cargo {
font-size: 0.85rem;
}
.depoimentos-decorativos {
display: none;
}
}
/* Animaes de entrada */
.depoimentos-section {
animation: fadeInDepoimentos 0.8s ease-out;
}
.depoimentos-content {
animation: slideInLeft 1s ease-out 0.2s both;
}
.depoimentos-carousel-wrapper {
animation: slideInRight 1s ease-out 0.4s both;
}
@keyframes fadeInDepoimentos {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}