/* === styles\tokens.css === */
/* =========================================================
LEGALIZE GROUP — DESIGN TOKENS v3
Paleta extraída do logo oficial:
- Brand Blue #033F88 (68,6% do logo)
- Brand Gray #6D6E70 (24,7% do logo)
========================================================= */
:root {
/* Brand cores cruas */
--brand-blue: #033F88;
--brand-gray: #6D6E70;
/* Escala de azul (217°) */
--blue-50: #EBF2FB;
--blue-100: #C9DBF1;
--blue-300: #3D8BF0;
--blue-500: #033F88;
--blue-700: #022858;
--blue-900: #011533;
/* Escala de cinza */
--gray-50: #F4F4F5;
--gray-100: #E4E4E7;
--gray-300: #A1A1A4;
--gray-500: #6D6E70;
--gray-700: #404045;
--gray-900: #1F1F23;
/* Cursor signature — exclusivo do efeito */
--cursor-emerald: #00FFA3;
--cursor-cyan: #00E5FF;
--cursor-violet: #B794F6;
/* Tipografia */
--font-display: "Fraunces", "Times New Roman", serif;
--font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
/* Espaçamento (4px system) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
--space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
--space-24: 96px; --space-32: 128px; --space-40: 160px; --space-48: 192px;
/* Raios */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Sombras */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
--glow-blue: 0 0 32px rgba(61, 139, 240, 0.22);
/* Z-index */
--z-base: 0;
--z-content: 2;
--z-elevated: 10;
--z-nav: 100;
--z-modal: 1000;
--z-cursor: 9999;
/* Motion */
--dur-fast: 200ms;
--dur-base: 350ms;
--dur-slow: 600ms;
--dur-slower: 1000ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
/* Container */
--container-max: 1280px;
--container-pad: 48px;
/* Gradientes (uso limitadíssimo) */
--gradient-text-fade: linear-gradient(180deg, #FFF 0%, #FFF 60%, rgba(255,255,255,0.4) 100%);
--gradient-mesh-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(3, 63, 136, 0.18), transparent 70%);
--gradient-3d: linear-gradient(135deg, var(--blue-300) 0%, var(--blue-500) 100%);
--gradient-cursor: radial-gradient(circle,
rgba(0, 255, 163, 0.18) 0%,
rgba(0, 229, 255, 0.12) 30%,
rgba(183, 148, 246, 0.08) 60%,
transparent 80%);
}
/* ---------- DARK (default) ---------- */
:root,
:root[data-theme="dark"] {
--bg-primary: #0A0F1C;
--bg-secondary: #0E1424;
--bg-elevated: #131A2C;
--surface: rgba(255, 255, 255, 0.02);
--surface-hover: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.06);
--border-strong: rgba(255, 255, 255, 0.12);
--border-focus: var(--blue-300);
--text-primary: #FFFFFF;
--text-secondary: rgba(255, 255, 255, 0.72);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-quaternary: rgba(255, 255, 255, 0.3);
--text-inverse: #0A0F1C;
--accent: var(--blue-300);
--accent-hover: #5BA0F5;
--accent-soft: rgba(61, 139, 240, 0.10);
--accent-strong: var(--blue-500);
--neutral: var(--gray-300);
--neutral-soft: rgba(109, 110, 112, 0.15);
--mesh-hero: var(--gradient-mesh-hero);
}
/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
--bg-primary: #FFFFFF;
--bg-secondary: #F9FAFB;
--bg-elevated: #FFFFFF;
--surface: rgba(3, 63, 136, 0.02);
--surface-hover: rgba(3, 63, 136, 0.04);
--border: rgba(3, 63, 136, 0.10);
--border-strong: rgba(3, 63, 136, 0.20);
--border-focus: var(--blue-500);
--text-primary: var(--gray-900);
--text-secondary: var(--gray-700);
--text-tertiary: #71717A;
--text-quaternary: #A1A1A4;
--text-inverse: #FFFFFF;
--accent: var(--blue-500);
--accent-hover: var(--blue-700);
--accent-soft: rgba(3, 63, 136, 0.08);
--accent-strong: var(--blue-500);
--neutral: var(--gray-500);
--neutral-soft: rgba(109, 110, 112, 0.10);
--gradient-text-fade: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-900) 60%, rgba(31,31,35,0.4) 100%);
}
/* === styles\base.css === */
/* =========================================================
BASE — reset, body, tipografia, cursor signature
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body {
position: relative;
min-height: 100vh;
transition: background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}
/* Grain overlay */
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
opacity: 0.025;
z-index: var(--z-cursor);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
margin: 0;
text-wrap: balance;
letter-spacing: -0.015em;
}
p { margin: 0; text-wrap: pretty; color: var(--text-secondary); }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
button { font-family: inherit; cursor: pointer; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--text-inverse); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
@media (max-width: 768px) { .container { padding: 0 24px; } }
/* Reveal */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur-slower) var(--ease-smooth),
transform var(--dur-slower) var(--ease-smooth);
will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
.cursor-glow { display: none; }
}
/* Cursor signature */
.cursor-glow {
position: fixed;
top: 0; left: 0;
width: 600px; height: 600px;
border-radius: 50%;
background: var(--gradient-cursor);
pointer-events: none;
z-index: var(--z-cursor);
filter: blur(40px);
mix-blend-mode: screen;
transform: translate(-50%, -50%);
transition: opacity var(--dur-base) var(--ease-out);
opacity: 0;
will-change: transform;
}
.cursor-glow.active { opacity: 1; }
:root[data-theme="light"] .cursor-glow {
mix-blend-mode: multiply;
opacity: 0;
}
:root[data-theme="light"] .cursor-glow.active { opacity: 0.6; }
/* Blue trailing glow — focused beam */
.cursor-blue {
position: fixed;
top: 0; left: 0;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(120, 180, 255, 0.65) 0%,
rgba(61, 139, 240, 0.35) 18%,
rgba(3, 63, 136, 0.10) 45%,
transparent 70%);
pointer-events: none;
z-index: var(--z-cursor);
filter: blur(22px);
transform: translate(-50%, -50%);
transition: opacity var(--dur-base) var(--ease-out);
opacity: 0;
will-change: transform;
}
.cursor-blue.active { opacity: 0.85; }
:root[data-theme="light"] .cursor-blue {
mix-blend-mode: multiply;
background: radial-gradient(circle,
rgba(3, 63, 136, 0.12) 0%,
rgba(3, 63, 136, 0.06) 40%,
transparent 75%);
}
@media (hover: none) { .cursor-glow, .cursor-blue { display: none; } }
/* ---------- Logo viva (substitui o backdrop 3D) ---------- */
.logo-live {
position: fixed;
top: 0;
right: 0;
width: 58vw;
max-width: 880px;
height: 100vh;
pointer-events: none;
z-index: 1;
display: grid;
place-items: center;
perspective: 1400px;
transition: opacity var(--dur-base) var(--ease-out);
}
.logo-live img {
width: clamp(360px, 44vw, 720px);
height: auto;
user-select: none;
-webkit-user-drag: none;
transform-style: preserve-3d;
will-change: transform;
filter:
drop-shadow(0 0 4px rgba(252, 220, 140, 0.95))
drop-shadow(0 0 10px rgba(245, 200, 110, 0.70))
drop-shadow(0 0 22px rgba(210, 160, 80, 0.45))
drop-shadow(0 0 38px rgba(170, 120, 50, 0.25))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
animation: logo-shine 5.5s ease-in-out infinite;
}
.logo-live__halo { display: none; }
@keyframes logo-shine {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(252, 220, 140, 0.85))
drop-shadow(0 0 10px rgba(245, 200, 110, 0.60))
drop-shadow(0 0 22px rgba(210, 160, 80, 0.40))
drop-shadow(0 0 38px rgba(170, 120, 50, 0.20))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
50% {
filter:
drop-shadow(0 0 6px rgba(255, 230, 160, 1))
drop-shadow(0 0 16px rgba(252, 215, 130, 0.85))
drop-shadow(0 0 32px rgba(220, 170, 90, 0.55))
drop-shadow(0 0 52px rgba(180, 130, 50, 0.32))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
}
:root[data-theme="light"] .logo-live img {
filter:
drop-shadow(0 0 14px rgba(180, 130, 50, 0.35))
drop-shadow(0 8px 28px rgba(120, 80, 25, 0.28));
animation: none;
}
:root[data-theme="light"] .logo-live__halo {
background: radial-gradient(circle, rgba(200, 150, 70, 0.18) 0%, transparent 70%);
animation: none;
}
/* Tablet: logo decorativa atrás do hero (mantém comportamento anterior) */
@media (min-width: 769px) and (max-width: 1080px) {
.logo-live {
position: absolute;
width: 80%;
max-width: none;
height: 50vh;
top: 80px;
right: -10%;
left: auto;
opacity: 0.22 !important;
}
.logo-live img { width: clamp(220px, 60vw, 420px); }
}
/* MOBILE: balão flutuante fixo no canto inferior-direito */
@media (max-width: 768px) {
.logo-live {
position: fixed;
top: auto;
bottom: 18px;
right: 14px;
left: auto;
width: auto;
height: auto;
max-width: none;
perspective: 500px;
z-index: 60;
opacity: 1 !important;
pointer-events: none;
display: block;
}
.logo-live img {
width: 64px !important;
height: auto;
animation: balloon-bob 3.4s ease-in-out infinite;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
transform: none;
}
.logo-live__halo { display: none; }
}
/* ---------- Contour Switch (botão flutuante) ---------- */
.contour-switch {
position: fixed;
top: 96px;
left: 50%;
transform: translateX(-50%);
z-index: 90;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px 8px 18px;
background: rgba(10, 15, 28, 0.78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--border-strong);
border-radius: var(--radius-full);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.contour-switch__label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-tertiary);
margin-right: 4px;
}
.contour-switch__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--dur-fast) var(--ease-out);
}
.contour-switch__btn:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.06);
}
.contour-switch__btn.is-active {
background: var(--text-primary);
color: var(--text-inverse);
border-color: var(--text-primary);
}
.contour-switch__dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
flex-shrink: 0;
box-shadow: 0 0 6px currentColor;
}
@media (max-width: 640px) {
.contour-switch {
top: auto;
bottom: 90px;
padding: 6px 8px 6px 14px;
}
.contour-switch__label { display: none; }
.contour-switch__btn { padding: 6px 10px; font-size: 11px; }
}
/* ---------- Variantes de contorno do logo ---------- */
:root[data-contour="white"] .logo-live img {
animation: logo-shine-white 5.5s ease-in-out infinite;
filter:
drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
drop-shadow(0 0 10px rgba(245, 250, 255, 0.65))
drop-shadow(0 0 22px rgba(220, 235, 250, 0.40))
drop-shadow(0 0 38px rgba(180, 210, 240, 0.20))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
:root[data-contour="blue"] .logo-live img {
animation: logo-shine-blue 5.5s ease-in-out infinite;
filter:
drop-shadow(0 0 4px rgba(140, 200, 255, 0.95))
drop-shadow(0 0 10px rgba(91, 160, 245, 0.65))
drop-shadow(0 0 22px rgba(61, 139, 240, 0.42))
drop-shadow(0 0 38px rgba(3, 63, 136, 0.25))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
:root[data-contour="purple"] .logo-live img {
animation: logo-shine-purple 5.5s ease-in-out infinite;
filter:
drop-shadow(0 0 4px rgba(225, 195, 255, 0.95))
drop-shadow(0 0 10px rgba(183, 148, 246, 0.70))
drop-shadow(0 0 22px rgba(140, 90, 220, 0.45))
drop-shadow(0 0 38px rgba(80, 40, 150, 0.25))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
:root[data-contour="yellow"] .logo-live img {
animation: logo-shine-yellow 5.5s ease-in-out infinite;
filter:
drop-shadow(0 0 4px rgba(255, 255, 200, 0.95))
drop-shadow(0 0 10px rgba(255, 230, 50, 0.70))
drop-shadow(0 0 22px rgba(230, 200, 20, 0.45))
drop-shadow(0 0 38px rgba(180, 150, 0, 0.25))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
@keyframes logo-shine-white {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
drop-shadow(0 0 10px rgba(245, 250, 255, 0.65))
drop-shadow(0 0 22px rgba(220, 235, 250, 0.40))
drop-shadow(0 0 38px rgba(180, 210, 240, 0.20))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
50% {
filter:
drop-shadow(0 0 6px rgba(255, 255, 255, 1))
drop-shadow(0 0 16px rgba(250, 252, 255, 0.85))
drop-shadow(0 0 32px rgba(225, 240, 255, 0.55))
drop-shadow(0 0 52px rgba(190, 220, 250, 0.32))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
}
@keyframes logo-shine-blue {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(140, 200, 255, 0.95))
drop-shadow(0 0 10px rgba(91, 160, 245, 0.65))
drop-shadow(0 0 22px rgba(61, 139, 240, 0.42))
drop-shadow(0 0 38px rgba(3, 63, 136, 0.25))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
50% {
filter:
drop-shadow(0 0 6px rgba(180, 220, 255, 1))
drop-shadow(0 0 16px rgba(120, 180, 255, 0.85))
drop-shadow(0 0 32px rgba(80, 150, 240, 0.55))
drop-shadow(0 0 52px rgba(20, 80, 170, 0.35))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
}
@keyframes logo-shine-purple {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(225, 195, 255, 0.90))
drop-shadow(0 0 10px rgba(183, 148, 246, 0.65))
drop-shadow(0 0 22px rgba(140, 90, 220, 0.42))
drop-shadow(0 0 38px rgba(80, 40, 150, 0.22))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
50% {
filter:
drop-shadow(0 0 6px rgba(240, 215, 255, 1))
drop-shadow(0 0 16px rgba(200, 165, 255, 0.85))
drop-shadow(0 0 32px rgba(160, 110, 240, 0.55))
drop-shadow(0 0 52px rgba(100, 55, 180, 0.32))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
}
@keyframes logo-shine-yellow {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(255, 255, 200, 0.90))
drop-shadow(0 0 10px rgba(255, 230, 50, 0.65))
drop-shadow(0 0 22px rgba(230, 200, 20, 0.42))
drop-shadow(0 0 38px rgba(180, 150, 0, 0.22))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
50% {
filter:
drop-shadow(0 0 6px rgba(255, 255, 220, 1))
drop-shadow(0 0 16px rgba(255, 240, 90, 0.85))
drop-shadow(0 0 32px rgba(245, 215, 30, 0.55))
drop-shadow(0 0 52px rgba(200, 175, 0, 0.32))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
}
@keyframes balloon-bob {
0% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
50% { transform: translate3d(-3px, -8px, 0) rotate(3deg) scale(1.05); }
100% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
}
@keyframes balloon-halo {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 0.95; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
.logo-live img, .logo-live__halo { animation: none; }
}
/* Mantém conteúdo acima da logo */
.nav, .hero, .stats, .history, .mission, .pillars, .blog, .cta-final, .footer {
position: relative;
z-index: var(--z-content);
}
/* ---------- Video Background (HTML5 nativo, sem YouTube) ----------
Cobre toda a viewport com técnica "object-fit: cover".
Sem branding, sem controles, sem loading spinner. */
.video-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: var(--bg-primary, #0A0F1C);
}
.video-bg video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
/* leve escurecimento para combinar com tema dark, sem matar o vídeo */
filter: brightness(0.85) saturate(0.92) contrast(1.05);
}
.video-bg__overlay {
position: absolute;
inset: 0;
background:
/* vertical: topo translúcido (vídeo aparece), base escura (footer legível) */
linear-gradient(
180deg,
rgba(10, 15, 28, 0.20) 0%,
rgba(10, 15, 28, 0.35) 40%,
rgba(10, 15, 28, 0.70) 80%,
rgba(10, 15, 28, 0.92) 100%
),
/* radial: escurece bordas para focar atenção no centro */
radial-gradient(
ellipse at 50% 40%,
rgba(10, 15, 28, 0.0) 0%,
rgba(10, 15, 28, 0.25) 80%
);
pointer-events: none;
}
/* Modo "hero" (V2 e V4): vídeo cobre o hero, fade OUT proporcional ao scroll.
Opacity calculada via var(--scroll-progress) (0 → 1, smoothstep) atualizada pelo App.
Pequeno transition: 0.18s linear suaviza pulos quando o frame-rate cai. */
.video-bg--hero {
opacity: calc(1 - var(--scroll-progress, 0));
transition: opacity 0.18s linear;
will-change: opacity;
}
.video-bg--hero.is-minimized, /* compat: backup binário */
:root[data-scrolled="1"] .video-bg--hero {
pointer-events: none;
}
/* Modo "hybrid" (V4): logo 3D dourada faz fade IN — sincronizado com fade OUT do vídeo.
Opacity é controlada inline pelo loop rAF do ScrollScene (lê --scroll-progress).
CSS define apenas o transition para suavizar mudanças bruscas. */
:root[data-bg-mode="hybrid"] .logo-live {
transition: opacity 0.18s linear;
will-change: opacity;
}
/* Mobile / data-saver: desliga o vídeo (componente não monta o iframe, mas o div fica) */
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* === styles\components.css === */
/* =========================================================
COMPONENTS v3 — sóbrio, institucional
========================================================= */
/* ---------- Eyebrow (cinza neutro) ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--neutral);
}
.eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--neutral);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 24px;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
isolation: isolate;
transition: all var(--dur-base) var(--ease-out);
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
transform: translateX(-120%);
transition: transform 700ms var(--ease-smooth);
z-index: -1;
}
.btn:hover::before { transform: translateX(120%); }
.btn--primary {
background: var(--accent);
color: var(--text-inverse);
}
.btn--primary:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
0 12px 32px rgba(61, 139, 240, 0.35);
}
.btn--primary:active { transform: translateY(0); transition-duration: 80ms; }
.btn--ghost {
background: transparent;
border-color: var(--border-strong);
color: var(--text-primary);
}
.btn--ghost:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
background: var(--accent-soft);
}
.btn--ghost:active { transform: translateY(0); transition-duration: 80ms; }
.btn--text {
padding: 8px 0;
background: transparent;
border: none;
color: var(--text-secondary);
position: relative;
overflow: visible;
}
.btn--text::before { display: none; }
.btn--text::after {
content: '';
position: absolute;
bottom: 4px; left: 0; right: 0;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.btn--text:hover { color: var(--text-primary); }
.btn--text:hover::after { transform: scaleX(1); }
.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(6px); }
/* ---------- Badge institucional ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: var(--radius-full);
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.15em;
}
/* ---------- Card ---------- */
.card {
position: relative;
padding: 40px;
border-radius: var(--radius-xl);
background: var(--surface);
border: 1px solid var(--border);
transition: all var(--dur-slow) var(--ease-out);
}
.card:hover {
transform: translateY(-2px);
border-color: var(--border-strong);
background: var(--surface-hover);
}
/* ---------- Section title ---------- */
.section-title {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 400;
text-wrap: balance;
color: var(--text-primary);
}
.section-title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}
.section-title .accent {
color: var(--accent);
font-style: normal;
font-weight: 400;
}
.section-lede {
font-size: 19px;
line-height: 1.65;
color: var(--text-secondary);
max-width: 580px;
text-wrap: pretty;
}
/* ---------- KPI / Stat ---------- */
.stat-number {
font-family: var(--font-display);
font-size: clamp(40px, 4.5vw, 64px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text-primary);
display: inline-flex;
align-items: baseline;
}
.stat-number .accent {
color: var(--accent);
font-size: 0.7em;
margin-left: 0.05em;
}
.stat-label {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-secondary);
margin-top: 12px;
max-width: 200px;
line-height: 1.5;
}
/* ---------- Card de credencial ---------- */
.credential {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 28px;
border-radius: var(--radius-lg);
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: all var(--dur-slow) var(--ease-out);
}
.credential:hover {
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
transform: translateY(-2px);
}
.credential__icon {
width: 40px; height: 40px;
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--accent);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.credential__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.credential__text .label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--neutral);
}
.credential__text .value {
font-family: var(--font-display);
font-size: 18px;
font-weight: 400;
color: var(--text-primary);
letter-spacing: -0.015em;
}
/* === styles\sections.css === */
/* =========================================================
SECTIONS v3 — institucional sóbrio
========================================================= */
/* ---------- Nav ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: var(--z-nav);
height: 80px;
display: flex;
align-items: center;
background: rgba(10, 15, 28, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid transparent;
transition: all var(--dur-base) var(--ease-out);
}
:root[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.7); }
.nav.scrolled {
height: 64px;
border-bottom-color: var(--border);
background: rgba(10, 15, 28, 0.85);
}
:root[data-theme="light"] .nav.scrolled { background: rgba(255, 255, 255, 0.92); }
.nav__inner {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
}
.nav__logo {
display: inline-flex;
align-items: center;
color: var(--text-primary);
text-decoration: none;
}
.nav__logo-img {
height: 88px;
width: auto;
max-width: 380px;
display: block;
filter: drop-shadow(0 2px 6px rgba(3, 63, 136, 0.35));
transition: transform 0.25s var(--ease-out);
}
.nav__logo:hover .nav__logo-img { transform: translateY(-1px); }
.nav.scrolled .nav__logo-img { height: 68px; }
:root[data-theme="dark"] .nav__logo-img {
filter:
brightness(1.08)
drop-shadow(0 2px 8px rgba(3, 63, 136, 0.45));
}
.nav__logo-img--footer {
height: 40px;
filter: brightness(1.15) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
@media (max-width: 640px) {
.nav__logo-img { height: 64px; }
.nav__logo-img--footer { height: 36px; }
}
/* legado — mantido para compatibilidade com a logo dourada de fundo */
.nav__logo-mark {
width: 38px; height: 38px;
background-image: url("../uploads/LEGALIZE_GROUP_LOGO_HORIZONTAL.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(3, 63, 136, 0.35));
}
.nav__logo .group {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--neutral);
margin-left: 4px;
align-self: center;
}
.nav__links {
display: flex;
justify-content: center;
gap: 40px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
position: relative;
padding: 6px 0;
}
.nav__links a:hover { color: var(--text-primary); }
.nav__links a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 1px;
width: 100%;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1080px) {
.nav__links { display: none; }
.nav__inner { grid-template-columns: auto auto; justify-content: space-between; }
}
@media (max-width: 560px) {
.nav__cta { display: none; }
.nav__inner { grid-template-columns: 1fr; justify-content: start; }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 90vh;
padding: 160px var(--container-pad) 96px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
background: var(--mesh-hero);
pointer-events: none;
z-index: 0;
}
/* hero__three removed — ScrollScene is global */
.hero__inner {
position: relative;
z-index: var(--z-content);
max-width: var(--container-max);
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 80px;
align-items: center;
}
.hero__title {
font-family: var(--font-display);
font-size: clamp(44px, 6vw, 80px);
line-height: 1.0;
letter-spacing: -0.025em;
font-weight: 400;
margin-top: 28px;
text-wrap: balance;
}
.hero__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}
.hero__lede {
font-size: 19px;
line-height: 1.65;
color: var(--text-secondary);
max-width: 580px;
margin-top: 28px;
}
.hero__ctas {
display: flex;
gap: 14px;
margin-top: 40px;
flex-wrap: wrap;
}
.hero__badges {
display: flex;
gap: 12px;
margin-top: 56px;
flex-wrap: wrap;
}
@media (max-width: 1080px) {
.hero__inner { grid-template-columns: 1fr; gap: 56px; }
.hero { padding-top: 120px; }
}
/* ---------- Stats ---------- */
.stats {
padding: 96px var(--container-pad);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-secondary);
}
.stats__inner {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.stat {
padding: 0 32px;
border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; padding-left: 0; }
@media (max-width: 1080px) {
.stats__inner { grid-template-columns: repeat(2, 1fr); gap: 48px 0; }
.stat { border-left: none; padding-left: 0; padding-right: 16px; }
.stat:nth-child(even) { border-left: 1px solid var(--border); padding-left: 32px; }
}
/* ---------- History timeline ---------- */
.history {
padding: 160px var(--container-pad);
}
.history__inner {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 96px;
align-items: start;
}
.history__head { position: sticky; top: 120px; }
.history__quote {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.history__quote .text {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.history__quote .attr {
margin-top: 16px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--neutral);
}
.history__quote .attr::before { content: '— '; color: var(--accent); }
.timeline {
position: relative;
padding-left: 56px;
list-style: none;
margin: 0;
}
.timeline::before {
content: '';
position: absolute;
left: 16px; top: 8px; bottom: 8px;
width: 1px;
background: var(--border);
}
.timeline__item {
position: relative;
padding-bottom: 64px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
content: '';
position: absolute;
left: -56px; top: 4px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--accent);
}
.timeline__item::after {
content: '';
position: absolute;
left: -46px; top: 14px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent);
}
.timeline__year {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 8px;
display: block;
}
.timeline__title {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 24px);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 12px;
}
.timeline__desc {
font-size: 16px;
line-height: 1.65;
color: var(--text-secondary);
}
@media (max-width: 1080px) {
.history__inner { grid-template-columns: 1fr; gap: 48px; }
.history__head { position: relative; top: 0; }
}
/* ---------- Mission (faixa institucional) ---------- */
.mission {
padding: 120px var(--container-pad);
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 60% 80% at 50% 50%, rgba(3, 63, 136, 0.18), transparent 70%),
var(--bg-primary);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.mission__inner {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.mission__quote {
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text-primary);
text-wrap: balance;
margin-top: 8px;
}
.mission__quote em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}
.mission__attr {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--neutral);
}
.mission__statement {
margin-top: 32px;
font-size: 19px;
line-height: 1.65;
color: var(--text-secondary);
max-width: 680px;
text-wrap: pretty;
}
.mission__statement em {
font-style: normal;
color: var(--text-primary);
font-weight: 500;
}
/* ---------- Pillars ---------- */
.pillars {
padding: 160px var(--container-pad);
background: var(--bg-secondary);
}
.pillars__inner {
max-width: var(--container-max);
margin: 0 auto;
}
/* ---------- Bloco do Fundador (Dr. Mauro) ---------- */
.founder {
display: grid;
grid-template-columns: minmax(280px, 460px) 1fr;
gap: 80px;
align-items: center;
margin-bottom: 140px;
}
.founder__photo {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
0 40px 80px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.06);
transform: translateY(0);
transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.founder__photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(10, 15, 28, 0.45) 100%);
pointer-events: none;
}
.founder__photo:hover {
transform: translateY(-6px);
box-shadow:
0 56px 100px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(245, 200, 110, 0.18);
}
.founder__photo img {
display: block;
width: 100%;
height: auto;
filter: contrast(1.04) saturate(1.05);
}
.founder__copy { display: flex; flex-direction: column; }
.founder__copy .eyebrow { color: rgba(245, 200, 110, 0.92); }
.founder__lede {
margin-top: 28px;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.7;
color: var(--text-secondary);
max-width: 56ch;
}
.founder__lede strong {
color: var(--text-primary);
font-weight: 500;
}
.founder__quote {
margin: 36px 0 0;
padding: 24px 28px;
border-left: 2px solid rgba(245, 200, 110, 0.55);
background:
linear-gradient(90deg,
rgba(245, 200, 110, 0.05) 0%,
transparent 100%);
}
.founder__quote p {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
font-style: italic;
letter-spacing: -0.01em;
line-height: 1.4;
color: var(--text-primary);
margin: 0;
}
.founder__quote cite {
display: block;
margin-top: 14px;
font-family: var(--font-mono);
font-size: 11px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-tertiary);
}
@media (max-width: 960px) {
.founder {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 100px;
}
.founder__photo { max-width: 460px; }
.founder__lede { font-size: 16px; }
.founder__quote p { font-size: 19px; }
}
.pillars__head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 80px;
align-items: end;
margin-bottom: 80px;
}
.pillars__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.pillar {
position: relative;
padding: 40px;
border-radius: var(--radius-xl);
background: var(--surface);
border: 1px solid var(--border);
transition: all var(--dur-slow) var(--ease-out);
display: flex;
flex-direction: column;
min-height: 460px;
}
.pillar:hover {
transform: translateY(-2px);
border-color: var(--border-strong);
background: var(--surface-hover);
}
.pillar__num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--neutral);
}
.pillar__icon {
width: 56px; height: 56px;
border-radius: var(--radius-md);
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
display: grid;
place-items: center;
margin: 32px 0 24px;
color: var(--accent);
}
.pillar__title {
font-family: var(--font-display);
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--text-primary);
}
.pillar__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}
.pillar__desc {
font-size: 16px;
line-height: 1.65;
color: var(--text-secondary);
margin-top: 16px;
}
.pillar__features {
margin-top: auto;
padding-top: 32px;
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.pillar__features li {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--neutral);
display: flex;
align-items: center;
gap: 10px;
}
.pillar__features li::before {
content: '';
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
}
@media (max-width: 1080px) {
.pillars__head { grid-template-columns: 1fr; gap: 24px; }
.pillars__grid { grid-template-columns: 1fr; }
}
/* ---------- Blog ---------- */
.blog {
padding: 160px var(--container-pad);
}
.blog__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.blog__head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 80px;
align-items: end;
margin-bottom: 64px;
}
.blog__cta {
display: flex;
justify-content: flex-end;
align-items: end;
}
.blog__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.post {
display: flex;
flex-direction: column;
border-radius: var(--radius-xl);
background: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
transition: all var(--dur-slow) var(--ease-out);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.post:hover {
transform: translateY(-4px);
border-color: var(--border-strong);
background: var(--surface-hover);
box-shadow: var(--shadow-lg);
}
.post__cover {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bg-elevated);
}
.post__cover-art {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transition: transform var(--dur-slower) var(--ease-smooth);
}
.post:hover .post__cover-art { transform: scale(1.06); }
.post__cover-art svg { width: 70%; height: 70%; opacity: 0.9; }
.post__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,15,28,0.6) 100%);
pointer-events: none;
}
.post__category {
position: absolute;
top: 16px; left: 16px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
background: rgba(10, 15, 28, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: var(--radius-full);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.post__body {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
flex: 1;
gap: 14px;
}
.post__meta {
display: flex;
gap: 16px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-tertiary);
}
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post__title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 400;
color: var(--text-primary);
text-wrap: balance;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post__excerpt {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post__cta {
margin-top: auto;
padding-top: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--accent);
}
.post__cta svg { transition: transform var(--dur-base) var(--ease-out); }
.post:hover .post__cta svg { transform: translate(3px, -3px); }
@media (max-width: 1080px) {
.blog__head { grid-template-columns: 1fr; gap: 24px; }
.blog__cta { justify-content: flex-start; }
.blog__grid { grid-template-columns: 1fr; }
}
/* ---------- CTA Final ---------- */
.cta-final {
padding: 160px var(--container-pad);
position: relative;
overflow: hidden;
text-align: center;
background: var(--bg-secondary);
}
.cta-final__inner {
position: relative;
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.cta-final__title {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 400;
}
.cta-final__title em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}
.cta-final__sub {
font-size: 18px;
color: var(--text-secondary);
max-width: 560px;
}
.cta-final__buttons {
display: flex;
gap: 14px;
margin-top: 12px;
flex-wrap: wrap;
justify-content: center;
}
/* ---------- Footer (azul institucional) ---------- */
.footer {
background: var(--blue-500);
color: #FFF;
padding: 96px var(--container-pad) 32px;
}
.footer__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.footer__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 48px;
padding-bottom: 64px;
}
.footer__brand .nav__logo { color: #FFF; margin-bottom: 20px; }
.footer__brand .nav__logo-mark {
filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent);
opacity: 0.95;
}
.footer__brand .nav__logo .group { color: rgba(255,255,255,0.6); }
.footer__brand p {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.65;
max-width: 320px;
}
.footer__col h4 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.5);
margin-bottom: 20px;
}
.footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__col a {
font-size: 14px;
color: rgba(255,255,255,0.85);
}
.footer__col a:hover { color: #FFF; }
.footer__contact .line {
font-size: 14px;
color: rgba(255,255,255,0.85);
line-height: 1.7;
}
.footer__contact .line strong { color: #FFF; font-weight: 500; }
.footer__bottom {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.footer__bottom .credentials {
display: flex;
gap: 24px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.6);
}
.footer__bottom .credentials span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer__bottom .credentials span::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
}
.footer__copy {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.6);
}
@media (max-width: 1080px) {
.footer__top { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
.footer__top { grid-template-columns: 1fr; gap: 32px; }
}
/* =========================================================
MOBILE — refinos para telas ≤768px e ≤480px
========================================================= */
@media (max-width: 768px) {
/* Container */
:root { --container-pad: 20px; }
/* Nav */
.nav { height: 64px; }
.nav.scrolled { height: 56px; }
.nav__logo { font-size: 18px; }
.nav__logo-mark { width: 32px; height: 32px; }
.nav__cta .btn { padding: 9px 16px; font-size: 13px; }
/* Hero */
.hero { padding: 110px 20px 64px; min-height: auto; }
.hero__inner { gap: 40px; }
.hero__title { font-size: clamp(36px, 9vw, 52px); margin-top: 20px; line-height: 1.05; }
.hero__lede { font-size: 16px; margin-top: 22px; }
.hero__ctas { margin-top: 32px; gap: 10px; }
.hero__ctas .btn { flex: 1 1 auto; min-width: 140px; }
.hero__badges { margin-top: 36px; gap: 8px; }
.badge { padding: 7px 12px; font-size: 11px; }
/* Stats */
.stats { padding: 56px 20px; }
.stats__inner { grid-template-columns: 1fr 1fr; gap: 36px 0; }
.stat { padding: 0 16px; }
.stat:nth-child(odd) { border-left: none; padding-left: 0; }
.stat:nth-child(even) { border-left: 1px solid var(--border); padding-left: 20px; }
.stat-number { font-size: clamp(32px, 7vw, 44px); }
.stat-label { font-size: 13px; max-width: none; }
/* History / Timeline */
.history { padding: 80px 20px; }
.history__inner { gap: 40px; }
.history__head { position: static; }
.history__quote { margin-top: 32px; padding-top: 24px; }
.timeline { padding-left: 36px; }
.timeline__item { padding-bottom: 40px; }
.timeline__item::before { left: -36px; width: 22px; height: 22px; }
.timeline__item::after { left: -30px; top: 9px; width: 10px; height: 10px; }
.timeline__year { font-size: 11px; }
.timeline__title { font-size: 18px; }
.timeline__desc { font-size: 14px; }
/* Mission */
.mission { padding: 64px 20px; }
.mission__quote { font-size: clamp(22px, 6vw, 30px); }
.mission__statement { font-size: 16px; margin-top: 24px; }
/* Pillars */
.pillars { padding: 80px 20px; }
.pillars__head { gap: 16px; margin-bottom: 40px; }
.pillar { padding: 28px 24px; min-height: auto; }
.pillar__title { font-size: 22px; }
.pillar__desc { font-size: 14px; }
/* Blog */
.blog { padding: 80px 20px; }
.blog__head { gap: 16px; margin-bottom: 32px; }
.blog__cta .btn { width: 100%; justify-content: center; }
.post__body { padding: 22px 22px 26px; }
.post__title { font-size: 18px; }
/* CTA Final */
.cta-final { padding: 80px 20px; }
.cta-final__title { font-size: clamp(28px, 7vw, 38px); }
.cta-final__sub { font-size: 15px; }
.cta-final__buttons { width: 100%; flex-direction: column; }
.cta-final__buttons .btn { width: 100%; }
/* Footer */
.footer { padding: 56px 20px 24px; }
.footer__top { padding-bottom: 40px; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.footer__bottom .credentials { gap: 12px 16px; }
/* Section title genérico */
.section-title { font-size: clamp(28px, 7vw, 40px); }
.section-lede { font-size: 15px; }
/* Cursor signature: já some em (hover: none) — reforço */
.cursor-glow, .cursor-blue { display: none; }
}
@media (max-width: 480px) {
.hero__title { font-size: clamp(30px, 9.5vw, 40px); line-height: 1.08; }
.hero__ctas { flex-direction: column; }
.hero__ctas .btn { width: 100%; }
.stat-number { font-size: 28px; }
.stat-label { font-size: 12px; }
.post__cover { aspect-ratio: 16 / 9; }
.footer__bottom .credentials { font-size: 10px; gap: 10px 14px; }
/* Eyebrow: caber em uma linha mesmo em telas estreitas */
.eyebrow {
font-size: 11px;
letter-spacing: 0.10em;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.eyebrow::before { width: 16px; flex-shrink: 0; }
.badge { font-size: 10px; letter-spacing: 0.10em; padding: 6px 10px; }
}
/* === styles\whatsapp.css === */
/* =====================================================
WhatsApp — FAB + Modal
===================================================== */
/* ---- Botão flutuante (FAB) ---- */
.wa-fab {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 200;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 20px 13px 16px;
background: #25D366;
color: #fff;
border: none;
border-radius: 50px;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
animation: wa-pulse 3s ease-in-out infinite;
}
.wa-fab:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 10px 32px rgba(37, 211, 102, 0.65), 0 4px 12px rgba(0, 0, 0, 0.35);
animation: none;
}
.wa-fab__label { white-space: nowrap; }
@keyframes wa-pulse {
0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0,0,0,0.35); }
50% { box-shadow: 0 4px 28px rgba(37, 211, 102, 0.80), 0 2px 12px rgba(0,0,0,0.35); }
}
@media (max-width: 640px) {
.wa-fab {
bottom: 20px;
right: 16px;
padding: 12px 14px;
border-radius: 50%;
width: 52px;
height: 52px;
justify-content: center;
}
.wa-fab__label { display: none; }
}
/* ---- Overlay ----
Padrão flex-column + margin-top:auto:
- Quando o modal CABE na tela: ele fica colado no canto inferior-direito
- Quando o modal é MAIOR que a tela: o overlay rola e mostra do topo ao fim,
SEM cortar o cabeçalho (bug clássico de align-items:flex-end + scroll)
- 100dvh = altura dinâmica (lida corretamente com a barra do navegador no mobile) */
.wa-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 400;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 16px 28px 96px;
min-height: 100vh;
min-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
animation: wa-fade-in 0.18s ease;
}
@keyframes wa-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Telas pequenas / verticais — modal centralizado */
@media (max-width: 640px) {
.wa-overlay {
align-items: center;
padding: 12px;
}
}
/* Telas baixas (notebooks 768px de altura, monitores ultrawide) — sem padding inferior gigante */
@media (max-height: 720px) {
.wa-overlay {
padding: 12px 16px;
align-items: center;
}
}
/* ---- Modal ---- */
.wa-modal {
width: 360px;
max-width: calc(100vw - 24px);
background: #0D1322;
border: 1px solid rgba(61, 139, 240, 0.18);
border-radius: 20px;
overflow: hidden;
margin-top: auto; /* empurra para baixo; vira 0 quando há overflow → o topo aparece */
flex-shrink: 0; /* não permite o conteúdo encolher dentro do scroll */
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.04);
animation: wa-slide-up 0.26s cubic-bezier(0.34, 1.48, 0.64, 1);
}
@media (max-width: 640px), (max-height: 720px) {
.wa-modal {
margin: auto; /* centraliza vertical e horizontalmente */
}
}
@keyframes wa-slide-up {
from { opacity: 0; transform: translateY(28px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Header estilo WhatsApp */
.wa-modal__header {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 18px 16px;
background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
position: relative;
}
.wa-modal__avatar {
width: 44px; height: 44px;
background: rgba(255, 255, 255, 0.18);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: #fff;
}
.wa-modal__info { flex: 1; min-width: 0; }
.wa-modal__name {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: #fff;
}
.wa-modal__status {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: rgba(255, 255, 255, 0.78);
margin-top: 2px;
}
.wa-modal__dot {
width: 7px; height: 7px;
background: #7FE89A;
border-radius: 50%;
box-shadow: 0 0 6px #7FE89A;
animation: wa-blink 1.8s ease-in-out infinite;
}
@keyframes wa-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.wa-modal__close {
width: 30px; height: 30px;
background: rgba(255, 255, 255, 0.12);
border: none;
border-radius: 50%;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
flex-shrink: 0;
}
.wa-modal__close:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
/* Balão de mensagem */
.wa-modal__bubble {
margin: 16px 18px 4px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0 12px 12px 12px;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
position: relative;
}
.wa-modal__bubble::before {
content: '';
position: absolute;
top: 0; left: -8px;
border: 8px solid transparent;
border-right-color: rgba(255, 255, 255, 0.06);
border-top-color: rgba(255, 255, 255, 0.06);
}
/* Formulário */
.wa-modal__form {
padding: 14px 18px 18px;
display: flex;
flex-direction: column;
gap: 11px;
}
.wa-modal__field {
display: flex;
flex-direction: column;
gap: 7px;
}
.wa-modal__field > label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.wa-modal__field input[type="text"],
.wa-modal__field input[type="tel"],
.wa-modal__field input[type="email"] {
width: 100%;
padding: 10px 13px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-family: var(--font-body);
font-size: 14px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.wa-modal__field input[type="text"]::placeholder,
.wa-modal__field input[type="tel"]::placeholder,
.wa-modal__field input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.28);
}
.wa-modal__field input[type="text"]:focus,
.wa-modal__field input[type="tel"]:focus,
.wa-modal__field input[type="email"]:focus {
border-color: #25D366;
box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
}
/* anti-autofill amarelo do Chrome */
.wa-modal__field input:-webkit-autofill,
.wa-modal__field input:-webkit-autofill:hover,
.wa-modal__field input:-webkit-autofill:focus {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset;
caret-color: #fff;
transition: background-color 9999s;
}
/* Opções de assunto */
.wa-modal__radios {
display: flex;
flex-direction: column;
gap: 7px;
}
.wa-modal__radio {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
cursor: pointer;
font-size: 13px;
color: var(--text-secondary);
transition: all 0.15s var(--ease-out);
user-select: none;
}
.wa-modal__radio:hover {
border-color: rgba(37, 211, 102, 0.35);
background: rgba(37, 211, 102, 0.06);
color: #fff;
}
.wa-modal__radio.is-checked {
border-color: #25D366;
background: rgba(37, 211, 102, 0.12);
color: #fff;
}
.wa-modal__radio input[type="radio"] { display: none; }
/* Indicador circular customizado */
.wa-modal__radio::before {
content: '';
flex-shrink: 0;
width: 16px; height: 16px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.15s;
}
.wa-modal__radio.is-checked::before {
border-color: #25D366;
background: #25D366;
box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
}
/* Botão principal */
.wa-modal__submit {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: 13px;
background: #25D366;
color: #fff;
border: none;
border-radius: 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s var(--ease-out);
margin-top: 2px;
}
.wa-modal__submit:hover:not(:disabled) {
background: #1fbd5a;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}
.wa-modal__submit:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* Link "pular" */
.wa-modal__skip {
background: none;
border: none;
color: var(--text-tertiary);
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
text-align: center;
padding: 0;
margin-top: -4px;
transition: color 0.15s;
text-decoration: underline;
text-underline-offset: 3px;
}
.wa-modal__skip:hover { color: var(--text-secondary); }
/* === Mission eyebrow simétrico === */
.mission .eyebrow { align-self: center; }
.mission .eyebrow::after {
content: '';
width: 24px;
height: 1px;
background: var(--neutral);
}
/* === Pillar cover (imagem de capa) === */
.pillar { overflow: hidden; padding-top: 0 !important; }
.pillar__cover {
position: relative;
margin: 0 -40px 28px -40px;
height: 200px;
overflow: hidden;
background: var(--bg-secondary);
}
.pillar__cover img {
width: 100%; height: 100%;
object-fit: cover; display: block;
filter: brightness(0.92) saturate(0.95) contrast(1.02);
transition: filter 0.5s var(--ease-out), transform 0.7s var(--ease-out);
will-change: transform, filter;
}
.pillar:hover .pillar__cover img {
filter: brightness(1.05) saturate(1.05) contrast(1);
transform: scale(1.06);
}
.pillar__cover-fade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,15,28,0.0) 0%, rgba(10,15,28,0.15) 55%, var(--surface) 100%);
pointer-events: none;
}
.pillar__num { position: relative; z-index: 2; display: inline-block; margin-top: 30px; }
@media (max-width: 768px) {
.pillar__cover { margin: 0 -28px 20px -28px; height: 160px; }
}
/* === Video background overrides === */
.video-bg--hero {
opacity: calc(1 - var(--scroll-progress, 0));
will-change: opacity;
}
:root[data-bg-mode="hybrid"] .logo-live { will-change: opacity; }
@media (max-width: 640px) {
.video-bg video { object-position: center center; }
.video-bg__overlay {
background: linear-gradient(180deg,
rgba(10, 15, 28, 0.40) 0%,
rgba(10, 15, 28, 0.55) 50%,
rgba(10, 15, 28, 0.95) 100%);
}
}
/* === Partners (carrossel infinito de clientes) === */
.partners {
padding: 90px 0 80px;
background: var(--bg-primary);
border-top: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.partners__head {
text-align: center;
margin-bottom: 56px;
padding: 0 var(--container-pad);
}
.partners__title {
margin-top: 0;
font-size: clamp(34px, 4.4vw, 60px);
line-height: 1.15;
}
.partners__title em {
color: #5BA0F5;
font-style: italic;
font-weight: 400;
text-shadow: 0 0 24px rgba(91, 160, 245, 0.18);
}
.partners__viewport {
position: relative;
overflow: hidden;
cursor: grab;
touch-action: pan-y;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.partners__viewport:active { cursor: grabbing; }
.partners__track {
display: flex;
align-items: center;
gap: 110px;
width: max-content;
user-select: none;
-webkit-user-select: none;
will-change: transform;
}
.partners__logo {
height: 80px;
width: auto;
max-width: 240px;
object-fit: contain;
background: rgba(255, 255, 255, 0.96);
padding: 14px 20px;
border-radius: 12px;
filter: none;
opacity: 1;
transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.partners__logo:hover {
background: #fff;
transform: scale(1.06);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(91, 160, 245, 0.25);
}
@media (max-width: 640px) {
.partners { padding: 60px 0; }
.partners__head { margin-bottom: 40px; }
.partners__title { font-size: 32px; }
.partners__track { gap: 70px; }
/* Mobile: logos em cor original (sem hover disponivel) + maiores */
.partners__logo {
height: 64px;
max-width: 200px;
filter: none;
opacity: 1;
}
}
/* === Partners: normalização visual por logo (categorizado por proporção) === */
/* Escudos quadrados — height maior, max-width menor para peso visual igual */
.partners__logo[src*="atletico"],
.partners__logo[src*="botafogo"],
.partners__logo[src*="cruzeiro"],
.partners__logo[src*="brasao-op"] {
height: 100px;
max-width: 110px;
}
/* Logos horizontais largas (texto+ícone) — height menor, width maior */
.partners__logo[src*="araujo"],
.partners__logo[src*="villefort"],
.partners__logo[src*="btg"],
.partners__logo[src*="campo-belo"],
.partners__logo[src*="hsr"],
.partners__logo[src*="health"],
.partners__logo[src*="droga-clara"] {
height: 68px;
max-width: 230px;
}
/* Marcas pequenas/compactas — boost de tamanho para equilibrar */
.partners__logo[src*="itau"],
.partners__logo[src*="ignite"],
.partners__logo[src*="fvg"] {
height: 92px;
max-width: 140px;
}
/* Logos com padding interno grande (script/decorativo) — encolhe container */
.partners__logo[src*="itts-sero"] {
height: 64px;
max-width: 170px;
}
/* Logos chunky (BH, M4) — moderado */
.partners__logo[src*="bh.png"],
.partners__logo[src*="/m4"] {
height: 84px;
max-width: 130px;
}
/* Imagens genéricas (img1, img3, prazeres) — manter default mas leve ajuste */
.partners__logo[src*="img1"],
.partners__logo[src*="img3"],
.partners__logo[src*="prazeres"] {
height: 80px;
max-width: 150px;
}
/* === Mobile: aplicar mesma normalização proporcional === */
@media (max-width: 640px) {
.partners__logo[src*="atletico"],
.partners__logo[src*="botafogo"],
.partners__logo[src*="cruzeiro"],
.partners__logo[src*="brasao-op"] {
height: 80px;
max-width: 90px;
}
.partners__logo[src*="araujo"],
.partners__logo[src*="villefort"],
.partners__logo[src*="btg"],
.partners__logo[src*="campo-belo"],
.partners__logo[src*="hsr"],
.partners__logo[src*="health"],
.partners__logo[src*="droga-clara"] {
height: 54px;
max-width: 190px;
}
.partners__logo[src*="itau"],
.partners__logo[src*="ignite"],
.partners__logo[src*="fvg"] {
height: 74px;
max-width: 115px;
}
.partners__logo[src*="itts-sero"] {
height: 50px;
max-width: 140px;
}
}
/* === Logos com texto escuro: fundo branco em pill para legibilidade === */
.partners__logo[src*="itau"],
.partners__logo[src*="araujo"],
.partners__logo[src*="villefort"],
.partners__logo[src*="hsr"],
.partners__logo[src*="droga-clara"],
.partners__logo[src*="btg"],
.partners__logo[src*="health"],
.partners__logo[src*="campo-belo"],
.partners__logo[src*="prazeres"] {
background: rgba(255, 255, 255, 0.96);
padding: 14px 18px;
border-radius: 10px;
filter: none !important;
opacity: 1 !important;
box-sizing: border-box;
}
.partners__logo[src*="itau"]:hover,
.partners__logo[src*="araujo"]:hover,
.partners__logo[src*="villefort"]:hover,
.partners__logo[src*="hsr"]:hover,
.partners__logo[src*="droga-clara"]:hover,
.partners__logo[src*="btg"]:hover,
.partners__logo[src*="health"]:hover,
.partners__logo[src*="campo-belo"]:hover,
.partners__logo[src*="prazeres"]:hover {
background: #fff;
transform: scale(1.05);
}
/* === Mobile: mesmo tratamento === */
@media (max-width: 640px) {
.partners__logo[src*="itau"],
.partners__logo[src*="araujo"],
.partners__logo[src*="villefort"],
.partners__logo[src*="hsr"],
.partners__logo[src*="droga-clara"],
.partners__logo[src*="btg"],
.partners__logo[src*="health"],
.partners__logo[src*="campo-belo"],
.partners__logo[src*="prazeres"] {
padding: 10px 14px;
border-radius: 8px;
}
}
/* === Blog cover dinâmico (imagem real ou gradient temático por categoria) === */
.post__cover--img {
position: relative;
overflow: hidden;
background-color: var(--bg-secondary);
}
.post__cover--img .post__overlay {
background: linear-gradient(180deg,
rgba(10, 15, 28, 0.0) 0%,
rgba(10, 15, 28, 0.35) 60%,
rgba(10, 15, 28, 0.78) 100%);
}
.post:hover .post__cover--img {
filter: brightness(1.08);
transition: filter 0.4s ease;
}
/* === Cursor signature: radar verde (substitui mancha azul) === */
.cursor-blue {
position: fixed !important;
top: 0;
left: 0;
width: 56px;
height: 56px;
background: transparent !important;
border: 1.5px solid rgba(245, 200, 110, 0.50);
border-radius: 50%;
pointer-events: none;
z-index: 999;
opacity: 0;
filter: drop-shadow(0 0 10px rgba(245, 200, 110, 0.55));
transition: opacity 0.25s ease;
}
.cursor-blue.active { opacity: 1; }
.cursor-blue::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
width: 10px;
height: 10px;
background: #F5C86E;
border-radius: 50%;
box-shadow:
0 0 10px #F5C86E,
0 0 24px rgba(245, 200, 110, 0.75),
0 0 40px rgba(245, 200, 110, 0.35);
margin-left: -5px;
}
/* halo principal: ajustar para combinar com tom verde */
.cursor-glow {
background: radial-gradient(circle,
rgba(245, 200, 110, 0.12) 0%,
rgba(245, 200, 110, 0.05) 35%,
transparent 60%) !important;
}
/* Footer Instagram link */
.footer__ig {
color: var(--text-secondary);
text-decoration: none;
border-bottom: 1px dotted rgba(245, 200, 110, 0.5);
transition: color 0.2s, border-color 0.2s;
}
.footer__ig:hover {
color: #F5C86E;
border-bottom-color: #F5C86E;
}
/* === Cursor: dot exato no ponteiro + ring lerp suave === */
.cursor-glow {
width: 10px !important;
height: 10px !important;
background: #F5C86E !important;
border-radius: 50% !important;
box-shadow:
0 0 10px #F5C86E,
0 0 24px rgba(245, 200, 110, 0.75),
0 0 40px rgba(245, 200, 110, 0.35) !important;
pointer-events: none;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
}
/* Esconder o dot antigo no topo do ring (agora a bolinha é o cursor-glow) */
.cursor-blue::before {
display: none;
}
/* === Cursor dot: forçar visibilidade e remover blend que mistura com fundo === */
.cursor-glow {
mix-blend-mode: normal !important;
background: #F5C86E !important;
background-image: none !important;
width: 12px !important;
height: 12px !important;
opacity: 1 !important;
border-radius: 50% !important;
box-shadow:
0 0 8px #F5C86E,
0 0 18px rgba(245, 200, 110, 0.85),
0 0 32px rgba(245, 200, 110, 0.45) !important;
pointer-events: none !important;
z-index: 1001 !important;
filter: none !important;
}
/* === Cursor dot: maior e mais visivel === */
.cursor-glow {
width: 16px !important;
height: 16px !important;
background: #F5C86E !important;
background-image: none !important;
border-radius: 50% !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
box-shadow:
0 0 6px #F5C86E,
0 0 14px rgba(245, 200, 110, 0.95),
0 0 28px rgba(245, 200, 110, 0.55),
0 0 48px rgba(245, 200, 110, 0.30) !important;
pointer-events: none !important;
z-index: 1001 !important;
filter: none !important;
}
/* === Cursor: forcar display block (ignora @media hover:none) === */
.cursor-glow,
.cursor-blue {
display: block !important;
}
@media (hover: none), (pointer: coarse) {
.cursor-glow,
.cursor-blue {
display: block !important;
}
}
/* === Cursor: tamanho final menor + responsivo === */
.cursor-glow {
width: 11px !important;
height: 11px !important;
background: #F5C86E !important;
background-image: none !important;
border-radius: 50% !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
box-shadow:
0 0 5px #F5C86E,
0 0 11px rgba(245, 200, 110, 0.95),
0 0 22px rgba(245, 200, 110, 0.55),
0 0 38px rgba(245, 200, 110, 0.30) !important;
pointer-events: none !important;
z-index: 1001 !important;
filter: none !important;
display: block !important;
}
.cursor-blue {
display: block !important;
}
/* Touch devices reais: esconder cursor decorativo (não há ponteiro pra seguir) */
@media (pointer: coarse) {
.cursor-glow,
.cursor-blue {
display: none !important;
}
}
/* Mobile/tablets pequenos: cursor menor (caso seja desktop com tela pequena) */
@media (max-width: 640px) {
.cursor-glow {
width: 9px !important;
height: 9px !important;
}
.cursor-blue {
width: 44px;
height: 44px;
}
}
/* === Mobile geral: ajustes finos de responsividade === */
@media (max-width: 640px) {
/* Hero badges removidas, mantém clean */
.hero__lede { font-size: 16px; line-height: 1.55; }
.hero__ctas { flex-direction: column; gap: 12px; }
.hero__ctas .btn { width: 100%; max-width: 320px; }
/* Founder card: aspect square no mobile pra foto não esticar */
.founder__photo { max-width: 100%; }
.founder__photo img { aspect-ratio: 4/5; object-fit: cover; }
.founder__quote p { font-size: 17px; line-height: 1.5; }
/* Pillar cover ajustado */
.pillar { padding: 0 28px 32px; }
.pillar__cover { margin: 0 -28px 24px -28px; }
/* CTA Final: botão full-width */
.cta-final__buttons { flex-direction: column; align-items: stretch; padding: 0 16px; }
.cta-final__buttons .btn { width: 100%; }
.cta-final__title { font-size: clamp(28px, 8vw, 38px); }
.cta-final__sub { font-size: 16px; }
/* Footer: colunas empilham (já era flex/grid, só garantir gap) */
.footer__top { gap: 36px; }
.footer__bottom { flex-direction: column; gap: 20px; align-items: flex-start; }
.credentials { flex-wrap: wrap; gap: 12px 18px; }
}
/* === Video Hero (V2/V4): contido no hero, scrolla naturalmente === */
.video-bg.video-bg--hero {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: 100vh !important;
height: 100dvh !important;
opacity: 1 !important;
/* Sem fade controlado por scroll-progress — sai junto com o hero ao rolar */
}
.video-bg.video-bg--hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.video-bg.video-bg--hero .video-bg__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(10, 15, 28, 0.20) 0%,
rgba(10, 15, 28, 0.35) 40%,
rgba(10, 15, 28, 0.70) 80%,
rgba(10, 15, 28, 0.92) 100%
),
radial-gradient(
ellipse at 50% 40%,
rgba(10, 15, 28, 0.0) 0%,
rgba(10, 15, 28, 0.25) 80%
);
pointer-events: none;
}
/* V4 (hybrid): logo aparece mais rápido para coincidir com saída do vídeo */
:root[data-bg-mode="hybrid"] .logo-live {
transition: opacity 0.4s ease;
}
/* Mobile: garantir que video hero também responde */
@media (max-width: 640px) {
.video-bg.video-bg--hero {
height: 100vh !important;
height: 100dvh !important;
}
}
/* === V4 hybrid L: opacity & transform escritos pelo JS diretamente em --logo-t.
--logo-t é um número 0..1 já com threshold 0.35 aplicado. Sem transition
(reduced-motion bug + transition + calc nested = computed stuck at 1). === */
:root[data-bg-mode="hybrid"] .logo-live {
opacity: calc(var(--logo-t, 0) * 0.95) !important;
transform: scale(calc(0.55 + var(--logo-t, 0) * 0.45)) !important;
transition: none !important;
will-change: opacity, transform;
}
/* === V4 hybrid L: zonas dinamicas (right/left/hidden) baseadas na sessao em foco.
IIFE em bundle.js seta html[data-logo-zone="..."]. Transicao suave entre zonas. */
:root[data-bg-mode="hybrid"] .logo-live {
transition: top 0.6s ease, left 0.7s cubic-bezier(.22,1,.36,1), right 0.7s cubic-bezier(.22,1,.36,1), opacity 0.5s ease !important;
}
:root[data-bg-mode="hybrid"][data-logo-zone="right"] .logo-live,
:root[data-bg-mode="hybrid"]:not([data-logo-zone]) .logo-live {
right: 0 !important;
left: auto !important;
}
:root[data-bg-mode="hybrid"][data-logo-zone="left"] .logo-live {
left: 0 !important;
right: auto !important;
}
:root[data-bg-mode="hybrid"][data-logo-zone="hidden"] .logo-live {
opacity: 0 !important;
}
/* === V4 hybrid L: variantes de tamanho (left-sm e left-md).
sm = bem pequeno (partners, nao sobrepoe logos).
md = pouco menor (cta-final, presenca discreta).
Sobrescreve o transform: scale() que vinha do --logo-t. */
:root[data-bg-mode="hybrid"][data-logo-zone="left-sm"] .logo-live {
left: 2vw !important;
right: auto !important;
transform: scale(calc(0.30 + var(--logo-t, 0) * 0.20)) !important;
/* opacidade fica menor pra nao competir com logos parceiras */
opacity: calc(var(--logo-t, 0) * 0.65) !important;
}
:root[data-bg-mode="hybrid"][data-logo-zone="left-md"] .logo-live {
left: 2vw !important;
right: auto !important;
transform: scale(calc(0.42 + var(--logo-t, 0) * 0.28)) !important;
opacity: calc(var(--logo-t, 0) * 0.85) !important;
}
/* === V4 hybrid L — REFATOR (p54): left-only, fade-then-snap, static-tl. ===
Substitui todas as regras anteriores [data-bg-mode="hybrid"] .logo-live por
cascade-order (este block esta no fim). === */
:root[data-bg-mode="hybrid"] .logo-live {
position: fixed !important;
top: 80px !important;
bottom: auto !important;
right: auto !important;
left: 0 !important;
width: 580px !important;
max-width: 50vw !important;
height: 70vh !important;
pointer-events: none !important;
opacity: calc(var(--logo-t, 0) * 0.95) !important;
transform: scale(calc(0.55 + var(--logo-t, 0) * 0.45)) !important;
transform-origin: top left !important;
/* stagger: opacity fade primeiro, posicao snap em 0.22s (mid-fade invisivel) */
transition:
opacity 0.5s ease,
top 0s linear 0.22s,
left 0s linear 0.22s,
width 0s linear 0.22s,
height 0s linear 0.22s,
transform 0.4s ease !important;
will-change: opacity, transform;
}
/* Zona hidden: invisivel (Hero, Blog, Footer) */
:root[data-bg-mode="hybrid"][data-logo-zone="hidden"] .logo-live {
opacity: 0 !important;
}
/* Zona left: default ja eh isso, nada a fazer */
/* Static top-left small (Partners) */
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-sm"] .logo-live {
top: 110px !important;
left: 16px !important;
width: 220px !important;
height: 220px !important;
opacity: 0.65 !important;
transform: scale(0.45) !important;
}
/* Static top-left medium (CTA Final) */
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-md"] .logo-live {
top: 110px !important;
left: 16px !important;
width: 280px !important;
height: 280px !important;
opacity: 0.85 !important;
transform: scale(0.6) !important;
}
/* === V4 hybrid L: constringe a ![]()
interna em zonas estaticas pra nao transbordar.
Sem isto a img (clamp 360-720px) extrapola um wrapper de 220-280px e clipa pra fora. === */
:root[data-bg-mode="hybrid"][data-logo-zone^="static-"] .logo-live img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* === V4 hybrid L — REFATOR ESTABILIZACAO (p58): wrapper FIXO 280x280,
so opacity + transform: scale transicionam entre zonas.
Sem mais snap de width/height — elimina o bug "fica grande e fica pequeno". === */
:root[data-bg-mode="hybrid"] .logo-live {
position: fixed !important;
top: 110px !important;
left: 16px !important;
right: auto !important;
bottom: auto !important;
width: 280px !important;
max-width: 280px !important;
height: 280px !important;
pointer-events: none !important;
opacity: 0 !important;
transform: scale(0.5) !important;
transform-origin: top left !important;
transition: opacity 0.55s ease, transform 0.5s ease !important;
will-change: opacity, transform;
}
:root[data-bg-mode="hybrid"][data-logo-zone="hidden"] .logo-live {
opacity: 0 !important;
}
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-sm"] .logo-live {
opacity: 0.6 !important;
transform: scale(0.4) !important;
}
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-md"] .logo-live {
opacity: 0.85 !important;
transform: scale(0.55) !important;
}
/* Img interna sempre fit no wrapper (evita transbordar/clipar) */
:root[data-bg-mode="hybrid"] .logo-live img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* z-index acima de sections (que tendem a criar stacking contexts) mas
abaixo de nav (100+) e WhatsApp button (1000+). 50 e seguro. */
:root[data-bg-mode="hybrid"] .logo-live {
z-index: 50 !important;
}
/* === V4 hybrid L — adiciona zona "static-tl-lg" pra History (versao grande).
Wrapper aumentado para 600x600 (acomoda lg sem precisar mudar wrapper size).
sm/md continuam visuais identicos pq scale ajustado. === */
:root[data-bg-mode="hybrid"] .logo-live {
width: 600px !important;
max-width: 600px !important;
height: 600px !important;
}
/* Recomputa scale pra manter tamanho visual identico ao p58:
p58 wrapper era 280, scale sm=0.4 -> 112px, md=0.55 -> 154px
p59 wrapper e 600, scale ajustado: */
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-sm"] .logo-live {
opacity: 0.6 !important;
transform: scale(0.187) !important; /* 600 * 0.187 = 112px (igual antes) */
}
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-md"] .logo-live {
opacity: 0.85 !important;
transform: scale(0.257) !important; /* 600 * 0.257 = 154px (igual antes) */
}
/* Nova zona: grande, para History */
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-lg"] .logo-live {
opacity: 0.92 !important;
transform: scale(0.85) !important; /* 600 * 0.85 = 510px (grande, como era) */
}
/* === V4 hybrid L: zonas novas — behind-lg (History, atmosferico) e cta-lg (CTA Final, maior). ===
behind-lg: L grande mas com opacity baixa (0.35) — comporta-se como "fundo"
sem dominar o texto. O brilho real aparece quando o L nao esta sobre texto.
cta-lg: L bem grande (scale 1.0 = 600px) ocupando todo lado esquerdo, opacidade alta. */
:root[data-bg-mode="hybrid"][data-logo-zone="behind-lg"] .logo-live {
opacity: 0.35 !important;
transform: scale(0.85) !important; /* 600 * 0.85 = 510px (grande, mas atmosferico) */
}
:root[data-bg-mode="hybrid"][data-logo-zone="cta-lg"] .logo-live {
opacity: 0.85 !important;
transform: scale(1.0) !important; /* 600 * 1.0 = 600px (maximo, ocupa esquerda) */
}
/* === V4 hybrid L — opacity dinamica em History (controlada por JS via --logo-history-opacity) === */
:root[data-bg-mode="hybrid"][data-logo-zone="behind-lg"] .logo-live {
opacity: var(--logo-history-opacity, 0.35) !important;
transform: scale(0.85) !important;
transition: opacity 0.35s ease, transform 0.5s ease !important;
}
/* === CTA Final L flat: garante que mesmo o img interno fica sem transform === */
/* p134: removido "transform: none !important" — bloqueava o JS de aplicar
rotateX/rotateY/translate na logo do CTA. Agora o JS controla tudo. */
:root[data-bg-mode="hybrid"][data-logo-zone="cta-lg"] .logo-live img {
/* sem override de transform - JS dirige */
}
/* === Titulos H2 (section-title, cta-final__title) com mesma escala do hero "Voce chegou no lugar certo" === */
.section-title,
.cta-final__title {
font-family: var(--font-display);
font-size: clamp(44px, 6vw, 80px) !important;
line-height: 1.0 !important;
letter-spacing: -0.025em;
font-weight: 400;
text-wrap: balance;
}
/* Em viewport pequeno mantem responsivo */
@media (max-width: 768px) {
.section-title,
.cta-final__title {
font-size: clamp(36px, 9vw, 52px) !important;
line-height: 1.05 !important;
}
}
/* === Footer: fundo preto atras da logo Legalize pra nao sumir no fundo azul === */
.footer__brand .nav__logo {
display: inline-block;
background: #0A0F1C;
padding: 10px 16px;
border-radius: 10px;
margin-bottom: 12px;
}
.nav__logo-img--footer {
display: block;
}
/* === Footer logo: corrige qualidade ruim e proporcao ===
Origem PNG tem 3508x2480 (quase quadrado, ratio 1.41:1) com whitespace acima/abaixo
do logo horizontal. Usamos object-fit:cover pra cropar o whitespace e height generoso
pra evitar downscale excessivo (que borrava as letras). */
.footer__brand .nav__logo {
display: inline-block;
background: #0A0F1C;
padding: 14px 22px;
border-radius: 12px;
margin-bottom: 16px;
line-height: 0; /* remove gap inline-block */
border: 1px solid rgba(255,255,255,0.06);
}
.footer__brand .nav__logo-img,
.nav__logo-img--footer {
display: block !important;
width: 200px !important;
height: 56px !important;
max-width: 200px !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
filter: none !important;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@media (max-width: 768px) {
.footer__brand .nav__logo-img,
.nav__logo-img--footer {
width: 160px !important;
height: 45px !important;
}
}
/* === CTA Final L animation: respira (translate Y + scale pulse) sem rotacao 3D.
JS limpa o transform inline para essa zona — CSS animation toma conta. === */
@keyframes ctaL-breathe {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.02) translateY(-6px); }
}
@keyframes ctaL-shine {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(252, 220, 140, 0.85))
drop-shadow(0 0 10px rgba(245, 200, 110, 0.60))
drop-shadow(0 0 22px rgba(210, 160, 80, 0.40))
drop-shadow(0 0 38px rgba(170, 120, 50, 0.20))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
50% {
filter:
drop-shadow(0 0 6px rgba(255, 230, 160, 1))
drop-shadow(0 0 16px rgba(252, 215, 130, 0.85))
drop-shadow(0 0 32px rgba(220, 170, 90, 0.55))
drop-shadow(0 0 52px rgba(180, 130, 50, 0.32))
drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
}
/* p134: removido transform/animation que conflitam com o JS.
JS aplica translate+rotate baseado em mouse, ctaL-shine continua via regra abaixo. */
:root[data-bg-mode="hybrid"][data-logo-zone="cta-lg"] .logo-live img {
/* JS controla transform; ctaL-shine animado em regra abaixo */
}
/* === Ajustes pos-feedback (p68) === */
/* 1. CTA Final: L menor (scale 0.75 ao inves de 1.0) */
:root[data-bg-mode="hybrid"][data-logo-zone="cta-lg"] .logo-live {
transform: scale(0.75) !important; /* 600 * 0.75 = 450px (era 600) */
}
/* 4. History: L centralizado verticalmente na esquerda (nao no canto) */
:root[data-bg-mode="hybrid"][data-logo-zone="behind-lg"] .logo-live {
top: 50% !important;
left: 4vw !important;
transform: translateY(-50%) scale(0.85) !important;
transform-origin: left center !important;
}
/* 3. Instagram link no footer com display flex pra alinhar icone + texto */
.footer__ig {
display: inline-flex;
align-items: center;
text-decoration: none;
color: rgba(255,255,255,0.92);
transition: color 0.2s ease;
}
.footer__ig:hover { color: #FFF; }
.footer__ig svg { flex-shrink: 0; }
/* === p69: ajustes pos-feedback === */
/* 1. Remove a linha pontilhada dourada que persistia no .footer__ig (regra antiga) */
.footer__ig,
.footer__ig:hover,
.footer__ig:focus {
border-bottom: none !important;
text-decoration: none !important;
}
/* 2. cta-lg: cancela a animation CSS que estava controlando transform —
JS volta a controlar para integrar mouse parallax + breath.
logo-shine (filter) continua ativo. */
:root[data-bg-mode="hybrid"][data-logo-zone="cta-lg"] .logo-live img {
animation: ctaL-shine 5.5s ease-in-out infinite !important;
/* sem ctaL-breathe — JS agora cuida do transform com breath + mouse */
}
/* === p70: substitui o "vibrate" do botao WhatsApp e o "blink" da bolinha
por um pulso suave estilo radar/ping — cor constante, halo expande. === */
/* Halo do botao WhatsApp */
@keyframes wa-pulse-ring {
0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.45); }
100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 18px rgba(37, 211, 102, 0); }
}
/* Halo da bolinha verde (Jessica online) */
@keyframes wa-pulse-dot {
0% { box-shadow: 0 0 6px #7FE89A, 0 0 0 0 rgba(127, 232, 154, 0.7); }
100% { box-shadow: 0 0 6px #7FE89A, 0 0 0 8px rgba(127, 232, 154, 0); }
}
/* Sobrescreve a animacao do botao (era wa-pulse 3s = brilho oscila) */
.wa-fab {
animation: wa-pulse-ring 2.4s ease-out infinite !important;
}
/* Sobrescreve a animacao da bolinha (era wa-blink = opacity flicker) */
.wa-modal__dot {
opacity: 1 !important;
animation: wa-pulse-dot 1.8s ease-out infinite !important;
}
/* === Letreiro (marquee band): "Há mais de 22 anos" + serviços — após History === */
.marquee-band {
padding: 36px 0;
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.marquee-band__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
overflow: hidden;
}
.marquee-band__track {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: marquee-scroll 38s linear infinite;
font-family: var(--font-display);
will-change: transform;
}
.marquee-band:hover .marquee-band__track {
animation-play-state: paused;
}
.marquee-band__item {
font-size: clamp(22px, 2.4vw, 38px);
font-weight: 400;
color: rgba(255, 255, 255, 0.62);
letter-spacing: -0.018em;
white-space: nowrap;
transition: color 0.2s ease;
cursor: default;
}
.marquee-band:hover .marquee-band__item {
color: rgba(255, 255, 255, 0.85);
}
.marquee-band__item--accent {
color: var(--accent, #5BA0F5);
font-style: italic;
font-weight: 300;
text-shadow: 0 0 24px rgba(91, 160, 245, 0.20);
}
.marquee-band:hover .marquee-band__item--accent {
color: var(--accent, #5BA0F5);
}
.marquee-band__sep {
color: rgba(245, 200, 110, 0.45);
font-size: clamp(18px, 2vw, 32px);
font-weight: 300;
user-select: none;
}
@keyframes marquee-scroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-band__track { animation: none; }
}
@media (max-width: 640px) {
.marquee-band { padding: 24px 0; }
.marquee-band__track { gap: 36px; }
}
/* === Marquee REDESIGN (p72): minimalista, mono uppercase, anima sempre === */
.marquee-band {
padding: 14px 0 !important; /* era 36px — fina */
border-top: 1px solid rgba(255,255,255,0.04) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
background: var(--bg-primary) !important;
}
.marquee-band__track {
gap: 40px !important; /* era 56px */
/* anima sempre — ignora prefers-reduced-motion pra letreiro decorativo */
animation: marquee-scroll 28s linear infinite !important;
font-family: var(--font-mono) !important;
}
.marquee-band__item {
font-size: 12px !important; /* era clamp(22, 38px) */
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.40) !important;
text-shadow: none !important;
}
.marquee-band__item--accent {
color: var(--accent, #5BA0F5) !important;
font-style: normal !important; /* sem italic em mono */
font-weight: 600 !important;
text-shadow: none !important;
}
.marquee-band__sep {
font-size: 10px !important; /* dot menor */
color: rgba(245, 200, 110, 0.30) !important;
letter-spacing: 0 !important;
}
.marquee-band:hover .marquee-band__item {
color: rgba(255, 255, 255, 0.65) !important;
}
/* Force animation mesmo com reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.marquee-band__track {
animation: marquee-scroll 28s linear infinite !important;
}
}
/* === AI Concierge Chat UI === */
.wa-chat {
flex: 1;
overflow-y: auto;
padding: 14px 20px 8px;
min-height: 280px;
max-height: 50vh;
display: flex;
flex-direction: column;
gap: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.wa-chat::-webkit-scrollbar { width: 6px; }
.wa-chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.wa-chat__msg {
max-width: 82%;
padding: 10px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
animation: wa-msg-in 0.25s ease-out;
}
@keyframes wa-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.wa-chat__msg--assistant {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.92);
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.wa-chat__msg--user {
background: linear-gradient(135deg, #1f7a3a 0%, #25D366 100%);
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.wa-chat__typing {
display: inline-flex !important;
gap: 4px;
padding: 14px 16px !important;
align-items: center;
}
.wa-chat__typing span {
width: 6px; height: 6px;
background: rgba(255,255,255,0.5);
border-radius: 50%;
animation: wa-typing 1.2s ease-in-out infinite;
}
.wa-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.wa-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wa-typing {
0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.wa-chat__input-row {
display: flex;
gap: 8px;
padding: 12px 16px 16px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-direction: column;
}
.wa-chat__input-row form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Input + send pareados (sem o form) */
.wa-chat__input-row:not(:has(form)) {
flex-direction: row;
align-items: center;
}
.wa-chat__input {
flex: 1;
padding: 11px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 22px;
color: #fff;
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.wa-chat__input:focus {
border-color: rgba(37,211,102,0.55);
background: rgba(255,255,255,0.09);
}
.wa-chat__input:disabled {
opacity: 0.5;
cursor: wait;
}
.wa-chat__send {
width: 42px; height: 42px;
flex-shrink: 0;
background: #25D366;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s, background 0.15s;
}
.wa-chat__send:hover { transform: scale(1.05); background: #20bf5b; }
.wa-chat__send:disabled { opacity: 0.5; cursor: wait; transform: none; }
.wa-chat__send svg { transform: translateX(-1px); }
/* Handoff form (aparece depois do chat) */
.wa-chat__handoff {
display: flex;
flex-direction: column;
gap: 12px;
}
.wa-chat__consent {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: rgba(255,255,255,0.7);
line-height: 1.45;
cursor: pointer;
user-select: none;
}
.wa-chat__consent input[type="checkbox"] {
width: 16px; height: 16px;
margin-top: 2px;
flex-shrink: 0;
accent-color: #25D366;
cursor: pointer;
}
.wa-chat__consent a {
color: rgba(91,160,245,0.95);
text-decoration: underline;
text-decoration-color: rgba(91,160,245,0.4);
}
/* === LGPD Banner === */
.lgpd-banner {
position: fixed;
bottom: 16px;
left: 16px;
max-width: 380px;
width: calc(100vw - 32px);
background: rgba(10, 15, 28, 0.96);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 16px 18px;
z-index: 9999;
box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.22,1,.36,1);
font-family: var(--font-body, system-ui);
}
.lgpd-banner.is-visible {
opacity: 1;
transform: translateY(0);
}
.lgpd-banner__title {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.95);
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.lgpd-banner__txt {
font-size: 12.5px;
color: rgba(255,255,255,0.72);
line-height: 1.5;
margin: 0 0 12px 0;
}
.lgpd-banner__txt a {
color: rgba(91,160,245,0.95);
text-decoration: underline;
text-decoration-color: rgba(91,160,245,0.4);
}
.lgpd-banner__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lgpd-banner__btn {
padding: 8px 14px;
border-radius: 8px;
border: none;
font-size: 12.5px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.lgpd-banner__btn--primary {
background: #25D366;
color: #fff;
}
.lgpd-banner__btn--primary:hover { background: #20bf5b; }
.lgpd-banner__btn--ghost {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.10);
}
.lgpd-banner__btn--ghost:hover { background: rgba(255,255,255,0.10); }
@media (max-width: 480px) {
.lgpd-banner {
left: 8px; right: 8px;
bottom: 8px;
max-width: none;
width: calc(100vw - 16px);
}
}
/* === Garantir layout flex no modal quando contém chat === */
.wa-modal:has(.wa-chat) {
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
}
.wa-modal:has(.wa-chat) .wa-modal__header { flex-shrink: 0; }
.wa-modal:has(.wa-chat) .wa-chat { flex: 1; min-height: 200px; }
.wa-modal:has(.wa-chat) .wa-chat__input-row { flex-shrink: 0; }
/* === Typing indicator REDESIGN: wave fluida (sem flicker de opacity) === */
.wa-chat__typing span {
width: 7px !important;
height: 7px !important;
background: rgba(255, 255, 255, 0.85) !important;
border-radius: 50%;
display: inline-block;
animation: wa-typing-fluid 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
transform-origin: center;
will-change: transform, opacity;
}
.wa-chat__typing span:nth-child(1) { animation-delay: 0s !important; }
.wa-chat__typing span:nth-child(2) { animation-delay: 0.18s !important; }
.wa-chat__typing span:nth-child(3) { animation-delay: 0.36s !important; }
@keyframes wa-typing-fluid {
0%, 60%, 100% {
transform: translateY(0) scale(0.85);
opacity: 0.55;
}
30% {
transform: translateY(-5px) scale(1);
opacity: 1;
}
}
/* Garante que a animacao funciona mesmo com prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.wa-chat__typing span {
animation: wa-typing-fluid 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
}
/* Intro pequeno antes do form de handoff */
.wa-chat__handoff-intro {
font-size: 13px;
color: rgba(255,255,255,0.65);
line-height: 1.45;
padding: 2px 2px 6px;
}
/* === Stats (p81): 6 colunas auto-fit, fonte hero pra labels === */
.stats__inner {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 36px 0 !important;
}
.stat-number {
font-family: var(--font-display) !important;
font-size: clamp(40px, 4.5vw, 64px) !important; /* mantém Fraunces, tamanho atual */
}
.stat-label {
font-family: var(--font-display) !important; /* era Geist sans, agora Fraunces como o hero */
font-size: clamp(13px, 1.05vw, 16px) !important;
color: rgba(255, 255, 255, 0.65) !important;
letter-spacing: -0.005em !important;
font-weight: 300;
margin-top: 14px !important;
max-width: 220px !important;
line-height: 1.4 !important;
}
/* Quando usa "raw" (ex: ISO 9001, Top 5, R$ 1 BI), aumenta um pouco */
.stat-number > span:not(.accent) {
font-size: 0.85em !important;
}
@media (max-width: 768px) {
.stats__inner {
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px 16px !important;
}
.stat-label { font-size: 12px !important; max-width: none !important; }
}
/* === Stats REDESIGN (p84): 3x2 grid, nowrap, valores menores e proporcionais === */
.stats__inner {
grid-template-columns: repeat(3, 1fr) !important;
gap: 48px 0 !important;
}
.stat {
padding: 0 28px !important;
border-left: 1px solid var(--border);
}
/* Remove a borda esquerda no inicio de cada linha (1o, 4o item = colunas 1 e 4) */
.stats__inner .stat:nth-child(3n+1) {
border-left: none !important;
padding-left: 0 !important;
}
.stat-number {
font-size: clamp(36px, 3.6vw, 56px) !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: baseline !important;
}
/* Texto raw (R$ 1 BI, ISO 9001, Top 5) menor */
.stat-number > span:not(.accent) {
font-size: 0.72em !important;
white-space: nowrap !important;
}
/* Sufixo k+ / + fica menor */
.stat-number .accent {
font-size: 0.55em !important;
margin-left: 0.08em !important;
}
.stat-label {
font-size: clamp(12px, 0.95vw, 14px) !important;
margin-top: 12px !important;
max-width: 280px !important;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.62) !important;
}
@media (max-width: 900px) {
.stats__inner {
grid-template-columns: repeat(2, 1fr) !important;
gap: 36px 24px !important;
}
.stats__inner .stat:nth-child(3n+1) {
border-left: 1px solid var(--border) !important;
padding-left: 16px !important;
}
.stats__inner .stat:nth-child(2n+1) {
border-left: none !important;
padding-left: 0 !important;
}
.stat-number { font-size: clamp(30px, 6vw, 44px) !important; }
}
@media (max-width: 520px) {
.stats__inner {
grid-template-columns: 1fr !important;
gap: 28px 0 !important;
}
.stats__inner .stat {
border-left: none !important;
padding-left: 0 !important;
border-top: 1px solid var(--border);
padding-top: 24px;
}
.stats__inner .stat:first-child {
border-top: none;
padding-top: 0;
}
}
/* === Partners logos MAIORES (p87): card maior + menos padding pra logo encher mais === */
.partners__logo {
height: 110px !important; /* era 80px */
max-width: 220px !important; /* era 240 */
padding: 12px 18px !important; /* era 14px 20px */
object-fit: contain !important;
}
.partners__track {
gap: 80px !important; /* era 110px — fecha um pouco o espaco */
}
@media (max-width: 768px) {
.partners__logo {
height: 88px !important;
max-width: 180px !important;
padding: 10px 14px !important;
}
.partners__track { gap: 56px !important; }
}
/* ============================================================
SPEC v4 — Paridade Mobile + Hardening (p88)
============================================================ */
/* === §4.1 Hamburger button (≤1080px) === */
.nav__hamburger {
display: none;
width: 44px; height: 44px;
background: transparent;
border: 1px solid var(--border-strong, rgba(255,255,255,0.12));
border-radius: 10px;
cursor: pointer;
padding: 0;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
margin-left: 12px;
}
.nav__hamburger span {
display: block;
width: 18px; height: 1.5px;
background: var(--text-primary, #fff);
border-radius: 999px;
transition: transform 0.2s var(--ease-out, ease);
}
@media (max-width: 1080px) {
.nav__hamburger { display: inline-flex !important; }
.nav .nav__cta { display: none !important; }
}
/* === §4.1 Mobile menu panel === */
.mnav {
position: fixed;
inset: 0;
z-index: 350;
pointer-events: none;
}
.mnav.mnav--open { pointer-events: auto; }
.mnav__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.25s ease;
}
.mnav.mnav--open .mnav__backdrop { opacity: 1; }
.mnav__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(360px, 90vw);
background: var(--bg-elevated, #0D1322);
border-left: 1px solid var(--border-strong, rgba(255,255,255,0.12));
box-shadow: -20px 0 60px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)) 24px;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(.34,1.2,.64,1);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mnav.mnav--open .mnav__panel { transform: translateX(0); }
.mnav__head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 24px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.mnav__logo { height: 44px; width: auto; }
.mnav__close {
width: 44px; height: 44px;
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 50%;
color: var(--text-primary, #fff);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.mnav__nav {
display: flex; flex-direction: column; gap: 4px;
padding: 24px 0;
}
.mnav__nav a {
display: block; padding: 14px 16px;
font-family: var(--font-display, serif);
font-size: 22px; font-weight: 400;
color: var(--text-primary, #fff);
text-decoration: none;
border-radius: 12px;
transition: background 0.15s ease;
-webkit-tap-highlight-color: rgba(91,160,245,0.18);
touch-action: manipulation;
min-height: 48px;
}
.mnav__nav a:hover, .mnav__nav a:focus-visible {
background: rgba(255,255,255,0.05);
outline: none;
}
.mnav__cta {
margin-top: auto;
padding-top: 32px;
border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.mnav__foot {
display: flex; flex-wrap: wrap; gap: 8px 16px;
padding-top: 24px; margin-top: 24px;
border-top: 1px solid var(--border, rgba(255,255,255,0.08));
font-family: var(--font-mono, monospace);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.5);
}
.mnav__foot span { display: inline-flex; align-items: center; gap: 6px; }
.mnav__foot span::before {
content: ''; width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent, #5BA0F5);
}
@media (prefers-reduced-motion: reduce) {
.mnav__panel, .mnav__backdrop { transition: none; }
}
/* === §4.4.3 iOS anti-zoom: inputs com font-size 16px === */
.wa-modal__field input,
.wa-modal__field select,
.wa-modal__field textarea,
.wa-chat__input {
font-size: 16px !important;
}
/* === §4.3.3 100vh → 100dvh em pontos críticos === */
.hero {
min-height: 90svh;
min-height: 90dvh;
}
.logo-live {
height: 100dvh !important;
}
.video-bg.video-bg--full,
.video-bg.video-bg--hero {
height: 100dvh !important;
}
/* === §4.5 Mobile video: REMOVE display:none — vídeo continua no mobile === */
@media (max-width: 640px) {
.video-bg {
display: block !important;
}
}
/* === §4.4.1 Tap targets ≥ 48px === */
.btn { min-height: 44px; }
.btn--lg { min-height: 52px; }
.wa-modal__close { width: 44px; height: 44px; }
.wa-modal__radio { min-height: 48px; }
/* === §4.4.2 touch-action + tap-highlight === */
html { -webkit-tap-highlight-color: rgba(91,160,245,0.18); }
.btn, a, button {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.btn, .nav__logo, .pillar__icon, .wa-fab {
user-select: none;
-webkit-user-select: none;
}
/* === §4.6 Hero ambient glow — alternativa cursor signature em touch === */
@media (hover: none), (max-width: 1024px) {
.hero {
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
top: 30%; left: 50%;
width: 70vw; height: 70vw;
max-width: 600px; max-height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(91,160,245,.18) 0%, rgba(0,255,163,.08) 40%, transparent 70%);
filter: blur(40px);
pointer-events: none;
animation: hero-ambient 8s ease-in-out infinite;
z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
}
@keyframes hero-ambient {
0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.hero::after { animation: none; }
}
/* === §4.3.4 Safe-area no FAB e logo balão === */
.wa-fab {
bottom: calc(28px + env(safe-area-inset-bottom)) !important;
right: calc(28px + env(safe-area-inset-right)) !important;
}
@media (max-width: 640px) {
.wa-fab {
bottom: calc(20px + env(safe-area-inset-bottom)) !important;
right: calc(16px + env(safe-area-inset-right)) !important;
}
}
@media (max-width: 768px) {
.logo-live {
bottom: calc(18px + env(safe-area-inset-bottom)) !important;
right: calc(14px + env(safe-area-inset-right)) !important;
}
}
@media (max-width: 380px) {
.logo-live {
bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
}
/* Pull-to-refresh disable */
body { overscroll-behavior-y: contain; }
body.js-paused-anim *,body.js-paused-anim *::before,body.js-paused-anim *::after{animation-play-state:paused !important}
/* === FIX EMERGENCIAL p90: scroll travando ===
Causa provavel: body com overflow:hidden preso (mobile menu) + .hero > *
forcando position:relative quebrando overlay. */
/* 1. Forca scroll liberado no body */
body {
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto; /* desfaz o contain anterior */
}
html { overflow-y: auto !important; }
/* 2. .mnav so renderiza quando aberto (display none por default) */
.mnav { display: none; }
.mnav.mnav--open { display: block; pointer-events: auto; }
/* 3. Remove o .hero > * { position:relative } que pode ter quebrado overlay */
@media (hover: none), (max-width: 1024px) {
.hero > * { position: static; z-index: auto; } /* desfaz */
.hero { overflow: visible; } /* restaura overflow padrao */
}
/* 4. Remove ambient glow do hero por enquanto (suspeito de breakage) */
.hero::after { display: none !important; }
/* ============================================================
p91 — Mobile parity: hide giant 3D L + add mini gold L
============================================================ */
/* §1 OCULTAR completamente a logo L 3D no mobile (≤1024px).
Estava cobrindo timeline, mission, CTA — desktop continua intacto. */
@media (max-width: 1024px) {
.logo-live,
:root[data-bg-mode="hybrid"] .logo-live,
:root[data-bg-mode="logo"] .logo-live,
:root[data-bg-mode="hybrid"][data-logo-zone="behind-lg"] .logo-live,
:root[data-bg-mode="hybrid"][data-logo-zone="cta-lg"] .logo-live,
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-sm"] .logo-live,
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-md"] .logo-live,
:root[data-bg-mode="hybrid"][data-logo-zone="static-tl-lg"] .logo-live {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* §2 MINI LOGO L DOURADA ANIMADA — bottom-left durante toda navegação mobile (p94)
- Posição bottom-left: longe do hambúrguer (top-right) e do WhatsApp FAB (bottom-right)
- Animação CSS: breathing + float + tilt sutil (substitui a animação JS desativada em mobile)
- z-index 35: abaixo do nav (100) e WhatsApp (1000), acima das seções */
.minilogo {
display: none;
}
@media (max-width: 1024px) {
.minilogo {
display: block;
position: fixed;
bottom: calc(22px + env(safe-area-inset-bottom));
left: calc(14px + env(safe-area-inset-left));
top: auto;
right: auto;
width: 56px;
height: 56px;
z-index: 35;
pointer-events: none;
opacity: 0;
transform: translateY(8px) scale(0.85);
transition: opacity 0.6s ease 0.3s, transform 0.6s cubic-bezier(.34,1.2,.64,1) 0.3s;
will-change: opacity, transform, filter;
filter:
drop-shadow(0 0 12px rgba(245, 200, 110, 0.55))
drop-shadow(0 0 26px rgba(245, 200, 110, 0.30));
}
.minilogo.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
animation: minilogo-float 5s ease-in-out infinite 0.9s;
}
.minilogo img {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center;
animation: minilogo-breathe 4s ease-in-out infinite;
/* Logo mantida nas cores originais (azul + cinza),
igual à .logo-live do desktop. O glow dourado vem do drop-shadow
no wrapper .minilogo (keyframe minilogo-float). */
filter:
drop-shadow(0 0 3px rgba(252, 220, 140, 0.6))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
}
/* Float vertical do wrapper inteiro (com glow respirando) */
@keyframes minilogo-float {
0%, 100% {
transform: translateY(0) scale(1);
filter:
drop-shadow(0 0 12px rgba(245, 200, 110, 0.55))
drop-shadow(0 0 26px rgba(245, 200, 110, 0.30));
}
50% {
transform: translateY(-5px) scale(1.02);
filter:
drop-shadow(0 0 18px rgba(245, 200, 110, 0.75))
drop-shadow(0 0 36px rgba(245, 200, 110, 0.45));
}
}
/* Breathing + leve tilt do ![]()
interno (independente do float do wrapper) */
@keyframes minilogo-breathe {
0%, 100% {
transform: scale(1) rotateZ(-1.5deg);
}
50% {
transform: scale(1.06) rotateZ(2deg);
}
}
@media (max-width: 380px) {
.minilogo {
width: 48px;
height: 48px;
bottom: calc(18px + env(safe-area-inset-bottom));
left: calc(12px + env(safe-area-inset-left));
}
}
@media (prefers-reduced-motion: reduce) {
.minilogo.is-visible,
.minilogo img {
animation: none !important;
transform: none !important;
}
}
/* §3 HEADER MOBILE — REFEITO p92 (logo brilhante + hamburger inline)
Markup real: ...
Bug a resolver:
1. Em <=560px o grid vira 1 coluna -> hamburger empilha embaixo da logo
2. Logo .nav__logo-img tinha drop-shadow forte que apagava ela
3. Hamburger 44px parecia gigante com border opaca
*/
@media (max-width: 1080px) {
/* Força 2 colunas: logo esquerda (1fr) | hamburger direita (auto) */
.nav__inner {
grid-template-columns: 1fr auto !important;
align-items: center !important;
gap: 12px !important;
padding-left: 16px !important;
padding-right: 16px !important;
min-height: 56px;
}
/* Logo: maior, sem drop-shadow apagador */
.nav__logo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.nav__logo-img {
height: 60px !important;
max-height: 60px !important;
width: auto !important;
max-width: 240px !important;
filter: brightness(1.18) contrast(1.05)
drop-shadow(0 1px 2px rgba(0,0,0,0.35)) !important;
display: block !important;
}
/* Hamburger: compacto, integrado ao header */
.nav__hamburger {
width: 40px !important;
height: 40px !important;
border: 1px solid rgba(255,255,255,0.14) !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.04) !important;
margin-left: 0 !important;
flex: 0 0 auto;
padding: 0 !important;
}
.nav__hamburger span {
width: 18px !important;
height: 1.5px !important;
background: rgba(255,255,255,0.92) !important;
}
}
/* Sobrescreve o bug em <=560px que forçava 1 coluna */
@media (max-width: 560px) {
.nav__inner {
grid-template-columns: 1fr auto !important;
}
.nav__cta { display: none !important; }
.nav__logo-img {
height: 52px !important;
max-height: 52px !important;
max-width: 200px !important;
}
}
@media (max-width: 380px) {
.nav__logo-img {
height: 46px !important;
max-height: 46px !important;
max-width: 175px !important;
}
.nav__hamburger {
width: 38px !important;
height: 38px !important;
}
}
/* Reduz altura do nav em mobile (era 80px → demais) */
@media (max-width: 768px) {
.nav {
height: 60px !important;
}
.nav.scrolled {
height: 54px !important;
}
.nav.scrolled .nav__logo-img {
height: 38px !important;
}
}
/* §4 STATS — em mobile vertical (1 coluna), elimina indent/border-left espúrio */
@media (max-width: 520px) {
.stats__inner {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.stats__inner .stat,
.stats__inner .stat:nth-child(3n+1),
.stats__inner .stat:nth-child(2n+1),
.stats__inner .stat:nth-child(n) {
border-left: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
}
.stats__inner .stat:not(:first-child) {
border-top: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
padding-top: 24px !important;
margin-top: 24px !important;
}
}
/* §5 HERO KICKER (CONTABILIDADE · ADVOCACIA · AUDITORIA) — não corta texto */
@media (max-width: 768px) {
.hero__kicker, .kicker {
font-size: clamp(10px, 2.6vw, 12px) !important;
letter-spacing: 0.16em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
/* Em telas muito estreitas, reduz espaçamento pra caber tudo */
@media (max-width: 380px) {
.hero__kicker, .kicker {
font-size: 9.5px !important;
letter-spacing: 0.12em !important;
}
}
}
/* §6 SEÇÕES — fica acima do .logo-live (caso reapareça em algum estado) */
@media (max-width: 1024px) {
.mission, .history, .cta-final, .stats, .pillars, .partners, .blog {
position: relative;
z-index: 2;
}
}
/* §6.4 HANDOFF FORM — Turnstile + status + Reviews + PWA + Light toggle (p97) */
/* Turnstile container — flexível, dark theme combina com modal */
.wa-chat__turnstile {
display: flex;
justify-content: center;
margin: 4px 0 2px;
min-height: 65px;
}
.wa-chat__turnstile:empty { display: none; }
/* Status feedback (erro/ok/warn) abaixo do form */
.wa-chat__handoff-status {
font-size: 13px;
line-height: 1.45;
padding: 10px 14px;
border-radius: 10px;
text-align: left;
margin-top: 4px;
}
.wa-chat__handoff-status--err {
background: rgba(229, 72, 77, 0.12);
border: 1px solid rgba(229, 72, 77, 0.3);
color: #ff8a8e;
}
.wa-chat__handoff-status--warn {
background: rgba(255, 178, 36, 0.12);
border: 1px solid rgba(255, 178, 36, 0.3);
color: #ffce6e;
}
.wa-chat__handoff-status--ok {
background: rgba(37, 211, 102, 0.14);
border: 1px solid rgba(37, 211, 102, 0.32);
color: #7fe89a;
}
/* === GOOGLE REVIEWS BADGE === */
.gr-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
text-decoration: none;
color: var(--text-primary, #fff);
transition: all 0.2s var(--ease-out, ease);
font-family: var(--font-body, system-ui);
cursor: pointer;
opacity: 0;
transform: translateY(8px);
animation: gr-fade-in 0.6s ease-out 0.3s forwards;
}
.gr-badge:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(91,160,245,0.3);
transform: translateY(-2px);
}
.gr-badge__logo {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.gr-badge__main {
display: flex;
flex-direction: column;
gap: 2px;
}
.gr-badge__top {
display: flex;
align-items: baseline;
gap: 6px;
}
.gr-badge__rating {
font-family: var(--font-display, Georgia, serif);
font-size: 19px;
font-weight: 600;
line-height: 1;
color: #fff;
}
.gr-badge__stars {
color: #FBBC04;
font-size: 13px;
letter-spacing: 1px;
}
.gr-badge__sub {
font-size: 11px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.02em;
}
.gr-badge--inline {
/* Variante pra inserir entre seções */
margin: 0 auto;
}
@keyframes gr-fade-in {
to { opacity: 1; transform: translateY(0); }
}
/* === PWA INSTALL BANNER === */
.pwa-install {
position: fixed;
bottom: max(96px, calc(96px + env(safe-area-inset-bottom)));
left: 50%;
transform: translateX(-50%) translateY(20px);
width: min(360px, calc(100vw - 32px));
background: rgba(13, 19, 34, 0.97);
border: 1px solid rgba(91, 160, 245, 0.35);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(91,160,245,0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 990;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
display: flex;
align-items: center;
gap: 12px;
}
.pwa-install.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.pwa-install__icon {
width: 38px;
height: 38px;
flex-shrink: 0;
}
.pwa-install__text {
flex: 1;
min-width: 0;
}
.pwa-install__title {
font-size: 13px;
font-weight: 600;
color: #fff;
line-height: 1.25;
margin: 0;
}
.pwa-install__sub {
font-size: 11.5px;
color: rgba(255,255,255,0.65);
margin: 2px 0 0;
line-height: 1.3;
}
.pwa-install__btn {
background: var(--accent, #5BA0F5);
color: #fff;
border: none;
border-radius: 9px;
padding: 9px 14px;
font-size: 12.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s;
}
.pwa-install__btn:hover { background: #4a8fe6; }
.pwa-install__close {
width: 26px;
height: 26px;
background: transparent;
border: none;
color: rgba(255,255,255,0.55);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
flex-shrink: 0;
padding: 0;
}
.pwa-install__close:hover { background: rgba(255,255,255,0.06); color: #fff; }
/* ==========================================================================
§8 PRESENÇA — mapa interativo Brasil + Argentina (p107)
Inserido entre History e Mission. SVG inline, pinos animados, legenda lateral.
========================================================================== */
.presenca {
padding: 96px 0 80px;
background: var(--bg, #0A0F1C);
position: relative;
z-index: 2;
}
.presenca__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.presenca__head {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.presenca__head .eyebrow {
align-self: center;
text-align: center;
margin: 0;
}
/* Título centralizado de verdade — sobrescreve text-align: left herdado */
.presenca__title {
text-align: center !important;
margin: 0 !important;
max-width: 100%;
display: block;
/* Reduz um tic vs section-title padrão (era clamp 44-80) pra caber melhor */
font-size: clamp(38px, 5vw, 64px) !important;
line-height: 1.05 !important;
}
.presenca__lede {
text-align: center !important;
margin: 0 !important;
max-width: 640px;
}
/* Layout grid: mapa + legenda */
.presenca__grid {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 48px;
align-items: center;
}
/* Mapa container */
.presenca__map {
background: linear-gradient(135deg, rgba(91,160,245,0.04) 0%, rgba(245,200,110,0.02) 100%);
border: 1px solid rgba(91, 160, 245, 0.14);
border-radius: 24px;
padding: 24px;
position: relative;
overflow: hidden;
box-shadow:
0 12px 40px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Wrapper que segura a imagem do mapa + overlay (pinos e linhas). */
.presenca__map-wrap {
position: relative;
width: 100%;
display: block;
}
/* Imagem PNG do mapa propriamente dita */
.presenca__map-img {
display: block;
width: 100%;
height: auto;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
/* SVG overlay com as linhas conectando os pinos.
viewBox 0 0 100 100 = coordenadas em PERCENTUAL — bate com left/top % dos pinos.
preserveAspectRatio="none" estica pra cobrir 100% do wrap. */
.presenca__overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
/* Linhas: vector-effect non-scaling-stroke mantém largura constante */
.presenca__line {
stroke: rgba(91, 160, 245, 0.88);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 8 6;
animation: presenca-line-flow 1.8s linear infinite;
filter: drop-shadow(0 0 5px rgba(91, 160, 245, 0.8));
fill: none;
}
@keyframes presenca-line-flow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -140; }
}
/* Pinos: divs absolutas posicionadas em % sobre o mapa */
.presenca__pin {
position: absolute;
z-index: 2;
pointer-events: none;
width: 0;
height: 0;
}
.presenca__pin-pulse {
position: absolute;
left: 50%;
top: 50%;
width: 36px;
height: 36px;
margin-left: -18px;
margin-top: -18px;
border-radius: 50%;
background: rgba(91, 160, 245, 0.45);
animation: presenca-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.presenca__pin.is-hub .presenca__pin-pulse {
width: 48px;
height: 48px;
margin-left: -24px;
margin-top: -24px;
background: rgba(245, 200, 110, 0.55);
animation-duration: 2s;
}
@keyframes presenca-pulse {
0% { transform: scale(0.45); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; }
}
.presenca__pin-dot {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 50%;
background: var(--accent, #5BA0F5);
box-shadow:
0 0 14px rgba(91, 160, 245, 1),
0 0 28px rgba(91, 160, 245, 0.55),
0 0 0 3px rgba(10, 15, 28, 0.9);
}
.presenca__pin.is-hub .presenca__pin-dot {
width: 28px;
height: 28px;
margin-left: -14px;
margin-top: -14px;
background: #F5C86E;
box-shadow:
0 0 16px rgba(245, 200, 110, 1),
0 0 32px rgba(245, 200, 110, 0.65),
0 0 0 4px rgba(10, 15, 28, 0.95);
}
/* Labels — pill compacto pra legibilidade sobre o mapa
Posicionamento por data-label-pos: top|bottom|left|right
Evita sobreposição entre cidades próximas. */
.presenca__pin-label {
position: absolute;
left: 50%;
top: 50%;
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.95);
text-transform: uppercase;
white-space: nowrap;
background: rgba(10, 15, 28, 0.92);
padding: 5px 10px;
border-radius: 6px;
border: 1px solid rgba(91, 160, 245, 0.4);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
/* default: TOP */
transform: translate(-50%, calc(-100% - 22px));
}
.presenca__pin[data-label-pos="bottom"] .presenca__pin-label {
transform: translate(-50%, 22px);
}
.presenca__pin[data-label-pos="left"] .presenca__pin-label {
transform: translate(calc(-100% - 22px), -50%);
}
.presenca__pin[data-label-pos="right"] .presenca__pin-label {
transform: translate(22px, -50%);
}
.presenca__pin.is-hub .presenca__pin-label {
color: #F5C86E;
border-color: rgba(245, 200, 110, 0.55);
font-size: 12.5px;
font-weight: 700;
background: rgba(10, 15, 28, 0.96);
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
/* hub default: TOP, com offset maior */
transform: translate(-50%, calc(-100% - 26px));
}
.presenca__pin.is-hub[data-label-pos="bottom"] .presenca__pin-label {
transform: translate(-50%, 26px);
}
.presenca__pin.is-hub[data-label-pos="left"] .presenca__pin-label {
transform: translate(calc(-100% - 26px), -50%);
}
.presenca__pin.is-hub[data-label-pos="right"] .presenca__pin-label {
transform: translate(26px, -50%);
}
/* (trecho antigo SVG removido — agora pino label é HTML div com pill estilo) */
/* Legenda lateral */
.presenca__legend {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.presenca__legend-head {
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-tertiary, rgba(255,255,255,0.5));
margin-bottom: 4px;
padding-left: 4px;
}
.presenca__legend-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.presenca__legend-item:hover {
background: rgba(91, 160, 245, 0.06);
border-color: rgba(91, 160, 245, 0.22);
transform: translateX(4px);
}
.presenca__legend-item.is-hub {
background: rgba(245, 200, 110, 0.06);
border-color: rgba(245, 200, 110, 0.22);
}
.presenca__legend-item.is-hub:hover {
background: rgba(245, 200, 110, 0.10);
border-color: rgba(245, 200, 110, 0.4);
}
.presenca__legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent, #5BA0F5);
margin-top: 6px;
flex-shrink: 0;
box-shadow: 0 0 10px rgba(91, 160, 245, 0.6);
position: relative;
}
.presenca__legend-dot::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: rgba(91, 160, 245, 0.25);
animation: presenca-pulse 2.4s ease-out infinite;
}
.presenca__legend-item.is-hub .presenca__legend-dot {
background: #F5C86E;
box-shadow: 0 0 12px rgba(245, 200, 110, 0.8);
}
.presenca__legend-item.is-hub .presenca__legend-dot::before {
background: rgba(245, 200, 110, 0.35);
}
.presenca__legend-text {
flex: 1;
min-width: 0;
}
.presenca__legend-name {
font-family: var(--font-display, Georgia, serif);
font-size: 18px;
color: var(--text-primary, #fff);
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.25;
}
.presenca__legend-item.is-hub .presenca__legend-name {
color: #F5C86E;
font-weight: 500;
}
.presenca__legend-state {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--text-tertiary, rgba(255,255,255,0.5));
font-weight: 500;
letter-spacing: 0.08em;
}
.presenca__legend-desc {
font-size: 13px;
color: var(--text-secondary, rgba(255,255,255,0.65));
margin-top: 5px;
line-height: 1.4;
}
/* ========================================
RESPONSIVIDADE — 4 breakpoints (p108)
======================================== */
/* === Tablet/Mobile (≤1024px): legenda abaixo do mapa, stack vertical === */
@media (max-width: 1024px) {
.presenca {
padding: 72px 0 64px;
z-index: 3;
}
.presenca__head { margin-bottom: 40px; }
.presenca__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.presenca__map {
padding: 20px;
border-radius: 20px;
}
}
/* === Mobile (≤768px): pinos um pouco menores, labels compactos === */
@media (max-width: 768px) {
.presenca {
padding: 56px 0 48px;
}
.presenca__head {
margin-bottom: 32px;
}
.presenca__map {
padding: 16px;
border-radius: 18px;
}
.presenca__pin-pulse {
width: 28px; height: 28px; margin-left: -14px; margin-top: -14px;
}
.presenca__pin.is-hub .presenca__pin-pulse {
width: 38px; height: 38px; margin-left: -19px; margin-top: -19px;
}
.presenca__pin-dot {
width: 16px; height: 16px; margin-left: -8px; margin-top: -8px;
}
.presenca__pin.is-hub .presenca__pin-dot {
width: 22px; height: 22px; margin-left: -11px; margin-top: -11px;
}
.presenca__pin-label {
font-size: 10px;
padding: 3px 7px;
letter-spacing: 0.06em;
transform: translate(-50%, calc(-100% - 16px));
}
.presenca__pin[data-label-pos="bottom"] .presenca__pin-label {
transform: translate(-50%, 16px);
}
.presenca__pin[data-label-pos="left"] .presenca__pin-label {
transform: translate(calc(-100% - 16px), -50%);
}
.presenca__pin[data-label-pos="right"] .presenca__pin-label {
transform: translate(16px, -50%);
}
.presenca__pin.is-hub .presenca__pin-label {
font-size: 11px;
transform: translate(-50%, calc(-100% - 18px));
}
.presenca__pin.is-hub[data-label-pos="bottom"] .presenca__pin-label {
transform: translate(-50%, 18px);
}
.presenca__pin.is-hub[data-label-pos="left"] .presenca__pin-label {
transform: translate(calc(-100% - 18px), -50%);
}
.presenca__pin.is-hub[data-label-pos="right"] .presenca__pin-label {
transform: translate(18px, -50%);
}
.presenca__line {
stroke-width: 1.8;
}
.presenca__legend { gap: 10px; }
.presenca__legend-head {
font-size: 10.5px;
letter-spacing: 0.16em;
}
.presenca__legend-item {
padding: 14px 14px;
border-radius: 12px;
}
.presenca__legend-name { font-size: 16px; }
.presenca__legend-desc { font-size: 12.5px; }
}
/* === Mobile pequeno (≤520px): pinos ainda mais compactos === */
@media (max-width: 520px) {
.presenca__inner {
padding: 0 16px;
}
.presenca__map {
padding: 12px;
border-radius: 14px;
}
.presenca__pin-pulse {
width: 24px; height: 24px; margin-left: -12px; margin-top: -12px;
}
.presenca__pin.is-hub .presenca__pin-pulse {
width: 32px; height: 32px; margin-left: -16px; margin-top: -16px;
}
.presenca__pin-dot {
width: 14px; height: 14px; margin-left: -7px; margin-top: -7px;
}
.presenca__pin.is-hub .presenca__pin-dot {
width: 18px; height: 18px; margin-left: -9px; margin-top: -9px;
}
.presenca__pin-label {
font-size: 9px;
padding: 2px 6px;
transform: translate(-50%, calc(-100% - 14px));
}
.presenca__pin[data-label-pos="bottom"] .presenca__pin-label {
transform: translate(-50%, 14px);
}
.presenca__pin[data-label-pos="left"] .presenca__pin-label {
transform: translate(calc(-100% - 14px), -50%);
}
.presenca__pin[data-label-pos="right"] .presenca__pin-label {
transform: translate(14px, -50%);
}
.presenca__pin.is-hub .presenca__pin-label {
font-size: 10px;
transform: translate(-50%, calc(-100% - 16px));
}
.presenca__pin.is-hub[data-label-pos="bottom"] .presenca__pin-label {
transform: translate(-50%, 16px);
}
.presenca__pin.is-hub[data-label-pos="left"] .presenca__pin-label {
transform: translate(calc(-100% - 16px), -50%);
}
.presenca__pin.is-hub[data-label-pos="right"] .presenca__pin-label {
transform: translate(16px, -50%);
}
/* Legenda */
.presenca__legend-item {
padding: 12px 14px;
gap: 10px;
}
.presenca__legend-dot {
width: 11px;
height: 11px;
margin-top: 5px;
}
.presenca__legend-name {
font-size: 15px;
}
.presenca__legend-state {
font-size: 10.5px;
display: block; /* quebra em linha nova em tela pequena */
margin-top: 2px;
}
.presenca__legend-desc {
font-size: 12px;
margin-top: 4px;
}
}
/* === Mobile bem pequeno (≤380px): última camada === */
@media (max-width: 380px) {
.presenca {
padding: 44px 0 40px;
}
.presenca__head {
margin-bottom: 28px;
}
.presenca__map {
padding: 10px;
}
.presenca__pin-label {
font-size: 8px;
padding: 2px 5px;
}
.presenca__pin.is-hub .presenca__pin-label {
font-size: 9px;
}
.presenca__legend-item {
padding: 11px 12px;
}
}
/* === Landscape mobile baixo (smartphone deitado): preserva área útil === */
@media (max-height: 500px) and (orientation: landscape) {
.presenca {
padding: 40px 0 32px;
}
}
/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
.presenca__pin-pulse,
.presenca__line,
.presenca__legend-dot::before {
animation: none;
}
.presenca__line {
stroke-dasharray: none;
opacity: 0.55;
}
.presenca__legend-item:hover {
transform: none;
}
}
/* === LIGHT MODE REMOVIDO (p105) — site é dark-only ===
Os blocos antigos do .theme-toggle e regras :root[data-theme="light"] foram
retirados. Mantemos `display:none` defensivo caso algum cache antigo
ainda referencie .theme-toggle. */
.theme-toggle { display: none !important; }
/* §6.5 STAT "BI" — destaque azul DISCRETO (p96).
ANTES: 0.85em (maior que o "+ R$ 1" de 0.72em → exaltado demais).
AGORA: 0.72em (mesmo tamanho do raw) → cor azul é o ÚNICO destaque,
tipografia uniforme em toda a linha. */
.stat-number .accent-raw {
color: var(--accent) !important;
font-size: 0.72em !important; /* igual ao raw "+ R$ 1" */
margin-left: 0.14em !important;
font-weight: 400 !important; /* sem bold, era 500 */
font-family: var(--font-display) !important;
letter-spacing: 0 !important;
/* opacidade leve pra integrar com o resto sem berrar */
opacity: 0.92;
}
@media (max-width: 768px) {
.stat-number .accent-raw {
font-size: 0.72em !important;
margin-left: 0.12em !important;
}
}
/* §6.6 WA CHAT MODAL — fix p95: scroll + minimizar (preserva conversa) + polish form
============================================================ */
/* §6.6.1 Botão minimizar (—) ao lado do X */
.wa-modal__minimize {
width: 30px; height: 30px;
background: rgba(255, 255, 255, 0.12);
border: none;
border-radius: 50%;
color: rgba(255, 255, 255, 0.85);
font-size: 18px;
font-weight: 600;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
flex-shrink: 0;
margin-right: 6px;
padding: 0 0 4px 0;
}
.wa-modal__minimize:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
/* §6.6.2 Quando o handoff form aparece, encolhe a área de chat
(libera espaço vertical pro form respirar com scroll) */
.wa-modal--handoff .wa-chat {
max-height: 24vh !important;
min-height: 100px !important;
}
/* §6.6.3 Input row vira scroll container quando contém o handoff form */
.wa-chat__input-row:has(form),
.wa-modal--handoff .wa-chat__input-row {
max-height: 58vh;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.22) transparent;
padding-bottom: 18px !important;
}
.wa-chat__input-row::-webkit-scrollbar { width: 6px; }
.wa-chat__input-row::-webkit-scrollbar-track { background: transparent; }
.wa-chat__input-row::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.22);
border-radius: 3px;
}
.wa-chat__input-row::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
/* §6.6.4 Polish do handoff form — colunas/spacing consistentes com o chat */
.wa-chat__handoff {
gap: 14px !important;
padding: 4px 2px 8px;
}
.wa-chat__handoff-intro {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
padding: 0 2px;
margin: 0 0 2px;
}
.wa-chat__handoff .wa-modal__field {
gap: 6px;
}
.wa-chat__handoff .wa-modal__field > label {
font-size: 10.5px !important;
letter-spacing: 0.16em !important;
font-weight: 500;
color: rgba(255,255,255,0.50) !important;
}
.wa-chat__handoff .wa-modal__field input[type="text"],
.wa-chat__handoff .wa-modal__field input[type="email"],
.wa-chat__handoff .wa-modal__field input[type="tel"] {
border-radius: 12px !important;
padding: 12px 14px !important;
font-size: 15px !important; /* >=16px no iOS evita zoom; uso 15 + media query abaixo */
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
}
@media (max-width: 768px) {
.wa-chat__handoff .wa-modal__field input[type="text"],
.wa-chat__handoff .wa-modal__field input[type="email"],
.wa-chat__handoff .wa-modal__field input[type="tel"] {
font-size: 16px !important; /* iOS anti-zoom em mobile */
}
}
.wa-chat__handoff .wa-modal__field input:focus {
border-color: #25D366 !important;
background: rgba(37, 211, 102, 0.05) !important;
}
/* §6.6.5 Consent checkbox melhor formatado */
.wa-chat__handoff .wa-chat__consent {
font-size: 12.5px;
line-height: 1.5;
padding: 4px 2px 0;
margin-top: 2px;
}
.wa-chat__handoff .wa-chat__consent input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 1px;
}
/* §6.6.6 Submit button — destacado, sticky no fim do scroll pra sempre visível */
.wa-chat__handoff .wa-modal__submit {
border-radius: 14px !important;
padding: 14px !important;
font-size: 14.5px !important;
font-weight: 600 !important;
margin-top: 8px;
position: sticky;
bottom: 0;
/* sombra no topo do botão pra "destacar" do form acima */
box-shadow: 0 -8px 16px -4px rgba(13, 19, 34, 0.7);
}
/* §7 VÍDEO HERO — melhora a percepção de qualidade no mobile via CSS */
@media (max-width: 768px) {
.video-bg video {
image-rendering: -webkit-optimize-contrast;
object-fit: cover !important;
object-position: center 28% !important;
/* Realça nitidez e cor sem alterar arquivo */
filter: contrast(1.08) saturate(1.12) brightness(0.96);
}
/* Overlay mais denso esconde compressão */
.video-bg__overlay {
background:
linear-gradient(180deg,
rgba(10,15,28,0.42) 0%,
rgba(10,15,28,0.58) 55%,
rgba(10,15,28,0.92) 100%) !important;
}
}
/* ==========================================================================
§9 NAV: Instagram link ao lado da logo (p110)
Wrapper .nav__brand agrupa .nav__logo + .nav__insta
Mobile (<=768px): esconde texto "@", deixa só ícone redondo
========================================================================== */
.nav__brand {
display: inline-flex;
align-items: center;
gap: 16px;
flex: 0 0 auto;
}
/* === Instagram link MINIMALISTA (p126) ===
Sem pilula com fundo. Apenas icone + texto, com underline gradient no hover.
Icone com animacao "shutter" continua (simula click de camera) e amplificacao no hover. */
.nav__insta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
background: none;
border: none;
border-radius: 0;
font-family: var(--font-mono, monospace);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
transition: color 0.3s ease;
white-space: nowrap;
position: relative;
-webkit-tap-highlight-color: transparent;
}
/* Underline gradient instagram que "cresce" da esquerda no hover */
.nav__insta::after {
content: '';
position: absolute;
left: 24px;
right: 2px;
bottom: 0;
height: 1.5px;
background: linear-gradient(90deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 1px;
}
.nav__insta:hover,
.nav__insta:focus-visible {
color: #fff;
outline: none;
}
.nav__insta:hover::after,
.nav__insta:focus-visible::after {
transform: scaleX(1);
}
/* Icone da camera: animacao continua "shutter" (simula click) */
.nav__insta svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.78);
transition: color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
transform-origin: center;
animation: insta-shutter 3.6s ease-in-out infinite;
}
@keyframes insta-shutter {
0% { transform: scale(1) rotate(0deg); }
18% { transform: scale(1.10) rotate(0deg); } /* gentle bloom */
35% { transform: scale(1) rotate(0deg); }
48% { transform: scale(0.88) rotate(-3deg); } /* shutter press */
56% { transform: scale(1.12) rotate(2deg); } /* release pop */
68% { transform: scale(1) rotate(0deg); }
100% { transform: scale(1) rotate(0deg); }
}
.nav__insta:hover svg,
.nav__insta:focus-visible svg {
animation-play-state: paused;
transform: scale(1.25) rotate(-8deg);
color: #E1306C;
filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.55));
}
.nav__insta-text {
display: inline-block;
}
/* Mobile (<=768px): so o icone (texto escondido) */
@media (max-width: 768px) {
.nav__brand { gap: 12px; }
.nav__insta {
padding: 6px;
}
.nav__insta::after {
display: none; /* sem underline no mobile */
}
.nav__insta svg {
width: 22px;
height: 22px;
}
.nav__insta-text { display: none; }
}
/* Mobile pequeno (<=380px): icone um pouquinho menor */
@media (max-width: 380px) {
.nav__brand { gap: 8px; }
.nav__insta svg {
width: 20px;
height: 20px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.nav__insta,
.nav__insta svg,
.nav__insta::after {
transition: none;
animation: none;
}
}
/* ============================================================ */
/* MAPA DE PRESENCA v2 — 8 cidades + hover system (p118) */
/* ============================================================ */
:root {
--map-blue: #3D8BF0;
--map-blue-glow: rgba(61, 139, 240, 0.4);
--map-gold: #F5C86E;
--map-gold-glow: rgba(245, 200, 110, 0.5);
--map-neon-blue: #29e0ff;
--map-neon-gold: #ffd54a;
}
/* Container do SVG overlay */
.presenca__overlay-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
/* Aliases para o SVG inline que usa var(--blue), var(--gold) etc */
--blue: var(--map-blue);
--blue-glow: var(--map-blue-glow);
--gold: var(--map-gold);
--gold-glow: var(--map-gold-glow);
}
/* Cidade (grupo SVG) */
.presenca__overlay-svg .city {
cursor: pointer;
pointer-events: auto;
}
.presenca__overlay-svg .city .hit {
fill: transparent;
pointer-events: all;
}
.presenca__overlay-svg .city .city-anim {
transform-box: fill-box;
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Pulso ambiente nos circulos */
.presenca__overlay-svg .pulse {
transform-box: fill-box;
transform-origin: center;
animation: presenca-svg-pulse 2.4s ease-out infinite;
}
.presenca__overlay-svg .pulse.gold { animation-duration: 2s; }
@keyframes presenca-svg-pulse {
0% { transform: scale(0.6); opacity: 0.65; }
70% { transform: scale(2.6); opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
/* Halo neon ao redor da bolinha (hover) */
.presenca__overlay-svg .glow-ring {
fill: none;
stroke: var(--map-neon-blue);
stroke-width: 2;
opacity: 0;
transition: opacity 0.25s ease;
filter: drop-shadow(0 0 6px var(--map-neon-blue)) drop-shadow(0 0 12px var(--map-neon-blue));
}
.presenca__overlay-svg .city.is-hq .glow-ring {
stroke: var(--map-neon-gold);
filter: drop-shadow(0 0 6px var(--map-neon-gold)) drop-shadow(0 0 12px var(--map-neon-gold));
}
/* Sigla — escondida por padrao */
.presenca__overlay-svg .sigla {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.8px;
fill: #fff;
paint-order: stroke fill;
stroke: rgba(0, 0, 0, 0.45);
stroke-width: 0.6px;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transform: translateY(4px) scale(0.85);
transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.presenca__overlay-svg .sigla-bg {
fill: var(--map-blue);
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.presenca__overlay-svg .city.is-hq .sigla-bg { fill: var(--map-gold); }
/* HOVER state — animacao bounce + sigla aparece + halo aparece */
.presenca__overlay-svg .city:hover .city-anim,
.presenca__overlay-svg .city.is-active .city-anim {
animation: presenca-svg-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes presenca-svg-bounce {
0% { transform: translateY(0) scale(1); }
35% { transform: translateY(-10px) scale(1.15); }
70% { transform: translateY(0) scale(1.05); }
100% { transform: translateY(0) scale(1); }
}
.presenca__overlay-svg .city:hover .sigla,
.presenca__overlay-svg .city.is-active .sigla {
opacity: 1;
transform: translateY(0) scale(1);
}
.presenca__overlay-svg .city:hover .sigla-bg,
.presenca__overlay-svg .city.is-active .sigla-bg {
opacity: 1;
}
.presenca__overlay-svg .city:hover .glow-ring,
.presenca__overlay-svg .city.is-active .glow-ring {
opacity: 0.55;
}
/* Estrela "Nova filial" piscando (Ouro Preto) */
.presenca__overlay-svg .new-star {
fill: #ffcb3a;
stroke: #b8860b;
stroke-width: 1.2;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(255, 203, 58, 0.8));
transform-box: fill-box;
transform-origin: center;
animation: presenca-svg-twinkle 1.8s ease-in-out infinite;
}
@keyframes presenca-svg-twinkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
50% { transform: scale(1.25) rotate(15deg); opacity: 0.85; }
}
/* Linhas conectando os pontos */
.presenca__overlay-svg .link {
fill: none;
stroke: var(--map-blue);
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 6 9;
opacity: 0.75;
animation: presenca-svg-dash 1.6s linear infinite;
transition: stroke-width 0.25s ease, opacity 0.25s ease, filter 0.25s ease, stroke 0.25s ease;
}
.presenca__overlay-svg .link.to-hq {
stroke: var(--map-gold);
stroke-width: 2.8;
opacity: 0.9;
}
@keyframes presenca-svg-dash { to { stroke-dashoffset: -26; } }
/* Hover state: linha lit em neon */
.presenca__overlay-svg .link.is-lit {
stroke: var(--map-neon-blue);
stroke-width: 3.4;
opacity: 1;
filter:
drop-shadow(0 0 4px var(--map-neon-blue))
drop-shadow(0 0 10px var(--map-neon-blue))
drop-shadow(0 0 18px rgba(41, 224, 255, 0.6));
animation-duration: 0.8s;
}
.presenca__overlay-svg .link.to-hq.is-lit {
stroke: var(--map-neon-gold);
stroke-width: 4;
filter:
drop-shadow(0 0 4px var(--map-neon-gold))
drop-shadow(0 0 10px var(--map-neon-gold))
drop-shadow(0 0 18px rgba(255, 213, 74, 0.7));
}
/* Legenda lateral — feedback visual quando hover dispara */
.presenca__legend-item {
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.presenca__legend-item.is-hover {
background: rgba(61, 139, 240, 0.1);
border-color: rgba(61, 139, 240, 0.45);
transform: translateX(4px);
}
.presenca__legend-item.is-hover.is-hub {
background: rgba(245, 200, 110, 0.12);
border-color: rgba(245, 200, 110, 0.55);
}
/* Reduced motion: desliga animacoes infinitas mas mantem transicoes */
@media (prefers-reduced-motion: reduce) {
.presenca__overlay-svg .pulse,
.presenca__overlay-svg .link,
.presenca__overlay-svg .new-star {
animation: none;
}
}
/* ============================================================ */
/* BLOG GRID — centra a ultima linha quando 4 ou 5 cards (p118) */
/* ============================================================ */
.blog__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.post {
grid-column: span 2;
}
/* 5 cards: 4o e 5o ficam em colunas 2-3 e 4-5 (centrados) */
.post:nth-child(4):nth-last-child(2) {
grid-column: 2 / span 2;
}
.post:nth-child(5):nth-last-child(1) {
grid-column: 4 / span 2;
}
/* 4 cards: 4o sozinho centralizado em colunas 3-4 */
.post:nth-child(4):nth-last-child(1):not(:nth-child(5)) {
grid-column: 3 / span 2;
}
/* Mobile: 1 coluna como ja era — desliga overrides */
@media (max-width: 768px) {
.blog__grid {
grid-template-columns: 1fr;
}
.post,
.post:nth-child(4):nth-last-child(2),
.post:nth-child(5):nth-last-child(1),
.post:nth-child(4):nth-last-child(1):not(:nth-child(5)) {
grid-column: auto;
}
}
/* ============================================================ */
/* OURO PRETO — Nova filial + Carrossel de slides (p119) */
/* ============================================================ */
.op {
padding: 100px 0 90px;
background: linear-gradient(180deg, transparent 0%, rgba(91,160,245,0.025) 50%, transparent 100%);
position: relative;
z-index: 1;
}
.op__inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
gap: 48px;
}
.op__head {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.op__title {
margin: 8px 0 0;
}
.op__lede {
max-width: 680px;
margin: 8px auto 0;
}
/* Carrossel container */
.op__carousel {
position: relative;
border-radius: 24px;
overflow: hidden;
background: rgba(10, 15, 28, 0.6);
border: 1px solid rgba(91, 160, 245, 0.18);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
outline: none;
}
.op__carousel:focus-visible {
border-color: rgba(91, 160, 245, 0.6);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.35),
0 0 0 3px rgba(91, 160, 245, 0.3);
}
.op__viewport {
position: relative;
aspect-ratio: 1548 / 1095; /* mesma proporção dos slides PDF */
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.op__track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
will-change: transform;
}
.op__slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.op__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
-webkit-user-drag: none;
}
/* Botões prev/next */
.op__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(10, 15, 28, 0.7);
border: 1px solid rgba(91, 160, 245, 0.35);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0.85;
}
.op__nav:hover {
background: rgba(10, 15, 28, 0.92);
border-color: rgba(91, 160, 245, 0.7);
transform: translateY(-50%) scale(1.06);
opacity: 1;
}
.op__nav:active {
transform: translateY(-50%) scale(0.96);
}
.op__nav--prev { left: 16px; }
.op__nav--next { right: 16px; }
/* Dots indicators */
.op__dots {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
padding: 8px 14px;
background: rgba(10, 15, 28, 0.55);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(91, 160, 245, 0.2);
z-index: 3;
}
.op__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.32);
border: 0;
padding: 0;
cursor: pointer;
transition: width 0.3s var(--ease-out, cubic-bezier(.4,0,.2,1)), background 0.3s ease;
}
.op__dot:hover {
background: rgba(255, 255, 255, 0.55);
}
.op__dot.is-active {
width: 26px;
border-radius: 4px;
background: #5BA0F5;
}
/* Counter */
.op__counter {
position: absolute;
top: 18px;
right: 18px;
padding: 6px 12px;
background: rgba(10, 15, 28, 0.65);
border: 1px solid rgba(91, 160, 245, 0.25);
border-radius: 999px;
font-family: var(--font-mono, monospace);
font-size: 12px;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.06em;
font-weight: 500;
z-index: 3;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Responsive — Tablet */
@media (max-width: 920px) {
.op { padding: 72px 0 64px; }
.op__inner { gap: 36px; padding: 0 24px; }
.op__nav {
width: 42px;
height: 42px;
}
.op__nav--prev { left: 12px; }
.op__nav--next { right: 12px; }
.op__counter {
top: 14px;
right: 14px;
font-size: 11px;
padding: 5px 10px;
}
}
/* Responsive — Mobile */
@media (max-width: 640px) {
.op { padding: 56px 0 48px; }
.op__inner { gap: 28px; padding: 0 16px; }
.op__head { gap: 12px; }
.op__lede { font-size: 15px; }
.op__carousel { border-radius: 16px; }
.op__nav {
width: 38px;
height: 38px;
}
.op__nav--prev { left: 8px; }
.op__nav--next { right: 8px; }
.op__dots {
bottom: 12px;
padding: 6px 10px;
gap: 6px;
}
.op__dot {
width: 7px;
height: 7px;
}
.op__dot.is-active {
width: 22px;
}
.op__counter {
top: 10px;
right: 10px;
font-size: 10.5px;
padding: 4px 8px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.op__track {
transition: transform 0.01s linear;
}
.op__nav {
transition: none;
}
}
/* ============================================================ */
/* MAPA MOBILE: bolinhas maiores (p120) */
/* ============================================================ */
@media (max-width: 768px) {
/* Hit area (toque) maior */
.presenca__overlay-svg .city .hit { r: 32; }
.presenca__overlay-svg .city.is-hq .hit { r: 38; }
/* Cidades regulares — ordem das circles em .city-anim:
1=pulse, 2=glow-ring, 3=solid blue, 4=white center */
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(1) { r: 12; }
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(2) { r: 16; }
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(3) { r: 12; }
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(4) { r: 5; }
/* Hub (BH) — ordem: 1=pulse1, 2=pulse2, 3=glow-ring, 4=solid gold, 5=white, 6=tiny core */
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(1) { r: 16; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(2) { r: 16; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(3) { r: 20; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(4) { r: 16; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(5) { r: 7; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(6) { r: 3.5; }
/* Linhas tambem mais grossas */
.presenca__overlay-svg .link { stroke-width: 3; }
.presenca__overlay-svg .link.to-hq { stroke-width: 3.6; }
.presenca__overlay-svg .link.is-lit { stroke-width: 4.4; }
.presenca__overlay-svg .link.to-hq.is-lit { stroke-width: 5; }
/* Sigla um pouco maior pra leitura */
.presenca__overlay-svg .sigla { font-size: 14px; }
/* Estrela "Nova filial" maior tambem */
.presenca__overlay-svg .new-star {
transform: scale(1.4);
transform-box: fill-box;
transform-origin: center;
}
}
/* Telas muito pequenas (<480px): bolinhas ainda mais visiveis */
@media (max-width: 480px) {
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(1) { r: 14; }
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(2) { r: 18; }
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(3) { r: 14; }
.presenca__overlay-svg .city:not(.is-hq) .city-anim circle:nth-of-type(4) { r: 6; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(1) { r: 18; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(2) { r: 18; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(3) { r: 22; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(4) { r: 18; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(5) { r: 8; }
.presenca__overlay-svg .city.is-hq .city-anim circle:nth-of-type(6) { r: 4; }
.presenca__overlay-svg .city .hit { r: 36; }
.presenca__overlay-svg .city.is-hq .hit { r: 42; }
.presenca__overlay-svg .sigla { font-size: 16px; }
}
/* ============================================================ */
/* OURO PRETO na legenda: estrela + botao "Ver projeto" (p121) */
/* ============================================================ */
/* Estrela inline ao lado do nome "Ouro Preto" */
.presenca__legend-star {
display: inline-block;
width: 18px;
height: 18px;
margin-left: 6px;
vertical-align: -3px;
fill: #ffcb3a;
filter: drop-shadow(0 0 4px rgba(255, 203, 58, 0.65));
transform-origin: center;
animation: legend-star-pulse 2.6s ease-in-out infinite;
}
@keyframes legend-star-pulse {
0%, 100% { transform: scale(1); opacity: 0.92; }
50% { transform: scale(1.12); opacity: 1; }
}
.presenca__legend-star path {
stroke: #b8860b;
stroke-width: 1.2;
stroke-linejoin: round;
}
/* Botao CTA "Ver projeto" */
.presenca__legend-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 7px 14px;
background: rgba(245, 200, 110, 0.12);
border: 1px solid rgba(245, 200, 110, 0.45);
border-radius: 999px;
color: #ffcb3a;
font-family: var(--font-mono, monospace);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, color 0.22s ease;
align-self: flex-start;
width: fit-content;
}
.presenca__legend-cta:hover {
background: rgba(245, 200, 110, 0.22);
border-color: rgba(245, 200, 110, 0.75);
color: #fff;
}
.presenca__legend-cta:active {
transform: scale(0.97);
}
.presenca__legend-cta svg {
transition: transform 0.22s ease;
flex-shrink: 0;
}
.presenca__legend-cta:hover svg {
transform: translateX(3px);
}
/* ============================================================ */
/* VIDEO SPLASH: logo enquanto video nao toca (p128) */
/* ============================================================ */
.video-bg__splash {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 50% 45%, rgba(15, 26, 46, 0.95) 0%, rgba(10, 15, 28, 1) 70%);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
opacity: 1;
}
/* Logo central com pulse suave */
.video-bg__splash::before {
content: '';
width: min(46%, 440px);
aspect-ratio: 1200 / 340;
background:
url('/uploads/LEGALIZE_GROUP_LOGO_HORIZONTAL.png') center / contain no-repeat;
filter:
brightness(1.1)
drop-shadow(0 4px 20px rgba(91, 160, 245, 0.35))
drop-shadow(0 0 40px rgba(61, 139, 240, 0.2));
animation: video-splash-pulse 2.6s ease-in-out infinite;
opacity: 0.92;
}
/* Pequeno indicador de "loading" abaixo da logo */
.video-bg__splash::after {
content: '';
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(91, 160, 245, 0.7) 50%,
transparent 100%);
border-radius: 2px;
animation: video-splash-loader 1.4s ease-in-out infinite;
opacity: 0.6;
}
@keyframes video-splash-pulse {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.03); }
}
@keyframes video-splash-loader {
0% { transform: translateX(-50%) scaleX(0.4); opacity: 0.3; }
50% { transform: translateX(-50%) scaleX(1); opacity: 0.9; }
100% { transform: translateX(-50%) scaleX(0.4); opacity: 0.3; }
}
/* Quando o video comeca a tocar de fato -> some suave */
.video-bg.is-video-playing .video-bg__splash {
opacity: 0;
}
/* Mobile: logo um pouco maior pra preencher melhor */
@media (max-width: 640px) {
.video-bg__splash::before {
width: min(70%, 320px);
}
.video-bg__splash::after {
bottom: 18%;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.video-bg__splash::before,
.video-bg__splash::after {
animation: none;
}
.video-bg__splash {
transition: opacity 0.2s linear;
}
}
/* ============================================================ */
/* OURO PRETO carrossel: Ken Burns + transicao mais suave (p129) */
/* ============================================================ */
/* Curva de transicao do track ainda mais suave (ease-in-out cubico) */
.op__track {
transition: transform 0.7s cubic-bezier(0.45, 0, 0.15, 1);
}
/* Slides nao-ativos ficam levemente menos visiveis (preview elegante) */
.op__slide {
opacity: 0.85;
transition: opacity 0.6s ease;
}
.op__slide.is-active {
opacity: 1;
}
/* Ken Burns: zoom lento no slide ativo (sincronizado com cron de 5s) */
.op__slide .op__img {
transform: scale(1.02);
transition: transform 0.6s ease-out;
}
.op__slide.is-active .op__img {
animation: op-ken-burns 5.6s ease-out forwards;
}
@keyframes op-ken-burns {
0% { transform: scale(1.04) translateZ(0); }
100% { transform: scale(1.10) translateZ(0); }
}
/* Reduced motion: sem zoom, so o slide */
@media (prefers-reduced-motion: reduce) {
.op__slide.is-active .op__img {
animation: none;
transform: scale(1);
}
.op__slide {
opacity: 1;
transition: none;
}
.op__track {
transition: transform 0.2s linear;
}
}
/* ============================================================ */
/* OP CARROSSEL v2 (p135): drag mouse + transicao mais fluida */
/* ============================================================ */
/* Track: transicao mais leve e responsiva */
.op__track {
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
/* Durante drag: sem transicao (segue o dedo/mouse em real-time) */
.op__track.is-dragging {
transition: none;
}
/* Viewport mostra cursor de drag */
.op__viewport {
cursor: grab;
-webkit-user-select: none;
user-select: none;
touch-action: pan-y; /* permite scroll vertical mas captura horizontal */
}
.op__viewport.is-dragging {
cursor: grabbing;
}
.op__viewport * {
-webkit-user-drag: none;
user-drag: none;
}
/* Removido o Ken Burns (estava causando "snap" entre slides). */
.op__slide .op__img {
transform: none;
animation: none;
transition: none;
}
.op__slide.is-active .op__img {
animation: none;
}
/* Slides: opacity 1 sempre (removida a fade entre adjacentes pra ficar mais limpo) */
.op__slide {
opacity: 1;
transition: none;
}
/* Counter MUDOU pra topo-ESQUERDO (evita sobreposicao com nav direito) */
.op__counter {
top: 18px;
right: auto !important;
left: 18px !important;
}
@media (max-width: 920px) {
.op__counter {
top: 14px;
left: 14px !important;
}
}
@media (max-width: 640px) {
.op__counter {
top: 10px;
left: 10px !important;
}
}