/* ===== IDENTIDADE VISUAL AUTOPROTECTA - CSS BASE ===== */
/* Importação das fontes Satoshi */
@import url('https://fonts.googleapis.com/css2?family=Satoshi:wght@300;400;500;700;900&display=swap');
/* ===== VARIÁVEIS CSS - PALETA OFICIAL AUTOPROTECTA ===== */
:root {
/* Cores Principais - Paleta Oficial */
--smoky-black: #0C0C0C; /* Pantone Black 6 C - Autoridade, elegância, sofisticação */
--orioles-orange: #FB4516; /* Pantone 172 C - Energia, inovação, dinamismo */
--platinum: #E2E2E2; /* Pantone 663 C - Pureza, simplicidade, clareza */
/* Variações das cores principais */
--smoky-black-light: #1a1a1a;
--smoky-black-dark: #000000;
--orioles-orange-light: #ff6b3d;
--orioles-orange-dark: #d73610;
--platinum-light: #f5f5f5;
--platinum-dark: #cccccc;
/* Gradientes oficiais */
--gradient-orange-black: linear-gradient(135deg, var(--orioles-orange) 0%, var(--smoky-black) 100%);
--gradient-black-orange: linear-gradient(135deg, var(--smoky-black) 0%, var(--orioles-orange) 100%);
--gradient-platinum-black: linear-gradient(135deg, var(--platinum) 0%, var(--smoky-black) 100%);
/* Gradientes com compatibilidade Safari */
--gradient-orange-black-safari: -webkit-linear-gradient(135deg, var(--orioles-orange) 0%, var(--smoky-black) 100%);
--gradient-black-orange-safari: -webkit-linear-gradient(135deg, var(--smoky-black) 0%, var(--orioles-orange) 100%);
--gradient-platinum-black-safari: -webkit-linear-gradient(135deg, var(--platinum) 0%, var(--smoky-black) 100%);
/* Transparências */
--orange-alpha-10: rgba(251, 69, 22, 0.1);
--orange-alpha-20: rgba(251, 69, 22, 0.2);
--black-alpha-10: rgba(12, 12, 12, 0.1);
--black-alpha-20: rgba(12, 12, 12, 0.2);
--black-alpha-80: rgba(12, 12, 12, 0.8);
--black-alpha-90: rgba(12, 12, 12, 0.9);
--platinum-alpha-20: rgba(226, 226, 226, 0.2);
/* Cores de texto */
--text-primary: var(--smoky-black);
--text-secondary: var(--smoky-black-light);
--text-muted: #666666;
--text-white: #ffffff;
--text-orange: var(--orioles-orange);
/* Cores de fundo */
--bg-primary: #ffffff;
--bg-secondary: var(--platinum-light);
--bg-dark: var(--smoky-black);
--bg-dark-light: var(--smoky-black-light);
--bg-orange: var(--orioles-orange);
--bg-platinum: var(--platinum);
/* Tipografia - Satoshi */
--font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
--font-black: 900;
/* Tamanhos de fonte */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--text-8xl: 6rem; /* 96px */
/* Espaçamentos */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* Raios de borda */
--radius-sm: 0.375rem; /* 6px */
--radius: 0.5rem; /* 8px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
--radius-xl: 1.5rem; /* 24px */
--radius-2xl: 2rem; /* 32px */
--radius-full: 9999px;
/* Sombras */
--shadow-sm: 0 1px 2px 0 rgba(12, 12, 12, 0.05);
--shadow: 0 1px 3px 0 rgba(12, 12, 12, 0.1), 0 1px 2px -1px rgba(12, 12, 12, 0.1);
--shadow-md: 0 4px 6px -1px rgba(12, 12, 12, 0.1), 0 2px 4px -2px rgba(12, 12, 12, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(12, 12, 12, 0.1), 0 4px 6px -4px rgba(12, 12, 12, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(12, 12, 12, 0.1), 0 8px 10px -6px rgba(12, 12, 12, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(12, 12, 12, 0.25);
--shadow-orange: 0 10px 25px -5px rgba(251, 69, 22, 0.3);
/* Transições */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
/* Z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
/* Layout */
--container-xs: 20rem; /* 320px */
--container-sm: 24rem; /* 384px */
--container-md: 28rem; /* 448px */
--container-lg: 32rem; /* 512px */
--container-xl: 36rem; /* 576px */
--container-2xl: 42rem; /* 672px */
--container-3xl: 48rem; /* 768px */
--container-4xl: 56rem; /* 896px */
--container-5xl: 64rem; /* 1024px */
--container-6xl: 72rem; /* 1152px */
--container-7xl: 80rem; /* 1280px */
--container-full: 100%;
}
/* ===== RESET E CONFIGURAÇÃO BASE ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
scroll-padding-top: 70px; /* Ajustado para header menor */
/* Compatibilidade Safari/iOS */
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
overflow-x: hidden;
font-weight: var(--font-regular);
/* Compatibilidade Safari/iOS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ===== TIPOGRAFIA - HIERARQUIA SATOSHI ===== */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-black);
line-height: 1.2;
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: var(--space-4);
/* Compatibilidade Safari/iOS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ===== COMPATIBILIDADE FONT AWESOME PARA iOS/Safari ===== */
.fas, .far, .fab, .fal, .fad {
/* Força renderização correta no Safari/iOS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Previne problemas de renderização */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
h1 {
font-size: var(--text-5xl);
font-weight: var(--font-black);
}
h2 {
font-size: var(--text-4xl);
font-weight: var(--font-black);
}
h3 {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
}
h4 {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
}
h5 {
font-size: var(--text-xl);
font-weight: var(--font-bold);
}
h6 {
font-size: var(--text-lg);
font-weight: var(--font-bold);
}
p {
margin-bottom: var(--space-4);
color: var(--text-secondary);
line-height: 1.7;
font-weight: var(--font-regular);
}
/* Classes de texto */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }
.text-7xl { font-size: var(--text-7xl); }
.text-8xl { font-size: var(--text-8xl); }
/* Pesos de fonte */
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-bold { font-weight: var(--font-bold); }
.font-black { font-weight: var(--font-black); }
/* ===== LAYOUT E CONTAINERS ===== */
.container {
width: 100%;
max-width: var(--container-7xl);
margin: 0 auto;
padding: 0 var(--space-6);
}
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
/* ===== GRID SYSTEM ===== */
.grid {
display: grid;
gap: var(--space-6);
}
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ===== FLEXBOX UTILITIES ===== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* ===== ESPAÇAMENTOS ===== */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-32 { padding: var(--space-32); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }
.pt-24 { padding-top: var(--space-24); }
.pt-32 { padding-top: var(--space-32); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-32 { padding-bottom: var(--space-32); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
/* Margens */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-32 { margin: var(--space-32); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
/* ===== CORES DE TEXTO ===== */
.text-orange { color: var(--orioles-orange) !important; }
.text-black { color: var(--smoky-black) !important; }
.text-platinum { color: var(--platinum-dark) !important; }
.text-white { color: var(--text-white) !important; }
.text-muted { color: var(--text-muted) !important; }
/* ===== CORES DE FUNDO ===== */
.bg-orange { background-color: var(--orioles-orange) !important; }
.bg-black { background-color: var(--smoky-black) !important; }
.bg-platinum { background-color: var(--platinum) !important; }
.bg-platinum-light { background-color: var(--platinum-light) !important; }
.bg-white { background-color: var(--bg-primary) !important; }
/* ===== GRADIENTES ===== */
.bg-gradient-orange-black { background: var(--gradient-orange-black) !important; }
.bg-gradient-black-orange { background: var(--gradient-black-orange) !important; }
.bg-gradient-platinum-black { background: var(--gradient-platinum-black) !important; }
/* ===== BORDAS ===== */
.border-orange { border-color: var(--orioles-orange) !important; }
.border-black { border-color: var(--smoky-black) !important; }
.border-platinum { border-color: var(--platinum) !important; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
/* ===== BOTÕES - IDENTIDADE AUTOPROTECTA ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
border-radius: var(--radius-lg);
font-family: var(--font-family);
font-weight: var(--font-bold);
text-decoration: none;
cursor: pointer;
transition: all var(--transition-slow);
border: none;
outline: none;
position: relative;
overflow: hidden;
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--orange-alpha-20);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Tamanhos de botões */
.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
.btn-md {
padding: var(--space-3) var(--space-6);
font-size: var(--text-base);
}
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--text-lg);
}
.btn-xl {
padding: var(--space-5) var(--space-10);
font-size: var(--text-xl);
}
/* Variações de botões - Identidade AutoProtecta */
.btn-primary {
background: var(--gradient-orange-black);
color: var(--text-white);
box-shadow: var(--shadow-orange);
border: none;
}
.btn-primary:hover {
background: var(--gradient-black-orange);
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(251, 69, 22, 0.4);
}
.btn-secondary {
background: var(--platinum);
color: var(--smoky-black);
border: 2px solid var(--platinum-dark);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--platinum-dark);
border-color: var(--smoky-black);
color: var(--smoky-black);
}
.btn-outline {
background: transparent;
color: var(--orioles-orange);
border: 2px solid var(--orioles-orange);
}
.btn-outline:hover {
background: var(--orioles-orange);
color: var(--text-white);
}
.btn-dark {
background: var(--smoky-black);
color: var(--text-white);
border: none;
}
.btn-dark:hover {
background: var(--smoky-black-light);
transform: translateY(-1px);
}
/* ===== CARDS - IDENTIDADE AUTOPROTECTA ===== */
.card {
background: var(--bg-primary);
border-radius: var(--radius-xl);
box-shadow: 0 4px 20px var(--black-alpha-10);
overflow: hidden;
transition: all var(--transition-slow);
border: 2px solid var(--platinum);
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 30px var(--black-alpha-10);
border-color: var(--orioles-orange);
}
.card-header {
padding: var(--space-6);
border-bottom: 2px solid var(--platinum);
background: linear-gradient(135deg, var(--platinum) 0%, var(--bg-primary) 100%);
}
.card-body {
padding: var(--space-6);
}
.card-footer {
padding: var(--space-6);
border-top: 2px solid var(--platinum);
background: var(--platinum);
}
.card-dark {
background: var(--smoky-black);
border-color: var(--platinum-dark);
color: var(--text-white);
}
.card-dark .card-header {
background: var(--smoky-black-light);
border-color: var(--platinum-dark);
color: var(--text-white);
}
.card-dark .card-footer {
background: var(--smoky-black-light);
border-color: var(--platinum-dark);
}
/* ===== FORMULÁRIOS - IDENTIDADE AUTOPROTECTA ===== */
.form-group {
margin-bottom: var(--space-6);
}
.form-label {
display: block;
margin-bottom: var(--space-2);
font-weight: var(--font-bold);
color: var(--text-primary);
font-size: var(--text-sm);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 2px solid var(--platinum);
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-family: inherit;
transition: all var(--transition);
background: var(--bg-primary);
color: var(--text-primary);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--orioles-orange);
box-shadow: 0 0 0 3px var(--orange-alpha-20);
}
.form-input.error,
.form-select.error,
.form-textarea.error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
color: var(--text-muted);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
/* ===== SEÇÕES ESPECIAIS - IDENTIDADE AUTOPROTECTA ===== */
/* ===== SEÇÃO CTA FINAL MELHORADA ===== */
.cta-main-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
margin-bottom: var(--space-12);
position: relative;
}
.cta-primary {
position: relative;
padding: var(--space-6) var(--space-12);
font-size: var(--text-xl);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 300px;
}
.cta-primary:hover {
transform: translateY(-4px);
box-shadow:
0 20px 40px rgba(251, 69, 22, 0.3),
0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Badge de urgência integrado */
.urgency-badge {
background: var(--orioles-orange);
color: var(--text-white);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-bold);
display: flex;
align-items: center;
gap: var(--space-2);
box-shadow: var(--shadow-md);
border: 2px solid var(--text-white);
position: relative;
animation: urgencyPulse 2s ease-in-out infinite;
}
.urgency-badge::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--orioles-orange);
border-radius: var(--radius-full);
opacity: 0.3;
z-index: -1;
animation: urgencyGlow 2s ease-in-out infinite;
}
@keyframes urgencyPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes urgencyGlow {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.1);
}
}
/* Container CTA secundário */
.cta-secondary-container {
text-align: center;
padding: var(--space-6);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-xl);
border: 1px solid var(--platinum-dark);
backdrop-filter: blur(10px);
}
.cta-secondary {
padding: var(--space-4) var(--space-8);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
border: 2px solid var(--platinum);
color: var(--platinum);
background: transparent;
border-radius: var(--radius-xl);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.cta-secondary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--orioles-orange), transparent);
transition: left 0.5s ease;
}
.cta-secondary:hover {
border-color: var(--orioles-orange);
color: var(--orioles-orange);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.cta-secondary:hover::before {
left: 100%;
}
/* Responsividade da seção CTA */
@media (max-width: 768px) {
.cta-primary {
min-width: 280px;
padding: var(--space-5) var(--space-8);
font-size: var(--text-lg);
}
.urgency-badge {
padding: var(--space-2) var(--space-4);
font-size: var(--text-xs);
}
.cta-secondary {
padding: var(--space-3) var(--space-6);
font-size: var(--text-base);
}
}
@media (max-width: 480px) {
.cta-primary {
min-width: 260px;
padding: var(--space-4) var(--space-6);
font-size: var(--text-base);
}
.cta-secondary-container {
padding: var(--space-4);
}
}
/* Hero Section com fundo preto dominante */
.hero-dark {
background: linear-gradient(135deg, var(--smoky-black) 0%, #1a1a1a 50%, var(--smoky-black) 100%);
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-dark::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-dark h1,
.hero-dark h2,
.hero-dark h3 {
color: var(--text-white);
position: relative;
z-index: 1;
}
.hero-dark p {
color: var(--platinum);
position: relative;
z-index: 1;
}
/* ===== ILUSTRAÇÃO HERO MODERNA ===== */
.hero-illustration {
position: relative;
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
/* Círculo principal */
.hero-main-circle {
width: 250px;
height: 250px;
background: var(--gradient-orange-black);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 3;
box-shadow:
0 0 60px var(--orange-alpha-30),
0 20px 40px rgba(0, 0, 0, 0.3);
animation: heroPulse 3s ease-in-out infinite;
}
.hero-icon-container {
width: 140px;
height: 140px;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 5;
}
.hero-icon-container i {
font-size: 3rem;
color: var(--orioles-orange);
}
.hero-logo {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 10;
display: block;
}
@keyframes heroPulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 60px var(--orange-alpha-30),
0 20px 40px rgba(0, 0, 0, 0.3);
}
50% {
transform: scale(1.05);
box-shadow:
0 0 80px var(--orange-alpha-40),
0 25px 50px rgba(0, 0, 0, 0.4);
}
}
/* Elementos flutuantes */
.floating-element {
position: absolute;
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-3) var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
box-shadow: var(--shadow-lg);
border: 2px solid var(--platinum);
transition: all 0.3s ease;
animation: float-no-rotate 4s ease-in-out infinite;
}
.floating-element:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--orioles-orange);
}
.floating-element i {
font-size: 1.5rem;
color: var(--orioles-orange);
}
.floating-element span {
font-size: 0.875rem;
font-weight: var(--font-medium);
color: var(--text-primary);
text-align: center;
white-space: nowrap;
}
/* Posicionamento dos elementos flutuantes */
.protection-element {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.security-element {
top: 60%;
right: 15%;
animation-delay: 1s;
}
.support-element {
bottom: 20%;
left: 20%;
animation-delay: 2s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Linhas de conexão */
.connection-line {
position: absolute;
background: linear-gradient(90deg, var(--orioles-orange), var(--orange-alpha-30));
height: 2px;
border-radius: 1px;
opacity: 0.6;
animation: connectionPulse 2s ease-in-out infinite;
}
.line-1 {
width: 80px;
top: 30%;
left: 25%;
transform: rotate(45deg);
animation-delay: 0s;
}
.line-2 {
width: 100px;
top: 50%;
right: 25%;
transform: rotate(-45deg);
animation-delay: 0.5s;
}
.line-3 {
width: 60px;
bottom: 30%;
left: 30%;
transform: rotate(30deg);
animation-delay: 1s;
}
@keyframes connectionPulse {
0%, 100% {
opacity: 0.6;
transform: scaleX(1);
}
50% {
opacity: 1;
transform: scaleX(1.1);
}
}
/* Badge de destaque */
.hero-badge {
position: absolute;
top: 10%;
right: 10%;
background: var(--orioles-orange);
border-radius: var(--radius-2xl);
padding: var(--space-4);
box-shadow: var(--shadow-lg);
animation: badgeBounce 2s ease-in-out infinite;
}
.badge-content {
text-align: center;
color: var(--text-white);
}
.badge-number {
display: block;
font-size: 1.5rem;
font-weight: var(--font-black);
line-height: 1;
}
.badge-text {
display: block;
font-size: 0.75rem;
font-weight: var(--font-medium);
line-height: 1.2;
opacity: 0.9;
}
@keyframes badgeBounce {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
/* Responsividade da ilustração */
@media (max-width: 768px) {
.hero-illustration {
height: 400px;
}
.hero-main-circle {
width: 150px;
height: 150px;
}
.hero-icon-container {
width: 90px;
height: 90px;
}
.hero-icon-container i {
font-size: 2rem;
}
.floating-element {
padding: var(--space-2) var(--space-3);
}
.floating-element i {
font-size: 1.25rem;
}
.floating-element span {
font-size: 0.75rem;
}
.hero-badge {
padding: var(--space-3);
}
.badge-number {
font-size: 1.25rem;
}
.badge-text {
font-size: 0.625rem;
}
}
/* ===== HEADER COMPACTO E HORIZONTAL ===== */
.navbar-dark {
background: var(--smoky-black);
border-bottom: 3px solid var(--orioles-orange);
position: sticky;
top: 0;
z-index: var(--z-sticky);
height: 70px; /* Header mais compacto */
display: flex;
align-items: center;
width: 100%;
min-width: 100%;
/* Compatibilidade Safari/iOS */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.navbar-dark .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 var(--space-6);
width: 100%;
max-width: 100%;
}
.navbar-dark .nav-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
flex-wrap: nowrap;
white-space: nowrap;
}
.navbar-dark .logo-section {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
min-width: fit-content;
}
.navbar-dark .logo-link {
display: inline-block;
transition: all var(--transition);
white-space: nowrap;
}
.navbar-dark .logo-img {
height: 40px; /* Logo menor e proporcional */
width: auto;
object-fit: contain;
transition: all var(--transition);
max-width: 200px;
/* Compatibilidade Safari/iOS */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.navbar-dark .logo-link:hover {
transform: scale(1.05);
}
.navbar-dark .logo-link:hover .logo-img {
filter: brightness(1.1);
}
.navbar-dark .logo-text {
font-size: var(--text-lg); /* Texto do logo menor */
font-weight: var(--font-bold);
color: var(--text-white);
white-space: nowrap;
}
.navbar-dark .nav-menu {
display: flex;
align-items: center;
gap: var(--space-4);
height: 100%;
flex-shrink: 1;
min-width: 0;
}
.navbar-dark .nav-link {
color: var(--platinum);
transition: color var(--transition);
font-weight: var(--font-medium);
font-size: var(--text-sm); /* Links menores */
text-decoration: none;
padding: var(--space-2) var(--space-2);
border-radius: var(--radius);
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
}
.navbar-dark .nav-link:hover {
color: var(--orioles-orange);
background: rgba(251, 69, 22, 0.1);
}
.navbar-dark .cta-section {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
min-width: fit-content;
}
.navbar-dark .btn-header {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
height: 36px; /* Botão mais compacto */
white-space: nowrap;
flex-shrink: 0;
}
/* Menu mobile compacto */
.navbar-dark .mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--text-white);
font-size: var(--text-xl);
cursor: pointer;
padding: var(--space-2);
flex-shrink: 0;
}
.navbar-dark .mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--smoky-black);
border-top: 1px solid var(--orioles-orange);
padding: var(--space-4);
width: 100%;
}
/* Seção com fundo preto */
.section-dark {
background: var(--smoky-black);
color: var(--text-white);
padding: var(--space-20) 0;
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
color: var(--text-white);
}
.section-dark p {
color: var(--platinum);
}
/* Seção com fundo platinum */
/* ===== SEÇÃO DE ESTATÍSTICAS MODERNIZADA ===== */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-16);
align-items: stretch;
}
.stat-card {
background: var(--platinum-light);
border-radius: var(--radius-2xl);
padding: var(--space-8);
text-align: center;
position: relative;
overflow: hidden;
border: 2px solid var(--orioles-orange);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 280px;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--orioles-orange);
z-index: 1;
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--orioles-orange);
background: var(--bg-primary);
}
.stat-card:hover .stat-icon {
transform: scale(1.1) rotate(5deg);
}
.stat-card:hover .stat-number {
color: var(--orioles-orange);
}
/* Ícone da estatística */
.stat-icon {
width: 80px;
height: 80px;
background: var(--orioles-orange);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-6);
position: relative;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
}
.stat-icon i {
font-size: var(--text-3xl);
color: var(--text-white);
}
/* Container para número e sufixo */
.stat-number-container {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.25rem;
margin-bottom: var(--space-4);
}
/* Número da estatística */
.stat-number {
font-size: var(--text-5xl);
font-weight: var(--font-black);
color: var(--smoky-black);
line-height: 1;
transition: color 0.3s ease;
display: inline-block;
}
.stat-suffix {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--orioles-orange);
line-height: 1;
display: inline-block;
}
/* Label e descrição */
.stat-label {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--orioles-orange);
margin-bottom: var(--space-2);
}
.stat-description {
font-size: var(--text-base);
color: var(--text-primary);
line-height: 1.5;
font-weight: var(--font-medium);
}
/* Variações específicas para cada estatística */
.clients-stat .stat-icon {
background: var(--orioles-orange);
}
.experience-stat .stat-icon {
background: var(--orioles-orange);
}
.rating-stat .stat-icon {
background: var(--orioles-orange);
}
.support-stat .stat-icon {
background: var(--orioles-orange);
}
/* Divisor decorativo */
.stats-divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin: var(--space-16) 0 var(--space-12);
position: relative;
}
.divider-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, var(--platinum), transparent);
}
.divider-rhino-small {
width: 40px;
height: 16px;
background: var(--orioles-orange);
clip-path: polygon(0% 50%, 20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%);
position: relative;
}
.divider-rhino-small::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: var(--text-white);
border-radius: 50%;
}
/* Destaque adicional */
.stats-highlight {
text-align: center;
padding: var(--space-6);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-xl);
border: 1px solid var(--platinum-dark);
backdrop-filter: blur(10px);
}
.highlight-content {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
color: var(--platinum);
font-size: var(--text-lg);
font-weight: var(--font-medium);
}
.highlight-content i {
color: var(--orioles-orange);
font-size: var(--text-xl);
}
/* Responsividade das estatísticas */
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-6);
}
.stat-card {
min-height: 260px;
}
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-6);
}
.stat-card {
padding: var(--space-6);
min-height: 240px;
}
.stat-icon {
width: 70px;
height: 70px;
}
.stat-icon i {
font-size: var(--text-2xl);
}
.stat-number {
font-size: var(--text-4xl);
}
.stat-suffix {
font-size: var(--text-2xl);
}
.highlight-content {
flex-direction: column;
gap: var(--space-2);
text-align: center;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.stat-card {
padding: var(--space-5);
min-height: 220px;
}
.stat-icon {
width: 60px;
height: 60px;
}
.stat-number {
font-size: var(--text-3xl);
}
.stat-suffix {
font-size: var(--text-xl);
}
.divider-rhino-small {
width: 30px;
height: 12px;
}
}
/* ===== GRAFISMOS DO RINOCERONTE ===== */
.rhino-graphic-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
overflow: hidden;
z-index: 1;
}
.rhino-pattern {
width: 100%;
height: 100%;
background:
linear-gradient(45deg, transparent 30%, var(--orange-alpha-10) 30%, var(--orange-alpha-10) 35%, transparent 35%),
linear-gradient(-45deg, transparent 30%, var(--orange-alpha-10) 30%, var(--orange-alpha-10) 35%, transparent 35%);
background-size: 60px 60px;
opacity: 0.6;
animation: rhinoPatternMove 20s linear infinite;
}
.rhino-graphic-stats {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
overflow: hidden;
z-index: 1;
}
.rhino-pattern-dark {
width: 100%;
height: 100%;
background:
linear-gradient(45deg, transparent 30%, var(--orange-alpha-20) 30%, var(--orange-alpha-20) 35%, transparent 35%),
linear-gradient(-45deg, transparent 30%, var(--orange-alpha-20) 30%, var(--orange-alpha-20) 35%, transparent 35%);
background-size: 80px 80px;
opacity: 0.4;
animation: rhinoPatternMove 25s linear infinite reverse;
}
@keyframes rhinoPatternMove {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-100px) translateY(-20px);
}
}
.rhino-graphic-cta {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 80px;
overflow: hidden;
z-index: 1;
}
.rhino-pattern-cta {
width: 100%;
height: 100%;
background:
linear-gradient(45deg, transparent 25%, var(--orange-alpha-15) 25%, var(--orange-alpha-15) 30%, transparent 30%),
linear-gradient(-45deg, transparent 25%, var(--orange-alpha-15) 25%, var(--orange-alpha-15) 30%, transparent 30%);
background-size: 40px 40px;
opacity: 0.5;
animation: rhinoPatternMove 15s linear infinite;
}
.section-platinum {
background: var(--platinum);
color: var(--smoky-black);
padding: var(--space-20) 0;
position: relative;
}
/* ===== CARDS DE BENEFÍCIOS MODERNOS ===== */
.modern-benefit-card {
position: relative;
background: var(--bg-primary);
border-radius: var(--radius-2xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
border: 1px solid var(--platinum);
min-height: 400px;
display: flex;
flex-direction: column;
}
.modern-benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-orange-black);
z-index: 1;
}
.modern-benefit-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--orioles-orange);
}
.card-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(circle, var(--orange-alpha-10) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.modern-benefit-card:hover .card-glow {
opacity: 1;
}
.card-content {
position: relative;
z-index: 2;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
}
.icon-container {
margin-bottom: var(--space-6);
}
.icon-background {
width: 80px;
height: 80px;
background: var(--orioles-orange);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
position: relative;
box-shadow: var(--shadow-md);
}
.icon-background::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--orioles-orange);
border-radius: 50%;
opacity: 0.3;
z-index: -1;
animation: pulse 2s infinite;
}
.icon-background i {
font-size: var(--text-3xl);
color: var(--text-white);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.1);
opacity: 0.1;
}
}
.benefit-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
background: var(--gradient-orange-black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.benefit-description {
color: var(--text-muted);
font-size: var(--text-base);
line-height: 1.6;
margin-bottom: var(--space-6);
flex-grow: 1;
}
.benefit-features {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
margin-top: auto;
}
.feature-tag {
background: var(--orange-alpha-10);
color: var(--orioles-orange);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-medium);
border: 1px solid var(--orange-alpha-20);
transition: all 0.3s ease;
}
.feature-tag:hover {
background: var(--orioles-orange);
color: var(--text-white);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* Variações específicas para cada card */
.protection-card .icon-background {
background: var(--orioles-orange);
}
.support-card .icon-background {
background: var(--orioles-orange);
}
.pricing-card .icon-background {
background: var(--orioles-orange);
}
/* Responsividade para cards modernos */
@media (max-width: 768px) {
.modern-benefit-card {
min-height: 350px;
padding: var(--space-6);
}
.icon-background {
width: 70px;
height: 70px;
}
.icon-background i {
font-size: var(--text-2xl);
}
.benefit-title {
font-size: var(--text-xl);
}
.benefit-features {
gap: var(--space-1);
}
.feature-tag {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-2);
}
}
/* ===== BADGES E DESTAQUES ===== */
.badge-dark {
background: var(--smoky-black);
color: var(--text-white);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-bold);
}
.badge-orange {
background: var(--orioles-orange);
color: var(--text-white);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-bold);
}
.badge-platinum {
background: var(--platinum);
color: var(--smoky-black);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-bold);
}
.highlight-orange {
background: var(--orioles-orange);
color: var(--text-white);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
font-weight: var(--font-bold);
}
/* ===== EFEITOS HOVER ESPECIAIS ===== */
.hover-lift:hover {
transform: translateY(-4px);
transition: all var(--transition-slow);
}
.hover-glow-orange:hover {
box-shadow: 0 0 20px var(--orange-alpha-20);
transition: all var(--transition-slow);
}
.hover-glow-black:hover {
box-shadow: 0 0 20px var(--black-alpha-10);
transition: all var(--transition-slow);
}
/* ===== FOOTER PERSONALIZADO AUTOPROTECTA ===== */
.footer-autoprotecta {
background: var(--smoky-black);
color: var(--text-white);
padding: var(--space-20) 0 var(--space-12);
position: relative;
overflow: hidden;
}
/* Conteúdo principal do footer */
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-12);
margin-bottom: var(--space-16);
}
/* Seção da marca */
.footer-brand {
max-width: 400px;
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.footer-logo .logo-img {
height: 48px;
width: auto;
}
.footer-logo .logo-text {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--text-white);
}
.brand-description {
color: var(--platinum);
font-size: var(--text-base);
line-height: 1.6;
margin-bottom: var(--space-8);
max-width: 350px;
}
/* Links de redes sociais */
.social-links {
display: flex;
gap: var(--space-3);
}
.social-link {
width: 44px;
height: 44px;
background: var(--orioles-orange);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-size: var(--text-lg);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.social-link:hover {
background: var(--text-white);
color: var(--orioles-orange);
border-color: var(--orioles-orange);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Seções do footer */
.footer-section {
display: flex;
flex-direction: column;
}
.section-title {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--text-white);
margin-bottom: var(--space-6);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: var(--orioles-orange);
border-radius: var(--radius);
}
/* Lista de links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: var(--space-3);
}
.footer-link {
color: var(--platinum);
text-decoration: none;
font-size: var(--text-sm);
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.footer-link::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--orioles-orange);
transition: width 0.3s ease;
}
.footer-link:hover {
color: var(--orioles-orange);
}
.footer-link:hover::before {
width: 100%;
}
/* Informações de contato */
.contact-info {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.contact-icon {
color: var(--orioles-orange);
font-size: var(--text-lg);
margin-top: 2px;
flex-shrink: 0;
}
.contact-details {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.contact-label {
font-size: var(--text-xs);
color: var(--platinum);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-value {
font-size: var(--text-sm);
color: var(--text-white);
font-weight: var(--font-medium);
}
/* Divisor com grafismo */
.footer-divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin: var(--space-16) 0 var(--space-12);
position: relative;
}
.divider-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, var(--platinum), transparent);
}
.divider-rhino {
width: 60px;
height: 20px;
background: var(--orioles-orange);
clip-path: polygon(0% 50%, 20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%);
position: relative;
}
.divider-rhino::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: var(--text-white);
border-radius: 50%;
}
/* Rodapé inferior */
.footer-bottom {
border-top: 1px solid var(--platinum-dark);
padding-top: var(--space-8);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.copyright {
color: var(--platinum);
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
.footer-bottom-links {
display: flex;
gap: var(--space-6);
}
.bottom-link {
color: var(--platinum);
text-decoration: none;
font-size: var(--text-sm);
transition: color 0.3s ease;
}
.bottom-link:hover {
color: var(--orioles-orange);
}
/* Responsividade do footer */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.footer-brand {
grid-column: 1 / -1;
max-width: none;
}
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.footer-brand {
text-align: center;
}
.footer-logo {
justify-content: center;
}
.brand-description {
margin: 0 auto var(--space-8);
}
.social-links {
justify-content: center;
}
.footer-section {
text-align: center;
}
.section-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-bottom-links {
justify-content: center;
}
}
@media (max-width: 480px) {
.footer-autoprotecta {
padding: var(--space-16) 0 var(--space-8);
}
.footer-content {
gap: var(--space-6);
}
.social-link {
width: 40px;
height: 40px;
font-size: var(--text-base);
}
.divider-rhino {
width: 50px;
height: 16px;
}
}
/* ===== RESPONSIVIDADE ===== */
@media (max-width: 640px) {
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
.container { padding: 0 var(--space-4); }
.grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.py-32 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.pt-32 { padding-top: var(--space-16); }
.pb-32 { padding-bottom: var(--space-16); }
/* Header mobile */
.navbar-dark .nav-menu,
.navbar-dark .cta-section {
display: none;
}
.navbar-dark .mobile-menu-btn {
display: block;
}
.navbar-dark .mobile-menu.active {
display: block;
}
.navbar-dark .logo-text {
font-size: var(--text-base);
}
.navbar-dark .logo-img {
height: 32px;
}
}
@media (min-width: 640px) {
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm\:text-5xl { font-size: var(--text-5xl); }
}
@media (min-width: 768px) {
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:text-6xl { font-size: var(--text-6xl); }
.md\:text-5xl { font-size: var(--text-5xl); }
}
@media (min-width: 1024px) {
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:text-7xl { font-size: var(--text-7xl); }
.lg\:text-6xl { font-size: var(--text-6xl); }
}
/* ===== ANIMAÇÕES ===== */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@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: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* removido: rotação */
@keyframes spin {
from { transform: none; }
to { transform: none; }
}
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-slide-left { animation: slideInLeft 0.6s ease-out; }
.animate-slide-right { animation: slideInRight 0.6s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-spin { animation: none; }
/* ===== UTILITÁRIOS AVANÇADOS ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.resize-none { resize: none; }
.resize-y { resize: vertical; }
.resize-x { resize: horizontal; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-move { cursor: move; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }
/* ===== CLASSES UTILITÁRIAS ADICIONAIS ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.transition { transition: all var(--transition); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
/* ===== SEÇÃO DE DEPOIMENTOS MELHORADA ===== */
/* Grafismo decorativo dos depoimentos */
.rhino-graphic-testimonials {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.rhino-pattern-testimonials {
position: absolute;
top: -50px;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, var(--orange-alpha-10) 0%, transparent 100%);
border-radius: 50%;
opacity: 0.6;
}
.rhino-pattern-testimonials::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: linear-gradient(45deg, var(--orange-alpha-20) 0%, transparent 50%);
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* Grid de depoimentos */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Cards de depoimento */
.testimonial-card {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
box-shadow: var(--shadow-lg);
transition: all var(--transition);
position: relative;
overflow: hidden;
border: 1px solid var(--platinum-dark);
height: 100%;
display: flex;
flex-direction: column;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-orange-black);
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--orioles-orange);
}
/* Conteúdo do depoimento */
.testimonial-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
}
/* Ícone de citação */
.quote-icon {
color: var(--orioles-orange);
font-size: 2rem;
margin-bottom: 1rem;
opacity: 0.8;
}
/* Texto do depoimento */
.testimonial-text {
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 1.5rem;
font-style: italic;
position: relative;
flex-grow: 1;
}
.testimonial-text::before {
content: '"';
position: absolute;
top: -10px;
left: -20px;
font-size: 4rem;
color: var(--orange-alpha-20);
font-family: serif;
line-height: 1;
}
/* Autor do depoimento */
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--platinum-dark);
margin-top: auto;
}
/* Avatar do autor */
.author-avatar {
width: 3rem;
height: 3rem;
background: var(--gradient-orange-black);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-weight: var(--font-bold);
font-size: var(--text-lg);
flex-shrink: 0;
}
/* Informações do autor */
.author-info {
flex: 1;
}
.author-name {
font-weight: var(--font-bold);
color: var(--text-primary);
font-size: var(--text-lg);
margin-bottom: 0.25rem;
}
.author-details {
color: var(--text-muted);
font-size: var(--text-sm);
margin-bottom: 0.5rem;
}
/* Avaliação em estrelas */
.author-rating {
display: flex;
gap: 0.25rem;
}
.author-rating i {
color: var(--orioles-orange);
font-size: var(--text-sm);
}
/* Destaque dos depoimentos */
.testimonials-highlight {
background: var(--gradient-orange-black);
border-radius: var(--radius-xl);
padding: 2rem;
text-align: center;
position: relative;
z-index: 2;
overflow: hidden;
}
.testimonials-highlight::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--orange-alpha-20) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
.highlight-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--text-white);
}
.highlight-content i {
font-size: 2rem;
color: var(--platinum);
}
.highlight-content span {
font-size: var(--text-lg);
font-weight: var(--font-bold);
}
/* Responsividade dos depoimentos */
/* ===== MEDIA QUERIES PARA NAVBAR RESPONSIVO ===== */
@media (max-width: 1200px) {
.navbar-dark .nav-menu {
gap: var(--space-2);
}
.navbar-dark .nav-link {
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
}
.navbar-dark .btn-header {
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.navbar-dark .nav-menu {
gap: var(--space-1);
}
.navbar-dark .nav-link {
padding: var(--space-1);
font-size: var(--text-xs);
}
.navbar-dark .btn-header {
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.testimonial-card {
padding: 1.25rem;
}
.testimonial-text {
font-size: var(--text-sm);
}
}
@media (max-width: 768px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: 1rem;
max-width: 100%;
padding: 0 1rem;
}
.testimonial-card {
padding: 1.25rem;
}
.quote-icon {
font-size: 1.75rem;
margin-bottom: 0.75rem;
}
.testimonial-text {
font-size: var(--text-sm);
margin-bottom: 1rem;
}
.testimonials-highlight {
padding: 1.25rem;
margin: 0 1rem;
}
.highlight-content {
flex-direction: column;
gap: 0.5rem;
}
.highlight-content span {
font-size: var(--text-sm);
text-align: center;
}
}
/* Animações específicas dos depoimentos */
.testimonial-card {
animation: fadeInUp 0.6s ease-out;
}
.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Efeitos de hover adicionais */
.testimonial-card:hover .quote-icon {
transform: scale(1.1);
transition: transform var(--transition);
}
.testimonial-card:hover .author-avatar {
transform: scale(1.03);
transition: transform var(--transition);
}
/* Variantes de cores para diferentes depoimentos */
.testimonial-1::before {
background: var(--gradient-orange-black);
}
.testimonial-2::before {
background: var(--gradient-black-orange);
}
.testimonial-3::before {
background: var(--gradient-orange-black);
}
/* Efeito de brilho nos cards */
.testimonial-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--orange-alpha-20), transparent);
transition: left 0.5s;
}
.testimonial-card:hover::after {
left: 100%;
}
/* ===== SEÇÃO DE PLANOS E PREÇOS ===== */
/* Grafismo decorativo dos preços */
.rhino-graphic-pricing {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.rhino-pattern-pricing {
position: absolute;
top: -100px;
left: -100px;
width: 400px;
height: 400px;
background: linear-gradient(135deg, var(--orange-alpha-10) 0%, transparent 100%);
border-radius: 50%;
opacity: 0.4;
}
.rhino-pattern-pricing::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background: linear-gradient(45deg, var(--orange-alpha-20) 0%, transparent 50%);
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* Grid de preços */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
/* Cards de preço */
.pricing-card {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 2rem;
box-shadow: var(--shadow-lg);
transition: all var(--transition);
position: relative;
overflow: hidden;
border: 2px solid var(--platinum-dark);
text-align: center;
}
.pricing-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--orioles-orange);
}
/* Plano em destaque */
.pricing-card.featured {
border-color: var(--orioles-orange);
transform: scale(1.05);
box-shadow: var(--shadow-xl);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-8px);
}
/* Badge do plano em destaque */
.plan-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--orioles-orange);
color: var(--text-white);
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Cabeçalho do plano */
.plan-header {
margin-bottom: 2rem;
}
.plan-icon {
width: 4rem;
height: 4rem;
background: var(--gradient-orange-black);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: var(--text-white);
font-size: 1.5rem;
}
.plan-name {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin-bottom: 1rem;
}
.plan-price {
margin-bottom: 1rem;
}
.currency {
font-size: var(--text-lg);
color: var(--text-muted);
vertical-align: top;
}
.amount {
font-size: var(--text-5xl);
font-weight: var(--font-black);
color: var(--orioles-orange);
line-height: 1;
}
.period {
font-size: var(--text-lg);
color: var(--text-muted);
}
.plan-description {
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.5;
}
/* Lista de recursos */
.plan-features {
margin-bottom: 2rem;
text-align: left;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.5rem 0;
}
.feature-item i {
color: var(--orioles-orange);
font-size: var(--text-sm);
flex-shrink: 0;
}
.feature-item span {
color: var(--text-secondary);
font-size: var(--text-base);
}
/* CTA do plano */
.plan-cta {
margin-top: auto;
}
.plan-cta .btn {
width: 100%;
justify-content: center;
}
/* Destaque de benefícios */
.pricing-highlight {
background: var(--gradient-orange-black);
border-radius: var(--radius-xl);
padding: 2rem;
text-align: center;
position: relative;
z-index: 2;
overflow: hidden;
}
.pricing-highlight::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--orange-alpha-20) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
.pricing-highlight .highlight-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
color: var(--text-white);
}
.pricing-highlight .highlight-content i {
font-size: 2.5rem;
color: var(--platinum);
flex-shrink: 0;
}
.highlight-text {
flex: 1;
text-align: left;
}
.highlight-text h4 {
font-size: var(--text-xl);
font-weight: var(--font-bold);
margin-bottom: 0.5rem;
}
.highlight-text p {
font-size: var(--text-base);
opacity: 0.9;
}
/* Responsividade dos preços */
@media (max-width: 768px) {
.pricing-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pricing-card {
padding: 1.5rem;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-8px);
}
.plan-icon {
width: 3rem;
height: 3rem;
font-size: 1.25rem;
}
.amount {
font-size: var(--text-4xl);
}
.pricing-highlight .highlight-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.highlight-text {
text-align: center;
}
}
/* Animações dos preços */
.pricing-card {
animation: fadeInUp 0.6s ease-out;
}
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }
/* Efeitos de hover adicionais */
.pricing-card:hover .plan-icon {
transform: scale(1.1);
transition: transform var(--transition);
}
.pricing-card:hover .amount {
color: var(--orioles-orange-dark);
transition: color var(--transition);
}
/* Variantes de cores para diferentes planos */
.basic-plan .plan-icon {
background: var(--gradient-orange-black);
}
.premium-plan .plan-icon {
background: var(--gradient-black-orange);
}
.business-plan .plan-icon {
background: var(--gradient-orange-black);
}
/* Efeito de brilho nos cards de preço */
.pricing-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--orange-alpha-20), transparent);
transition: left 0.5s;
}
.pricing-card:hover::after {
left: 100%;
}
/* ===== SEÇÃO DE COTAÇÃO MODERNIZADA ===== */
/* Container principal da seção */
.section-cotacao {
position: relative;
background: linear-gradient(135deg, var(--platinum-light) 0%, #ffffff 50%, var(--platinum-light) 100%);
overflow: hidden;
padding: var(--space-20) 0;
min-height: 100vh;
display: flex;
align-items: center;
}
/* Layout equilibrado para metade da tela */
.section-cotacao .container {
max-width: 1400px;
width: 100%;
}
.section-cotacao .grid {
gap: 3rem;
}
/* Lado esquerdo - Informações */
.section-cotacao .lg\:grid-cols-2 > div:first-child {
padding-right: 2rem;
}
/* Lado direito - Formulário */
.section-cotacao .lg\:grid-cols-2 > div:last-child {
padding-left: 2rem;
}
/* Painel esquerdo escuro coerente com o site */
.cotacao-left-panel {
background: linear-gradient(180deg, #0f0f0f 0%, #111 100%);
border-radius: 24px;
padding: 32px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 20px 50px rgba(0,0,0,0.4);
}
.cotacao-left-panel h3 {
color: var(--text-white);
}
.cotacao-left-panel p {
color: var(--platinum);
}
/* Cards escuros com borda laranja */
.cotacao-left-panel .beneficio-card {
background: #ffffff;
border: 2px solid var(--orioles-orange);
color: var(--text-primary);
}
.cotacao-left-panel .beneficio-card h4 {
color: var(--platinum);
}
.cotacao-left-panel .beneficio-icon {
background: linear-gradient(135deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%);
}
/* Destaque 100% seguro versão escura */
.cotacao-left-panel .seguranca-destaque {
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
border: 1px solid var(--orioles-orange);
}
.cotacao-left-panel .seguranca-destaque .text-orange-light { color: #ffb49e; }
/* Grafismos decorativos */
.section-cotacao::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, var(--orange-alpha-10) 0%, transparent 70%);
border-radius: 50%;
animation: float 8s ease-in-out infinite;
}
.section-cotacao::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 250px;
height: 250px;
background: radial-gradient(circle, var(--orange-alpha-10) 0%, transparent 70%);
border-radius: 50%;
animation: float 6s ease-in-out infinite reverse;
}
@keyframes float-no-rotate {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Header da seção */
.cotacao-header {
position: relative;
z-index: 2;
}
.cotacao-badge {
background: linear-gradient(135deg, var(--orange-alpha-20) 0%, var(--orange-alpha-10) 100%);
border: 1px solid var(--orange-alpha-30);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.cotacao-badge:hover {
background: linear-gradient(135deg, var(--orange-alpha-30) 0%, var(--orange-alpha-20) 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(251, 69, 22, 0.2);
}
.cotacao-title {
color: #fb4516;
background-clip: text;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Benefícios da cotação */
.beneficio-card {
background: linear-gradient(135deg, #ffffff 0%, var(--platinum-light) 100%);
border: 1px solid var(--platinum-dark);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
min-height: 120px;
display: flex;
align-items: center;
}
.beneficio-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(251, 69, 22, 0.1), transparent);
transition: left 0.6s ease;
}
.beneficio-card:hover::before {
left: 100%;
}
.beneficio-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: var(--orioles-orange);
}
/* Removido - substituído pela versão mais específica abaixo */
.beneficio-card:hover .beneficio-icon {
transform: scale(1.05);
box-shadow: 0 12px 30px rgba(251, 69, 22, 0.4);
}
/* Destaque de segurança */
.seguranca-destaque {
background: linear-gradient(135deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%);
position: relative;
overflow: hidden;
}
.seguranca-destaque::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.6; }
}
/* Removido - substituído pela versão mais específica abaixo */
.seguranca-destaque:hover .seguranca-icon {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* Formulário moderno */
.formulario-container {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
}
.formulario-container .formulario-shadow {
height: 100%;
min-height: 600px;
display: flex;
flex-direction: column;
}
.formulario-shadow {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border: 1px solid var(--platinum-dark);
}
.formulario-header {
background: linear-gradient(135deg, var(--platinum-light) 0%, var(--platinum) 100%);
border-bottom: 2px solid var(--orioles-orange);
}
.formulario-icon {
background: linear-gradient(135deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%);
box-shadow: 0 10px 25px rgba(251, 69, 22, 0.3);
transition: all 0.3s ease;
}
.formulario-container:hover .formulario-icon {
transform: scale(1.05);
box-shadow: 0 15px 35px rgba(251, 69, 22, 0.4);
}
/* Formulário moderno */
.form-group-modern {
margin-bottom: 1.5rem;
position: relative;
}
.form-label-modern {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.form-group-modern:hover .form-label-modern {
color: var(--orioles-orange);
}
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid var(--platinum-dark);
border-radius: var(--radius-lg);
font-size: var(--text-base);
color: var(--text-primary);
background: var(--bg-primary);
transition: all var(--transition);
font-family: var(--font-family);
position: relative;
overflow: hidden;
}
.form-input-modern::before,
.form-select-modern::before,
.form-textarea-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(251, 69, 22, 0.1), transparent);
transition: left 0.6s ease;
}
.form-input-modern:hover::before,
.form-select-modern:hover::before,
.form-textarea-modern:hover::before {
left: 100%;
}
.form-input-modern:focus,
.form-select-modern:focus,
.form-textarea-modern:focus {
outline: none;
border-color: var(--orioles-orange);
box-shadow: 0 0 0 3px var(--orange-alpha-20);
transform: translateY(-2px);
background: var(--platinum-light);
}
.form-input-modern::placeholder,
.form-textarea-modern::placeholder {
color: var(--text-muted);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.form-input-modern:focus::placeholder,
.form-textarea-modern:focus::placeholder {
opacity: 0.5;
}
.form-textarea-modern {
resize: vertical;
min-height: 120px;
}
/* Ícones dos campos */
.form-icon {
color: var(--text-muted);
transition: all 0.3s ease;
}
.form-group-modern:hover .form-icon {
color: var(--orioles-orange);
transform: scale(1.1);
}
/* Botões modernos */
.btn-modern-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%);
color: var(--text-white);
border: none;
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-weight: var(--font-bold);
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
box-shadow: 0 4px 15px rgba(251, 69, 22, 0.3);
position: relative;
overflow: hidden;
}
.btn-modern-primary::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-modern-primary:hover::before {
left: 100%;
}
.btn-modern-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(251, 69, 22, 0.4);
}
.btn-modern-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
background: var(--bg-primary);
color: var(--text-primary);
border: 2px solid var(--platinum-dark);
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-weight: var(--font-bold);
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
}
.btn-modern-secondary:hover {
border-color: var(--orioles-orange);
color: var(--orioles-orange);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(12, 12, 12, 0.1);
}
.btn-modern-success {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: var(--text-white);
border: none;
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-weight: var(--font-bold);
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-modern-success:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
/* Barra de progresso moderna */
.progress-fill-modern {
transition: width 0.5s ease-out;
background: linear-gradient(90deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%);
}
.step-indicator-modern {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
transition: all var(--transition);
cursor: pointer;
}
.step-indicator-modern:hover {
transform: translateY(-2px);
}
.step-indicator-modern.active .w-8 {
background: var(--orioles-orange);
color: var(--text-white);
transform: scale(1.1);
box-shadow: 0 4px 15px rgba(251, 69, 22, 0.3);
}
.step-indicator-modern.active span {
color: var(--text-primary);
font-weight: var(--font-semibold);
}
/* Etapa de confirmação */
.confirmacao-step {
animation: slideInUp 0.5s ease-out;
}
.resumo-card {
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 1rem;
padding: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
word-wrap: break-word;
word-break: break-word;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
position: relative;
}
.resumo-card:hover {
border-color: var(--orioles-orange);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.resumo-header {
color: var(--smoky-black);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(251, 69, 22, 0.1);
transition: all 0.3s ease;
}
.resumo-header i {
color: var(--orioles-orange);
margin-right: 0.5rem;
font-size: 1rem;
}
.resumo-card:hover .resumo-header {
color: var(--orioles-orange);
}
/* Labels dos campos */
.resumo-card .text-muted {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b7280;
margin-bottom: 0.25rem;
display: block;
}
/* Controle de texto nos cards de resumo */
.resumo-card p,
.resumo-card span {
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
white-space: normal;
}
/* Campos específicos que podem ter texto longo */
#resumoNome,
#resumoEmail,
#resumoTelefone,
#resumoModelo,
#resumoMensagem {
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
display: block;
background: linear-gradient(135deg, rgba(251, 69, 22, 0.06) 0%, rgba(251, 69, 22, 0.02) 100%);
padding: 0.6rem 0.8rem;
border-radius: 0.6rem;
border: 1px solid rgba(251, 69, 22, 0.15);
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 500;
margin-top: 0.25rem;
color: var(--smoky-black);
position: relative;
transition: all 0.2s ease;
}
#resumoNome:hover,
#resumoEmail:hover,
#resumoTelefone:hover,
#resumoModelo:hover,
#resumoMensagem:hover {
background: linear-gradient(135deg, rgba(251, 69, 22, 0.08) 0%, rgba(251, 69, 22, 0.04) 100%);
border-color: rgba(251, 69, 22, 0.25);
transform: translateY(-1px);
}
.resumo-card .font-medium {
line-height: 1.4;
margin-top: 0.25rem;
}
/* Grid responsivo nos cards de resumo */
.resumo-card .grid {
gap: 1.5rem;
margin-top: 0.5rem;
}
.resumo-card .grid > div {
min-width: 0; /* Permite que os flex items encolham */
overflow: hidden;
background: rgba(248, 250, 252, 0.5);
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
}
.resumo-card .grid > div:hover {
background: rgba(251, 69, 22, 0.02);
border-color: rgba(251, 69, 22, 0.1);
}
/* Responsividade específica para cards de resumo */
@media (max-width: 768px) {
.resumo-card .grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.resumo-card {
padding: 1.25rem;
margin-bottom: 1rem;
}
.resumo-header {
font-size: 1rem;
padding-bottom: 0.5rem;
}
.resumo-card .grid > div {
padding: 0.5rem;
}
#resumoNome,
#resumoEmail,
#resumoTelefone,
#resumoModelo,
#resumoMensagem {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
}
/* Responsividade da seção de cotação */
@media (max-width: 768px) {
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
padding: 0.875rem 0.875rem 0.875rem 2.5rem;
font-size: var(--text-sm);
}
.btn-modern-primary,
.btn-modern-secondary,
.btn-modern-success {
padding: 0.875rem 1.5rem;
font-size: var(--text-sm);
}
.form-label-modern {
font-size: var(--text-xs);
}
.cotacao-title {
font-size: var(--text-4xl);
}
.beneficio-card {
padding: 1rem;
}
}
/* Animações específicas da cotação */
.form-step {
animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Efeitos de hover nos campos */
.form-group-modern:hover .form-input-modern,
.form-group-modern:hover .form-select-modern,
.form-group-modern:hover .form-textarea-modern {
border-color: var(--orioles-orange);
}
/* Estados de erro */
.form-input-modern.error,
.form-select-modern.error,
.form-textarea-modern.error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Estados de sucesso */
.form-input-modern.success,
.form-select-modern.success,
.form-textarea-modern.success {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
animation: successPulse 0.5s ease-in-out;
}
@keyframes successPulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* ===== POPUPS ===== */
/* Overlay dos popups */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.popup-overlay.show {
opacity: 1;
visibility: visible;
}
.popup-overlay.hidden {
opacity: 0;
visibility: hidden;
}
/* Conteúdo dos popups */
.popup-content {
background: var(--bg-primary);
border-radius: var(--radius-2xl);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.8) translateY(20px);
transition: all 0.3s ease;
border: 1px solid var(--platinum-dark);
}
.popup-overlay.show .popup-content {
transform: scale(1) translateY(0);
}
/* Header dos popups */
.popup-header {
text-align: center;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid var(--platinum-dark);
}
.success-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2.5rem;
color: white;
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}
.warning-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2.5rem;
color: white;
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
}
.popup-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.popup-subtitle {
font-size: var(--text-base);
color: var(--text-muted);
line-height: 1.5;
}
/* Corpo dos popups */
.popup-body {
padding: 2rem;
}
/* Popup de sucesso */
.success-details {
margin-bottom: 2rem;
}
.detail-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--platinum-light);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
border: 1px solid var(--platinum-dark);
}
.detail-item i {
font-size: 1.25rem;
width: 20px;
text-align: center;
}
.detail-item span {
font-size: var(--text-sm);
color: var(--text-primary);
font-weight: var(--font-medium);
}
.popup-cta {
text-align: center;
}
/* Popup de saída */
.exit-warning {
text-align: center;
}
.warning-message {
margin-bottom: 2rem;
text-align: left;
}
.warning-list {
list-style: none;
padding: 0;
margin: 0;
}
.warning-list li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--platinum-dark);
font-size: var(--text-sm);
color: var(--text-primary);
}
.warning-list li:last-child {
border-bottom: none;
}
.warning-list i {
font-size: 1rem;
width: 16px;
text-align: center;
}
.exit-cta {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Animações dos popups */
@keyframes popupIn {
from {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes popupOut {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
}
/* Responsividade dos popups */
@media (max-width: 768px) {
.popup-content {
width: 95%;
margin: 1rem;
}
.popup-header {
padding: 1.5rem 1.5rem 1rem;
}
.popup-body {
padding: 1.5rem;
}
.success-icon,
.warning-icon {
width: 60px;
height: 60px;
font-size: 2rem;
}
.popup-title {
font-size: var(--text-xl);
}
.detail-item {
padding: 0.75rem;
margin-bottom: 0.75rem;
}
.warning-list li {
padding: 0.5rem 0;
font-size: var(--text-xs);
}
}
/* Estados de hover e foco */
.popup-content:hover {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.detail-item:hover {
background: var(--platinum);
border-color: var(--orioles-orange);
transform: translateX(5px);
transition: all 0.3s ease;
}
/* Efeitos de entrada e saída */
.popup-overlay.entering {
animation: popupIn 0.3s ease forwards;
}
.popup-overlay.exiting {
animation: popupOut 0.3s ease forwards;
}
/* ===== SEÇÃO DE COTAÇÃO MODERNA ===== */
/* Container principal da cotação */
.cotacao-moderna {
display: flex;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.cotacao-container {
display: flex;
width: 100%;
min-height: 100vh;
}
/* Lado Esquerdo - Fundo Escuro */
.cotacao-left {
flex: 1;
background: linear-gradient(135deg, #0C0C0C 0%, #2a2a2a 100%);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.cotacao-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.cotacao-title {
font-size: 3rem;
font-weight: 800;
color: #fb4516;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 2;
animation: slideInLeft 0.8s ease-out;
}
.cotacao-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.6;
position: relative;
z-index: 2;
animation: slideInLeft 0.8s ease-out 0.2s both;
}
.beneficios-title {
font-size: 1.8rem;
color: white;
margin-bottom: 30px;
font-weight: 600;
position: relative;
z-index: 2;
animation: slideInLeft 0.8s ease-out 0.4s both;
}
.beneficios-grid {
display: grid;
gap: 20px;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.beneficio-item {
background: rgba(251, 69, 22, 0.1);
border-radius: 15px;
padding: 20px;
border: 1px solid rgba(251, 69, 22, 0.3);
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 15px;
animation: slideInLeft 0.8s ease-out calc(0.6s + var(--delay)) both;
}
.beneficio-item:hover {
transform: translateY(-5px);
background: rgba(251, 69, 22, 0.15);
box-shadow: 0 10px 30px rgba(251, 69, 22, 0.2);
}
.beneficio-item:nth-child(1) { --delay: 0s; }
.beneficio-item:nth-child(2) { --delay: 0.1s; }
.beneficio-item:nth-child(3) { --delay: 0.2s; }
.beneficio-item:nth-child(4) { --delay: 0.3s; }
.beneficio-icon {
width: 50px !important;
height: 50px !important;
background: linear-gradient(135deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: white !important;
font-size: 1.5rem !important;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(251, 69, 22, 0.3);
transition: all 0.3s ease;
}
.beneficio-icon i {
color: white !important;
font-size: 1.5rem !important;
}
.beneficio-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(251, 69, 22, 0.4);
}
.beneficio-content h3 {
color: #fb4516;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.beneficio-content p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
}
.seguranca-section {
background: rgba(251, 69, 22, 0.1);
border-radius: 15px;
padding: 25px;
border: 1px solid rgba(251, 69, 22, 0.3);
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 15px;
animation: slideInLeft 0.8s ease-out 1.2s both;
}
.seguranca-icon {
width: 50px !important;
height: 50px !important;
background: linear-gradient(135deg, var(--orioles-orange) 0%, var(--orioles-orange-dark) 100%) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: white !important;
font-size: 1.5rem !important;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(251, 69, 22, 0.3);
transition: all 0.3s ease;
}
.seguranca-icon i {
color: white !important;
font-size: 1.5rem !important;
}
.seguranca-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(251, 69, 22, 0.4);
}
/* Responsividade para os ícones */
@media (max-width: 768px) {
.beneficio-icon,
.seguranca-icon {
width: 40px !important;
height: 40px !important;
font-size: 1.25rem !important;
}
.beneficio-icon i,
.seguranca-icon i {
font-size: 1.25rem !important;
}
}
@media (max-width: 480px) {
.beneficio-icon,
.seguranca-icon {
width: 35px !important;
height: 35px !important;
font-size: 1rem !important;
}
.beneficio-icon i,
.seguranca-icon i {
font-size: 1rem !important;
}
}
.seguranca-content h3 {
color: #fb4516;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 15px;
}
.seguranca-content p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
margin: 0;
}
/* Lado Direito - Fundo Claro */
.cotacao-right {
flex: 1;
background: #F8F7FD;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.form-container-modern {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
animation: slideInRight 0.8s ease-out;
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.form-title-modern {
font-size: 2.2rem;
color: #0C0C0C;
margin-bottom: 15px;
font-weight: 700;
text-align: center;
}
.form-subtitle-modern {
color: #666;
text-align: center;
margin-bottom: 30px;
font-size: 1.1rem;
}
.step-indicator-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
gap: 15px;
}
.step-number-modern {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fb4516;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(251, 69, 22, 0.3);
}
.step-info-modern {
text-align: left;
}
.step-title-modern {
font-size: 1.3rem;
color: #0C0C0C;
font-weight: 600;
margin-bottom: 5px;
}
.step-description-modern {
color: #666;
font-size: 0.9rem;
}
.form-modern {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-group-cotacao {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label-cotacao {
font-weight: 600;
color: #0C0C0C;
font-size: 1rem;
}
.required {
color: #fb4516;
}
.form-input-cotacao {
width: 100%;
padding: 15px 20px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
color: #0C0C0C;
}
.form-input-cotacao:focus {
outline: none;
border-color: #fb4516;
box-shadow: 0 0 0 3px rgba(251, 69, 22, 0.1);
transform: translateY(-2px);
}
.form-input-cotacao::placeholder {
color: #999;
}
.submit-btn-modern {
width: 100%;
padding: 18px;
background: #fb4516;
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 6px 20px rgba(251, 69, 22, 0.3);
}
.submit-btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(251, 69, 22, 0.4);
background: #e03d14;
}
/* 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);
}
}
/* Responsividade para Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
.cotacao-container {
min-height: auto;
}
.cotacao-left, .cotacao-right {
padding: 35px 25px;
}
.cotacao-title {
font-size: 2.5rem;
line-height: 1.2;
}
.cotacao-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.beneficios-title {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.beneficios-grid {
gap: 15px;
}
.beneficio-item {
gap: 12px;
}
.beneficio-content h3 {
font-size: 1rem;
}
.beneficio-content p {
font-size: 0.9rem;
}
.form-container-modern {
padding: 35px 25px;
border-radius: 16px;
}
.form-title-modern {
font-size: 2rem;
}
.form-subtitle-modern {
font-size: 1rem;
}
.btn-modern-primary,
.btn-modern-secondary,
.btn-modern-success {
padding: 14px 20px;
font-size: 1rem;
}
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
padding: 14px 18px;
font-size: 1rem;
}
}
/* Responsividade para Mobile */
@media (max-width: 768px) {
.cotacao-moderna {
flex-direction: column;
min-height: auto;
}
.cotacao-container {
flex-direction: column;
min-height: auto;
}
.cotacao-left, .cotacao-right {
flex: none;
padding: 25px 15px;
}
.cotacao-left {
order: 1;
background: linear-gradient(135deg, #0C0C0C 0%, #1a1a1a 100%);
}
.cotacao-right {
order: 2;
background: #F8F7FD;
}
.cotacao-title {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.cotacao-subtitle {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.beneficios-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.beneficios-grid {
gap: 12px;
}
.beneficio-item {
gap: 10px;
padding: 12px 0;
}
.beneficio-content h3 {
font-size: 0.95rem;
margin-bottom: 0.25rem;
}
.beneficio-content p {
font-size: 0.85rem;
line-height: 1.4;
}
.seguranca-section {
margin-top: 1.5rem;
gap: 12px;
}
.seguranca-content h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.seguranca-content p {
font-size: 0.85rem;
line-height: 1.4;
}
.form-container-modern {
padding: 25px 15px;
border-radius: 12px;
margin: 0 10px;
}
.form-title-modern {
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.form-subtitle-modern {
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.step-indicator-container {
flex-direction: column;
text-align: center;
}
.step-info-modern {
text-align: center;
}
.btn-modern-primary,
.btn-modern-secondary,
.btn-modern-success {
padding: 14px 18px;
font-size: 0.95rem;
}
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
padding: 14px 16px;
font-size: 0.95rem;
}
.form-label-modern {
font-size: 0.85rem;
}
}
/* Responsividade para Mobile Pequeno */
@media (max-width: 480px) {
.cotacao-left, .cotacao-right {
padding: 20px 10px;
}
.cotacao-title {
font-size: 1.8rem;
}
.cotacao-subtitle {
font-size: 0.9rem;
}
.beneficios-title {
font-size: 1.3rem;
}
.beneficio-content h3 {
font-size: 0.9rem;
}
.beneficio-content p {
font-size: 0.8rem;
}
.seguranca-content h3 {
font-size: 1rem;
}
.seguranca-content p {
font-size: 0.8rem;
}
.form-container-modern {
padding: 20px 12px;
margin: 0 5px;
}
.form-title-modern {
font-size: 1.4rem;
}
.form-subtitle-modern {
font-size: 0.85rem;
}
.btn-modern-primary,
.btn-modern-secondary,
.btn-modern-success {
padding: 12px 16px;
font-size: 0.9rem;
}
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
padding: 12px 16px;
font-size: 0.9rem;
}
.form-label-modern {
font-size: 0.8rem;
}
}
/* Estilos para formulário multi-etapas */
.multi-step-form {
position: relative;
}
.form-step {
display: none !important;
animation: fadeInUp 0.5s ease-out;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.form-step.active {
display: block !important;
opacity: 1;
transform: translateY(0);
}
.form-group-modern {
margin-bottom: 1.5rem;
position: relative;
}
.form-label-modern {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #0C0C0C;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
width: 100%;
padding: 15px 20px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
color: #0C0C0C;
font-family: inherit;
}
.form-input-modern:focus,
.form-select-modern:focus,
.form-textarea-modern:focus {
outline: none;
border-color: #fb4516;
box-shadow: 0 0 0 3px rgba(251, 69, 22, 0.1);
transform: translateY(-2px);
}
.form-input-modern::placeholder,
.form-textarea-modern::placeholder {
color: #999;
}
.form-textarea-modern {
resize: vertical;
min-height: 120px;
}
.btn-modern-primary,
.btn-modern-secondary,
.btn-modern-success {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
border: none;
gap: 0.5rem;
}
.btn-modern-primary {
background: #fb4516;
color: white;
box-shadow: 0 4px 15px rgba(251, 69, 22, 0.3);
}
.btn-modern-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(251, 69, 22, 0.4);
background: #e03d14;
}
.btn-modern-secondary {
background: white;
color: #0C0C0C;
border: 2px solid #e1e5e9;
}
.btn-modern-secondary:hover {
border-color: #fb4516;
color: #fb4516;
transform: translateY(-2px);
}
.btn-modern-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-modern-success:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
.space-y-5 > * + * {
margin-top: 1.25rem;
}
.space-y-6 > * + * {
margin-top: 1.5rem;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.left-4 {
left: 1rem;
}
.top-1\/2 {
top: 50%;
}
.top-3 {
top: 0.75rem;
}
.transform {
transform: var(--tw-transform);
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.pl-12 {
padding-left: 3rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.w-full {
width: 100%;
}
.flex-1 {
flex: 1 1 0%;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.mt-8 {
margin-top: 2rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.text-gray-400 {
color: #9ca3af;
}
.text-gray-600 {
color: #4b5563;
}
.text-gray-300 {
color: #d1d5db;
}
.bg-gray-50 {
background-color: #f9fafb;
}
.bg-gray-200 {
background-color: #e5e7eb;
}
.bg-gray-300 {
background-color: #d1d5db;
}
.border-gray-100 {
border-color: #f3f4f6;
}
.border-gray-200 {
border-color: #e5e7eb;
}
.border-gray-300 {
border-color: #d1d5db;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
.w-8 {
width: 2rem;
}
.h-8 {
height: 2rem;
}
.w-5 {
width: 1.25rem;
}
.h-5 {
height: 1.25rem;
}
.w-16 {
width: 4rem;
}
.h-16 {
height: 4rem;
}
.text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.leading-relaxed {
line-height: 1.625;
}
.hover\:border-orange:hover {
border-color: #fb4516;
}
.hover\:underline:hover {
text-decoration: underline;
}
.focus\:ring-orange:focus {
box-shadow: 0 0 0 3px rgba(251, 69, 22, 0.1);
}
.transition-colors {
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.cursor-pointer {
cursor: pointer;
}
.mt-1 {
margin-top: 0.25rem;
}
.hidden {
display: none;
}
.grid {
display: grid;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
/* Classes de cores para indicadores */
.bg-green-500 {
background-color: #10b981;
}
.text-green-600 {
color: #059669;
}
.bg-orange {
background-color: #fb4516;
}
.text-primary {
color: #0C0C0C;
}
.text-muted {
color: #666666;
}
/* ===== SEÇÃO CTA FINAL - PROTEÇÃO URGENTE ===== */
/* Container principal */
.cta-final-section {
position: relative;
overflow: hidden;
}
/* Grafismos decorativos */
.cta-final-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
.cta-final-section::after {
content: '';
position: absolute;
bottom: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
animation: float 8s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Ícone de urgência */
.urgency-icon {
position: relative;
z-index: 2;
}
.urgency-icon::before {
content: '';
position: absolute;
inset: -10px;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
/* Título principal */
.cta-title {
position: relative;
z-index: 2;
}
.cta-title .highlight {
position: relative;
display: inline-block;
}
.cta-title .highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: var(--platinum);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
animation: underline 0.8s ease-out 0.5s forwards;
}
@keyframes underline {
to {
transform: scaleX(1);
}
}
/* Estatísticas de urgência */
.urgency-stats {
position: relative;
z-index: 2;
}
.stat-item {
position: relative;
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-number {
position: relative;
display: inline-block;
}
.stat-number::before {
content: '';
position: absolute;
inset: -5px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s ease;
}
.stat-item:hover .stat-number::before {
transform: scale(1);
}
/* CTAs principais */
.cta-buttons {
position: relative;
z-index: 2;
}
.cta-primary-btn {
position: relative;
overflow: hidden;
}
.cta-primary-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.cta-primary-btn:hover::before {
left: 100%;
}
.cta-secondary-btn {
position: relative;
transition: all 0.3s ease;
}
.cta-secondary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}
/* Mensagem de urgência adicional */
.urgency-message {
position: relative;
z-index: 2;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.urgency-message:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.02);
}
/* Responsividade da seção CTA */
@media (max-width: 768px) {
.cta-title {
font-size: var(--text-3xl);
}
.urgency-stats {
grid-template-columns: 1fr;
gap: 2rem;
}
.cta-buttons {
flex-direction: column;
gap: 1rem;
}
.urgency-icon {
width: 60px;
height: 60px;
}
.urgency-icon i {
font-size: 2rem;
}
}
/* Animações de entrada */
.cta-final-section {
animation: slideInUp 1s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Efeitos de hover nos elementos */
.stat-item:hover .stat-number {
color: var(--platinum);
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.urgency-message:hover {
border-color: rgba(255, 255, 255, 0.4);
}
/* ===== SEÇÃO COMO FUNCIONA - ESTILO AUTOPROTECTA ===== */
.section-light {
background: var(--platinum);
position: relative;
padding: 6rem 0;
overflow: hidden;
}
/* Grafismo decorativo do rinoceronte - similar às outras seções */
.section-light::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(135deg,
rgba(251, 69, 22, 0.05) 0%,
transparent 50%,
rgba(251, 69, 22, 0.03) 100%
);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 80%);
}
.section-light::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 300px;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Container dos passos */
.steps-container {
position: relative;
z-index: 2;
}
/* Remover linha conectora - design mais limpo */
.steps-container::before {
display: none;
}
/* Cada passo individual - estilo similar aos benefit cards */
.step-item {
position: relative;
text-align: center;
padding: 3rem 2rem;
background: var(--bg-primary);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
transition: all 0.4s var(--ease-out);
border: 1px solid rgba(251, 69, 22, 0.08);
overflow: hidden;
min-height: 380px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* Efeito de glow similar aos benefit cards */
.step-item::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--orioles-orange), transparent, var(--orioles-orange));
border-radius: var(--radius-2xl);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.step-item:hover::before {
opacity: 0.1;
}
.step-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2xl);
border-color: rgba(251, 69, 22, 0.2);
}
/* Número do passo - estilo mais elegante */
.step-number-wrapper {
position: relative;
margin: 0 auto 1.5rem;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.step-number {
width: 70px;
height: 70px;
background: var(--orioles-orange);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--platinum);
font-size: 1.75rem;
font-weight: var(--font-black);
font-family: var(--font-primary);
position: relative;
z-index: 3;
box-shadow: var(--shadow-lg);
transition: all 0.3s var(--ease-out);
}
.step-number::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
background: var(--orioles-orange);
border-radius: 50%;
opacity: 0.15;
z-index: -1;
}
.step-item:hover .step-number {
transform: scale(1.05);
box-shadow: var(--shadow-xl);
background: var(--smoky-black);
}
/* Remover animação pulse excessiva */
/* Ícone do passo - estilo consistente com benefit cards */
.step-icon {
margin-bottom: 2rem;
position: relative;
z-index: 10;
}
.step-icon i {
font-size: 3.5rem;
color: var(--orioles-orange);
transition: all 0.3s var(--ease-out);
opacity: 1;
display: block;
}
.step-item:hover .step-icon i {
transform: scale(1.1);
opacity: 1;
}
/* Título do passo - tipografia consistente */
.step-title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
font-family: var(--font-primary);
transition: color 0.3s var(--ease-out);
line-height: 1.3;
}
.step-item:hover .step-title {
color: var(--orioles-orange);
}
/* Descrição do passo - tipografia consistente */
.step-description {
color: var(--text-muted);
line-height: var(--leading-relaxed);
font-size: var(--text-base);
font-family: var(--font-primary);
font-weight: var(--font-regular);
max-width: 280px;
margin: 0 auto;
}
/* Remover conectores - design mais limpo */
.step-connector {
display: none;
}
/* Animações suaves - similar aos benefit cards */
.step-item {
opacity: 1;
transform: translateY(0);
}
/* Responsividade */
@media (max-width: 768px) {
.section-light {
padding: 4rem 0;
}
.steps-container::before {
display: none;
}
.step-item {
margin-bottom: var(--space-8);
min-height: auto;
padding: 2rem 1.5rem;
}
.step-number-wrapper {
width: 80px;
height: 80px;
margin-bottom: 1rem;
}
.step-number {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.step-icon i {
font-size: 2.5rem;
}
.step-title {
font-size: var(--text-lg);
}
}
/* Destaque para o primeiro passo (ativo) */
.step-item.active {
border-color: rgba(251, 69, 22, 0.15);
}
.step-item.active .step-number {
background: var(--smoky-black);
}
/* Garantir que todos os ícones apareçam */
.step-item .step-icon i {
visibility: visible !important;
opacity: 1 !important;
color: var(--orioles-orange) !important;
}
/* ===== BOTÃO FLUTUANTE WHATSAPP ===== */
.whatsapp-float {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
animation: float 3s ease-in-out infinite;
}
.whatsapp-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border-radius: 50%;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
position: relative;
overflow: hidden;
}
.whatsapp-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s ease;
}
.whatsapp-btn:hover::before {
transform: scale(1);
}
.whatsapp-btn:hover {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
}
.whatsapp-btn i {
font-size: 1.5rem;
color: white;
z-index: 2;
position: relative;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Pulse effect para chamar atenção */
.whatsapp-btn::after {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: inherit;
border-radius: 50%;
opacity: 0.7;
animation: whatsapp-pulse 2s infinite;
}
@keyframes whatsapp-pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
/* Responsividade do botão WhatsApp */
@media (max-width: 768px) {
.whatsapp-float {
bottom: 20px;
right: 20px;
}
.whatsapp-btn {
width: 55px;
height: 55px;
}
}
/* ===== MEDIA QUERIES ESPECÍFICAS PARA NAVBAR MOBILE ===== */
@media (max-width: 768px) {
.navbar-dark .nav-menu,
.navbar-dark .cta-section {
display: none;
}
.navbar-dark .mobile-menu-btn {
display: block;
}
.navbar-dark .mobile-menu.active {
display: block;
}
.navbar-dark .logo-text {
font-size: var(--text-base);
}
.navbar-dark .logo-img {
height: 32px;
max-width: 150px;
}
.navbar-dark .nav-content {
justify-content: space-between;
width: 100%;
}
.navbar-dark .logo-section {
flex-shrink: 0;
}
.navbar-dark .mobile-menu-btn {
flex-shrink: 0;
}
}
@media (max-width: 480px) {
.navbar-dark .logo-img {
height: 28px;
max-width: 120px;
}
.navbar-dark .mobile-menu-btn {
font-size: var(--text-lg);
padding: var(--space-1);
}
}
/* ===== COMPATIBILIDADE ESPECÍFICA PARA iOS/Safari ===== */
@supports (-webkit-touch-callout: none) {
/* iOS específico */
.navbar-dark {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.navbar-dark .logo-img {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.fas, .far, .fab, .fal, .fad {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
/* Safari específico */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.navbar-dark {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.navbar-dark .logo-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
}
/* Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.navbar-dark .logo-img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
.whatsapp-btn i {
font-size: 1.25rem;
}
}