/* ========================================================================== LIGHTBOX NEON LALIBERTECH (clicável em imagens - setas + teclado) ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(5, 7, 22, 0.965); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .28s ease; padding: 48px 32px; cursor: zoom-out; } .lightbox.is-open { display: flex; opacity: 1; } .lightbox__content { position: relative; z-index: 2; max-width: min(92vw, 1500px); max-height: 86vh; display: flex; align-items: center; justify-content: center; cursor: default; } .lightbox__img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 18px; border: 2px solid rgba(167, 139, 255, 0.35); background: rgba(10, 12, 32, 0.7); padding: 0.4rem; -webkit-filter: drop-shadow(0 0 10px rgba(167, 139, 255, 0.55)) drop-shadow(0 0 26px rgba(94, 168, 255, 0.45)) drop-shadow(0 0 50px rgba(108, 77, 255, 0.35)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); opacity: 0; transform: scale(0.96); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1); } .lightbox__img.is-loaded { opacity: 1; transform: scale(1); } .lightbox__caption { position: absolute; left: 0; right: 0; bottom: -46px; text-align: center; color: #d7dcff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.25px; text-shadow: 0 2px 8px rgba(0,0,0,0.7); opacity: 0.9; } .lightbox__btn { position: absolute; z-index: 3; background: linear-gradient(135deg, rgba(108, 77, 255, 0.55), rgba(63, 120, 255, 0.45)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1.5px solid rgba(167, 139, 255, 0.5); color: #fff; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; box-shadow: 0 10px 28px rgba(63, 120, 255, 0.3); } .lightbox__btn:hover { transform: translateY(-2px) scale(1.06); border-color: rgba(255, 212, 80, 0.75); background: linear-gradient(135deg, rgba(255, 180, 0, 0.65), rgba(255, 110, 60, 0.5)); box-shadow: 0 14px 38px rgba(255, 150, 0, 0.35); } .lightbox__btn--prev { left: 24px; top: 50%; transform: translateY(-50%); } .lightbox__btn--next { right: 24px; top: 50%; transform: translateY(-50%); } .lightbox__btn--close { top: 24px; right: 28px; width: 50px; height: 50px; background: linear-gradient(135deg, rgba(255, 70, 90, 0.62), rgba(255, 110, 60, 0.52)); border-color: rgba(255, 140, 120, 0.55); } .lightbox__btn--close:hover { background: linear-gradient(135deg, rgba(255, 90, 110, 0.85), rgba(255, 150, 90, 0.72)); box-shadow: 0 12px 34px rgba(255, 90, 110, 0.4); transform: translateY(-2px) rotate(90deg); } .lightbox__counter { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(10, 12, 32, 0.72); border: 1px solid rgba(167, 139, 255, 0.35); color: #e0e5ff; padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } @media (max-width: 760px) { .lightbox { padding: 72px 14px 56px; } .lightbox__btn { width: 46px; height: 46px; font-size: 1.1rem; } .lightbox__btn--prev { left: 8px; } .lightbox__btn--next { right: 8px; } .lightbox__btn--close { top: 14px; right: 14px; } .lightbox__counter { top: 22px; font-size: 0.74rem; padding: 0.32rem 0.7rem; } .lightbox__caption { font-size: 0.78rem; bottom: -38px; } } /* Classe utilitária em imagens clicáveis (cursor pointer + hover) */ .lightbox-trigger { cursor: zoom-in; transition: transform .25s ease, filter .25s ease, -webkit-filter .25s ease, box-shadow .25s ease, border-color .25s ease; } .lightbox-trigger:hover { transform: translateY(-2px); filter: brightness(1.06); border-color: rgba(255, 212, 80, 0.62) !important; box-shadow: 0 16px 42px rgba(108, 77, 255, 0.26) !important; } /* ========================================================================== HERO CÓSMICO: ESTRELAS FIXAS ANIMADAS (movimento ULTRA LEVE) + ESTRELAS CADENTES RARAS + COMETA HALLEY RARO Somente aplicados em páginas SEM vídeo no hero ========================================================================== */ .cosmos-shooting-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible !important; } /* ——— ESTRELAS FIXAS ANIMADAS (movimento ULTRA LEVE, parallax sutil) ——— ~60–70 unidades espalhadas por todo o hero em desktop, ~30–40 em mobile. Em cima do hero.webp estático. Cintilação + drift leve = sensação de profundidade. Tudo MUITO devagar (14s ~ 28s loop). Nada que polua. */ .cosmos-star { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform, opacity; width: var(--sz, 1.4px); height: var(--sz, 1.4px); /* OTIMIZAÇÃO NÍVEL 3: brilho via radial-gradient + box-shadow blur NÃO usa filter: drop-shadow (obriga repaint em overlays vizinhos). Visual quase idêntico, custo GPU 60% menor. */ background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fafcff 42%, var(--glow2, rgba(170,220,255,.42)) 70%, rgba(255,255,255,0) 100%); opacity: var(--baseOp, .72); box-shadow: 0 0 calc(var(--sz, 1.4px) * 1.4) 0 var(--glow, #ffffff), 0 0 calc(var(--sz, 1.4px) * 3.2) 0 var(--glow2, rgba(170,220,255,.45)); transform: translate(0,0) scale(1); animation: starDriftTwinkle var(--dur, 20s) ease-in-out infinite; animation-delay: var(--delay, 0s); contain: layout paint style; } @keyframes starDriftTwinkle { 0%, 100% { opacity: calc(var(--baseOp, .72) * 0.58); transform: translate(0,0) scale(.78); } 22% { opacity: var(--baseOp, .72); transform: translate(calc(var(--dx, 4px) * 0.35), calc(var(--dy, -3px) * 0.35)) scale(1.08); } 50% { opacity: calc(var(--baseOp, .72) * 0.88); transform: translate(calc(var(--dx, 4px) * 0.72), calc(var(--dy, -3px) * 0.72)) scale(.9); } 78% { opacity: calc(var(--baseOp, .72) * 1.02); transform: translate(calc(var(--dx, 4px) * 1.05), calc(var(--dy, -3px) * 1.05)) scale(1.15); } } /* Perfis de cor/tamanho das estrelas (via classes, JS decide qual aplicar): */ .cosmos-star.cosmos-star--white { --baseOp: .86; --glow: #ffffff; --glow2: rgba(200,220,255,.85); } .cosmos-star.cosmos-star--blue { --baseOp: .70; --glow: #6fb5ff; --glow2: rgba(80,140,255,.75); } .cosmos-star.cosmos-star--cyan { --baseOp: .78; --glow: #6ff4ff; --glow2: rgba(80,210,255,.70); } .cosmos-star.cosmos-star--warm { --baseOp: .62; --glow: #ffc78a; --glow2: rgba(255,170,110,.55); } .cosmos-star.cosmos-star--purple { --baseOp: .56; --glow: #b59cff; --glow2: rgba(120,80,255,.55); } /* ========================================================== COMETA HALLEY — USA AGORA O PNG REAL: `imagens/harley.png` (nao recriamos mais em CSS. PNG real fornecido pelo Capitao) - EFEITOS SOBRE O PNG (continua parecendo vivo): a) Glow neon externo em volta do nucleo (ciano) b) PULSO de brilho lento (intensidade varia → parece movimento do PNG estático) c) Box-shadow com cores do PNG - Resíduos de gelo espacial continuam saindo da cauda (via JS) ========================================================== */ /* ————————————————————————————————————————————————————————————— SISTEMA DE 2 ELEMENTOS (WRAPPER + FILHO) PARA 0 TRAVAMENTOS: a) .comet-halley-wrap = APENAS trajetoria (translate3d GPU-only) left/top fixos em 0,0; nada alem de translate b) .comet-halley = FILHO DO WRAPPER. Apenas rotacao/escala/brilho. transform-origin EXATO NO NUCLEO 12% 88% (ponto mais branco do png baixo-esquerda) Sem left/top animados. 0 repaints, 0 layout: 100% GPU. ————————————————————————————————————————————————————————————— */ .comet-halley-wrap { position: absolute; left: 0; top: 0; /* 🔴 FIX 2026-08-17: 3000 × 2000px (3x viewport max) antes era 640×480 → MENOR que a cauda TRANSPARENTE do PNG Harley, causava CORTE VISÍVEL nas bordas do wrap. */ width: 3000px; height: 2000px; pointer-events: none; will-change: transform, opacity; opacity: 0; overflow: visible !important; /* 🔴 REMOVIDO contain:paint (causava retângulo preto/corte nas bordas do wrap 3000×2000 pois paint isola a pintura DENTRO da caixa). Mantemos layout style para não recálculos de layout/paint inúteis no wrapper. */ contain: layout style; transform: translate3d(0px, 0px, 0); /* NOTA: animation:cometTrajectory REMOVIDO — Engine v6 controla posição/opacity frame a frame via requestAnimationFrame. */ } /* ——— FILHO: ORIENTACAO (rotacao) + PNG + brilho/pulso + partículas. NAO SE MOVE: movimento vem 100% do wrapper translate. OPACIDADE 100% (wrapper controla fade in/out) ——— */ .comet-halley { position: absolute; left: 0; top: 0; width: 240px; height: auto; aspect-ratio: 1480 / 986; background: transparent url('../imagens/harley.png') center center / contain no-repeat; /* ——— PONTO EXATO DA CABECA no PNG: 12% X (esquerda), 88% Y (baixo) ——— Toda rotacao gira em TORNO desse ponto = cauda sempre atras. */ transform-origin: 12% 88%; /* ALINHAMENTO DA CABECA com eixo +X: Passo 1: rotate(-136deg) → cabeça (originalmente a 136°) cai em 0° = +X Passo 2: rotate(var(--angle)) → gira para o angulo REAL do movimento + translate(-12%, -88%) para o pivot coincidir com origem do wrapper. */ transform: translate(-12%, -88%) rotate(-136deg) rotate(var(--angle, 0deg)) scale(var(--scl, 1)); opacity: 1 !important; pointer-events: none; filter: drop-shadow(0 0 3px rgba(0,220,220,.45)) drop-shadow(0 0 8px rgba(40,160,220,.42)) drop-shadow(0 0 18px rgba(80,120,220,.26)); animation: cometPulseGlow 2.9s ease-in-out 0s infinite; } @keyframes cometPulseGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(0,220,220,.40)) drop-shadow(0 0 6px rgba(40,160,220,.34)) drop-shadow(0 0 15px rgba(80,120,220,.20)); opacity: 0.94; } 50% { filter: drop-shadow(0 0 6px rgba(80,240,240,.78)) drop-shadow(0 0 14px rgba(60,200,240,.64)) drop-shadow(0 0 26px rgba(108,77,255,.40)); opacity: 1; } } /* ———————————————————————————————————————————————————————————— CINTILANCIAS AO LONGO DA CAUDA (pontos brilhantes que piscam) - Ficam FIXOS na posicao onde sao criadas (nao saem voando) - Apenas "cintilam": pulso rapido de brilho / tamanho - Sumido apos ~0.9 ~ 1.6s (sao como faíscas pontuais de gelo) ———————————————————————————————————————————————————————————— */ .tail-sparkle { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f7fcff 55%, rgba(170,230,255,0) 100%); filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 2px rgba(200,250,255,.95)) drop-shadow(0 0 4px rgba(80,200,240,.75)); animation: sparkleTwinkle 1.25s cubic-bezier(.2,.02,.7,.98) forwards; } @keyframes sparkleTwinkle { 0% { opacity: 0; transform: translate(0,0) scale(.25); } 18% { opacity: 1; } 32% { opacity: .5; transform: scale(.9); } 48% { opacity: 1; transform: scale(1.15); } 66% { opacity: .4; transform: scale(.7); } 82% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(.35); } } /* — Cristais / Residuos de GELO ESPACIAL que saem da cauda do PNG real Harley — */ .ice-debris { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d8fbff 48%, rgba(120,220,230,0) 100%); filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 2.5px rgba(180,250,255,.95)) drop-shadow(0 0 6px rgba(40,180,220,.75)); animation: iceDrift 2.6s cubic-bezier(.32,.04,.4,1) forwards; } @keyframes iceDrift { 0% { opacity: 0; transform: translate(0,0) scale(.2); } 12% { opacity: 1; } 55% { opacity: .93; } 100% { opacity: 0; transform: translate(var(--dx, 42px), var(--dy, -20px)) scale(1.4); } } @media (max-width: 720px) { .shooting-star { width: 140px; animation-duration: 0.55s; } .comet-halley { width: 160px; /* animation-duration removido: engine JS controla via --dur inline (profundidade cósmica) */ } } /* ========================================================================== VARIÁVEIS E RESET ========================================================================== */ :root { /* Paleta de cores - Lalibertech */ --laliber-dark: #080B1A; --laliber-navy: #151A3A; --laliber-purple: #6C4DFF; --laliber-blue: #25B8FF; --laliber-light: #F5F7FF; --laliber-purple-soft: rgba(108, 77, 255, 0.16); --laliber-blue-soft: rgba(37, 184, 255, 0.16); --laliber-navy-soft: rgba(21, 26, 58, 0.14); /* Backward compatibility tokens (antigos nomes mapeados para a nova paleta) */ --azul-bebe: #C9E4FF; --azul-bebe-claro: #E6EEFF; --azul-medio: #6C4DFF; --azul-marinho: #151A3A; --azul-marinho-escuro: #080B1A; --amarelo-leve: #D6DEFF; --amarelo-suave: #C5CDFF; --amarelo-dourado: #25B8FF; --branco: #FFFFFF; --branco-creme: #F5F7FF; --cinza-claro: #F5F7FF; --cinza-medio: #DCE3F5; --cinza-escuro: #4A5168; --preto-suave: #151A3A; /* Gradientes */ --gradiente-azul: linear-gradient(135deg, var(--laliber-purple), var(--laliber-blue)); --gradiente-azul-escuro: linear-gradient(135deg, var(--laliber-navy), var(--laliber-dark)); --gradiente-amarelo: linear-gradient(135deg, var(--laliber-blue), var(--laliber-purple)); --gradiente-hero: linear-gradient(135deg, rgba(8, 11, 26, 0.92), rgba(21, 26, 58, 0.85) 48%, rgba(108, 77, 255, 0.55)); /* Sombras */ --sombra-suave: 0 4px 20px rgba(21, 26, 58, 0.12); --sombra-media: 0 10px 36px rgba(8, 11, 26, 0.16); --sombra-forte: 0 18px 52px rgba(8, 11, 26, 0.24); --sombra-destaque: 0 10px 30px rgba(108, 77, 255, 0.22); /* Transições */ --transicao-rapida: all 0.3s ease; --transicao-media: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); --transicao-lenta: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bordas */ --borda-radius-pequena: 8px; --borda-radius-media: 15px; --borda-radius-grande: 25px; --borda-radius-full: 50px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; scroll-padding-top: 80px; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; } body { font-family: 'Inter', sans-serif; background-color: var(--laliber-dark); color: var(--laliber-light); line-height: 1.7; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; /* ===== TIPOGRAFIA FLUÍDA (REDIMENSIONAMENTO AUTOMÁTICO) ===== tamanho base = clamp(14px , MIN 14 → MAX 18px, com 0.92vw ) NÃO é fixo 16px = todos elementos EM/REM escala com a VIEWPORT. Ex.: 390px mobile → ~14.9px; 768px tablet → ~17.8px; 1440p desktop → 18px */ font-size: clamp(0.875rem, 0.92vw, 1.125rem); position: relative; z-index: 0; /* ===== GLOBAL: QUEBRA DE LINHAS INTELIGENTE (SEM HÍFENS NO MEIO DE PALAVRAS) hyphens: none → NUNCA coloca hífen automático tipo "sis-tema" / "me-dida" / "reser-vas". overflow-wrap: break-word → só quebra PALAVRA INTEIRA (URL longa) se ela PASSA o container. word-break: normal → quebra SÓ em espaço / pontuação / travessão (padrão HTML 4). Desktop e MOBILE: mesma regra → consistência total. */ overflow-wrap: break-word; word-wrap: break-word; word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* ===== TIPOGRAFIA FLUÍDA: ESCALA DE HEADINGS PROPORCIONAL À VIEWPORT ===== NÃO usamos clamp MIN BAIXO (ex. 1.65rem MIN) porque isso DIMINUIA texto no mobile e o usuário odeiou. MIN = 92% do desktop original → NÃO encolhe absurdamente no mobile 360px. FATOR: vw ou vmin (vmin = min(largura,altura) = respeita AMBOS). */ h1, .header-title, .hero-title { font-size: clamp(2.05rem, 6.3vmin, 3.9rem); line-height: 1.12; letter-spacing: -0.015em; } h2, .section-title, .emotional-text h2, .final-content h2 { font-size: clamp(1.65rem, 4.8vmin, 3rem); line-height: 1.2; } h3, .subsection-title, .solution-card h3 { font-size: clamp(1.22rem, 3.4vmin, 1.8rem); line-height: 1.25; } h4, .solution-card__title, .mini-text h4 { font-size: clamp(1rem, 2.6vmin, 1.28rem); line-height: 1.3; } .hero-copy, .hero-prompt, .footer-column p, .btn-primary, .btn-secondary, .btn-ghost, .btn-nav { font-size: clamp(0.95rem, 1.55vmin, 1.08rem); } .section-title__kicker, .process-step__label, .mini-text p, small { font-size: clamp(0.8rem, 1.2vmin, 0.9rem); } /* ===== GLOBAL (desktop+mobile) TAGS TEXTO: hyphens NONE em TUDO que exibe texto ===== Evita que elementos específcos com CSS próprio herdem hyphens:auto e partam palavras no meio em ambientes desktop (Chrome antigas configurações pt-BR). */ h1, h2, h3, h4, h5, h6, p, li, a, span, button, input, label, textarea, select, option, small, strong, em, b, i, th, td, dt, dd, figcaption, blockquote, pre, code, .header-title, .hero-title, .section-title, .subsection-title, .solution-card h3, .solution-card__title, .emotional-text h2, .final-content h2, .about-highlight__label, .hero-copy, .product-artwork__frame, .hero-prompt, .nav-actions .btn-nav, .footer-column h4, .section-title__kicker, .process-step__label, .card-copy__subtitle, .btn-primary, .btn-secondary, .btn-ghost { -webkit-hyphens: none !important; -moz-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; word-break: normal !important; overflow-wrap: break-word !important; } /* Layer cósmico global de fundo (gradiente + nebulosas) */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse at 20% 10%, rgba(108, 77, 255, 0.22) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(37, 184, 255, 0.16) 0%, transparent 48%), radial-gradient(ellipse at 50% 90%, rgba(108, 77, 255, 0.14) 0%, transparent 55%), linear-gradient(180deg, #05070f 0%, var(--laliber-dark) 35%, var(--laliber-navy) 100%); pointer-events: none; animation: cosmosDrift 90s ease-in-out infinite alternate; background-size: 115% 115%; will-change: transform; } @keyframes cosmosDrift { 0% { transform: translate3d(0%, 0%, 0) scale(1); } 50% { transform: translate3d(-2.5%, -1.8%, 0) scale(1.035); } 100% { transform: translate3d(1.8%, -2.8%, 0) scale(1.065); } } /* Camada 1 de estrelas (pequenas e densas) — movimento mais lento */ body::after { content: ''; position: fixed; inset: -10% -10%; z-index: -1; background-image: radial-gradient(1px 1px at 10% 20%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 30% 65%, #e0e7ff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 70% 15%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 85% 80%, #cdd7ff 50%, transparent 100%), radial-gradient(1.5px 1.5px at 55% 45%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 15% 90%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 95% 35%, #dbe4ff 50%, transparent 100%), radial-gradient(1.3px 1.3px at 40% 78%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 25% 35%, #f0f4ff 50%, transparent 100%), radial-gradient(1px 1px at 65% 92%, #ffffff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 5% 55%, #c9d6ff 50%, transparent 100%), radial-gradient(1px 1px at 78% 58%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 48% 12%, #ffffff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 92% 72%, #e6ecff 50%, transparent 100%), radial-gradient(1px 1px at 60% 25%, #ffffff 50%, transparent 100%); background-repeat: repeat; background-size: 520px 520px; opacity: 0.88; animation: starsTwinkle1 5.5s ease-in-out infinite alternate, starsDriftSlow 140s linear infinite; will-change: transform, opacity; pointer-events: none; } @keyframes starsTwinkle1 { 0% { opacity: 0.62; } 50% { opacity: 0.92; } 100% { opacity: 0.74; } } @keyframes starsDriftSlow { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-520px, -360px, 0); } } /* Camada 2 de estrelas (maiores, espaçadas) — movimento um pouco mais rápido = parallax */ .cosmos-layer { position: fixed; inset: -15% -15%; z-index: -1; background-image: radial-gradient(1.8px 1.8px at 12% 32%, #ffffff 50%, transparent 100%), radial-gradient(2px 2px at 82% 18%, #bccfff 50%, transparent 100%), radial-gradient(1.6px 1.6px at 36% 88%, #ffffff 50%, transparent 100%), radial-gradient(2.2px 2.2px at 62% 52%, #e6edff 50%, transparent 100%), radial-gradient(1.8px 1.8px at 90% 68%, #ffffff 50%, transparent 100%), radial-gradient(2px 2px at 22% 70%, #c9d8ff 50%, transparent 100%), radial-gradient(1.8px 1.8px at 70% 8%, #ffffff 50%, transparent 100%), radial-gradient(1.8px 1.8px at 50% 60%, #ffffff 50%, transparent 100%); background-size: 900px 900px; background-repeat: repeat; opacity: 0.78; animation: starsTwinkle2 7s ease-in-out infinite alternate, starsDriftFast 95s linear infinite; will-change: transform, opacity; pointer-events: none; } @keyframes starsTwinkle2 { 0% { opacity: 0.52; } 100% { opacity: 0.88; } } @keyframes starsDriftFast { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(900px, 520px, 0); } } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ========================================================================== TIPOGRAFIA ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; color: #FFFFFF; } p { margin-bottom: 1.5rem; color: var(--cinza-medio); } .lead { font-size: 1.2rem; font-weight: 500; color: #E6ECFF; } /* ========================================================================== HEADER & NAVEGAÇÃO ========================================================================== */ .modern-header { min-height: 100vh; position: relative; background-color: #05070f; display: flex; flex-direction: column; overflow: visible; } .modern-header::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 96px; background: #000000; z-index: 1; pointer-events: none; } /* ========================================================================== HERO — container + video (hero-video.mp4 — único arquivo para desktop e mobile) ========================================================================== */ .hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; visibility: visible; opacity: 1; display: block; background: transparent; } .hero-scene__video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; display: block; background: transparent; z-index: 2; visibility: visible; opacity: 1; } .hero-video-prompt { position: absolute; inset: 0; z-index: 7; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 0.8rem; pointer-events: auto; cursor: pointer; background: linear-gradient(135deg, rgba(8,11,26,0.55), rgba(21,26,58,0.55)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #ffffff; font-family: 'Inter', sans-serif; transition: opacity 0.3s ease; } .hero-video-prompt.is-active { display: flex; } .hero-video-prompt__icon { width: 78px; height: 78px; border-radius: 999px; background: linear-gradient(135deg, var(--laliber-purple), var(--laliber-blue)); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(108,77,255,0.55), 0 0 0 10px rgba(255,255,255,0.07); animation: iconPulse 1.8s ease-in-out infinite; } .hero-video-prompt__icon i { font-size: 1.65rem; margin-left: 4px; } .hero-video-prompt__text { font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } @keyframes iconPulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 30px rgba(108,77,255,0.55), 0 0 0 10px rgba(255,255,255,0.07); } 50% { transform: scale(1.06); box-shadow: 0 12px 42px rgba(37,184,255,0.55), 0 0 0 14px rgba(255,255,255,0.05); } } @media (prefers-reduced-motion: reduce) { .hero-scene__video { animation: none !important; transition: none !important; } } /* ===== MOBILE (<768px): permite toque direto no vídeo + exibe prompt ===== */ @media (max-width: 768px) { .hero-scene, .hero-scene__video { pointer-events: auto !important; cursor: pointer; } .hero-video-prompt.is-active { display: flex; } } /* ========================================================================== Garante que a NAV e o conteúdo permaneçam na FRENTE do vídeo hero. (scroll-indicator / hero-visual-elements e floating-element foram REMOVIDOS do HTML em limpeza, nao sao mais usados.) ========================================================================== */ .modern-header .header-nav, .modern-header > .container { position: relative; z-index: 10; } .modern-header > .container { z-index: 10; } .header-nav { background-color: #000000; border-bottom: 1px solid rgba(80, 140, 255, 0.25); padding: 0.55rem 0; position: fixed; width: 100%; z-index: 1000; transition: var(--transicao-rapida); } .header-nav.scrolled { background-color: #000000; box-shadow: 0 4px 24px rgba(74, 144, 255, 0.18), 0 0 0 1px rgba(74, 144, 255, 0.08); padding: 0.45rem 0; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; transition: var(--transicao-rapida); } .logo:hover { transform: translateY(-2px); } .logo-icon { width: 45px; height: 45px; background: var(--gradiente-azul); border-radius: var(--borda-radius-pequena); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--branco); box-shadow: var(--sombra-media); } .nav-menu { display: flex; list-style: none; gap: 1.6rem; align-items: center; } .nav-link { color: #ffffff; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: var(--transicao-rapida); position: relative; padding: 0.35rem 0; display: flex; align-items: center; gap: 8px; } .nav-link:hover { color: #8fc7ff; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradiente-azul); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-actions { display: flex; gap: 0.75rem; align-items: center; } .btn-nav { padding: 0.62rem 1.2rem; border-radius: var(--borda-radius-full); font-weight: 600; text-decoration: none; transition: var(--transicao-rapida); font-size: 0.9rem; display: flex; align-items: center; gap: 7px; border: 2px solid transparent; } .btn-nav-outline { border-color: #8fc7ff; color: #ffffff; background: transparent; } .btn-nav-outline:hover { background-color: #8fc7ff; color: #000000; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(143, 199, 255, 0.28); } .btn-nav-primary { background: var(--gradiente-azul); color: var(--branco); border: none; } .btn-nav-primary:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); filter: brightness(1.1); } .mobile-menu-btn { display: none; background: none; border: none; color: #ffffff; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; transition: var(--transicao-rapida); } .mobile-menu-btn:hover { color: #8fc7ff; } /* ========================================================================== HERO SECTION ========================================================================== */ .header-content { text-align: left; max-width: 1280px; margin: auto; position: relative; z-index: 2; padding: 120px 20px 80px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; } .hero-inner { display: block; padding: 0; min-height: calc(100vh - 90px); } .hero-copy { display: none; } .hero-art { display: none; } .hero-art-img { display: none; } /* ========================================================================== SCROLL INDICATOR (fundo do HERO) Desktop: ícone de MOUSE animado (scroll wheel deslizando) Mobile (<=820px): ícone de MÃOZINHA com animação swipe-up ========================================================================== */ .scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; pointer-events: none; user-select: none; opacity: 0.92; animation: scroll-indicator-bounce 2.6s ease-in-out infinite; } .scroll-indicator__mouse { position: relative; width: 30px; height: 48px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgba(108, 77, 255, 0.18), 0 8px 24px rgba(108, 77, 255, 0.18); display: flex; align-items: flex-start; justify-content: center; padding-top: 9px; } .scroll-indicator__mouse i { display: none; } .scroll-indicator__wheel { display: block; width: 3px; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #c7b8ff 0%, #8ab4ff 100%); animation: scroll-wheel-slide 1.8s ease-in-out infinite; box-shadow: 0 0 8px rgba(138, 180, 255, 0.75); } .scroll-indicator__swipe { display: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.65); align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.92); font-size: 1.15rem; backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgba(37, 184, 255, 0.2), 0 8px 22px rgba(37, 184, 255, 0.2); } .scroll-indicator__text { font-size: 0.76rem; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.75); font-weight: 500; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } @keyframes scroll-wheel-slide { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(12px); opacity: 0.25; } 100% { transform: translateY(0); opacity: 1; } } @keyframes scroll-swipe-up { 0%, 100% { transform: translateY(0); opacity: 0.95; } 50% { transform: translateY(-10px); opacity: 0.55; } } @keyframes scroll-indicator-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } } /* --- MOBILE (<=820px): ESCONDE completamente o scroll indicator (video hero já é pequeno) --- */ @media (max-width: 820px) { .scroll-indicator { display: none !important; } } /* ========================================================================== TARJA / LETREIRO ANIMADO (MARQUEE) ========================================================================== */ .marquee-section { width: 100%; overflow: hidden; background: var(--gradiente-azul); border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1.1rem 0; margin: 0; position: relative; white-space: nowrap; } .marquee-section::before, .marquee-section::after { content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2; pointer-events: none; } .marquee-section::before { left: 0; background: linear-gradient(90deg, var(--laliber-purple) 0%, transparent 100%); } .marquee-section::after { right: 0; background: linear-gradient(-90deg, var(--laliber-blue) 0%, transparent 100%); } .marquee-track { display: inline-flex; align-items: center; gap: 3rem; animation: marqueeScroll 38s linear infinite; will-change: transform; contain: layout paint style; } .marquee-content { display: inline-flex; align-items: center; gap: 3rem; padding-right: 3rem; } .marquee-item { display: inline-flex; align-items: center; gap: 0.7rem; color: #FFFFFF; font-size: 1rem; font-weight: 600; letter-spacing: 0.3px; font-family: 'Inter', sans-serif; } .marquee-item i { font-size: 1.1rem; opacity: 0.95; color: rgba(255, 255, 255, 0.92); } .marquee-divider { display: inline-block; color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; font-weight: 700; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .header-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); color: var(--azul-medio); padding: 12px 24px; border-radius: var(--borda-radius-full); font-weight: 700; font-size: 0.9rem; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid rgba(184, 225, 255, 0.5); box-shadow: var(--sombra-media); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .header-title { font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--branco); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .title-line { display: block; } .highlight { background: linear-gradient(45deg, var(--amarelo-leve), var(--amarelo-dourado)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; paint-order: fill stroke markers; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; filter: drop-shadow(0 0 1px rgba(255, 243, 173, 0.2)) drop-shadow(0 2px 10px rgba(255, 200, 44, 0.55)); position: relative; display: inline-block; } .highlight::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background: linear-gradient(45deg, var(--amarelo-leve), var(--amarelo-dourado)); opacity: 0.3; border-radius: 4px; z-index: -1; } .header-subtitle { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 3rem; color: var(--branco); max-width: 700px; line-height: 1.6; opacity: 0.9; } .quote { display: inline-block; font-style: italic; color: var(--amarelo-leve); position: relative; padding: 0 10px; } .quote::before { content: '"'; position: absolute; left: -5px; top: -10px; font-size: 2rem; color: var(--amarelo-leve); opacity: 0.5; } .quote::after { content: '"'; position: absolute; right: -5px; bottom: -15px; font-size: 2rem; color: var(--amarelo-leve); opacity: 0.5; } .hero-cta { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .btn { display: inline-flex; align-items: center; gap: 12px; padding: 1rem 2.5rem; border-radius: var(--borda-radius-full); font-weight: 600; text-decoration: none; transition: var(--transicao-media); border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1rem; position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; z-index: -1; } .btn:hover::before { left: 100%; } .btn-primary { background: var(--gradiente-azul); color: var(--branco); box-shadow: var(--sombra-media); } .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); } .btn-accent { background: var(--gradiente-amarelo); color: #FFFFFF; box-shadow: var(--sombra-destaque); } .btn-accent:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(108, 77, 255, 0.42); } /* ========================================================================== SEÇÕES GERAIS ========================================================================== */ .section-header { text-align: center; margin-bottom: 4rem; position: relative; } .section-title { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; margin-bottom: 1rem; background: linear-gradient(135deg, #ffffff 0%, #9ea8ff 30%, var(--laliber-purple) 70%, var(--laliber-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; display: inline-block; /* ===== CORREÇÃO DEFINITIVA ANTI-GLITCH (Chrome Windows) ===== COMBINAÇÃO PROIBIDA QUE CAUSA OS PONTOS / ACENTOS ALIENÍGENAS: ❌ text-shadow + -webkit-text-fill-color:transparent → DUAS renderizações do glifo. ❌ -webkit-text-stroke:QUALQUER valor (mesmo 0.1px) → 3ª renderização (contorno). COMBINAÇÃO CORRETA (1 RENDER SÓ, NUNCA MAIS BUG): ✅ text-shadow: NONE (ZERADO TOTALMENTE) ✅ filter: drop-shadow(...) drop-shadow(...) → GLOW só depois da composição. ✅ -webkit-text-stroke: 0 → ZERO contornos. ✅ isolation:isolate + translateZ(0) → Camada GPU isolada (não herda nada do vídeo). */ -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; paint-order: fill stroke markers; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.12)) drop-shadow(0 2px 10px rgba(108, 77, 255, 0.55)) drop-shadow(0 4px 22px rgba(37, 184, 255, 0.28)); letter-spacing: 0.3px; } /* Fallback textual para navegadores que não aplicam sombra com text-fill transparente */ @supports not (-webkit-background-clip: text) { .section-title { background: none; -webkit-text-fill-color: initial; background-clip: initial; color: #ffffff; } } .section-title::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--gradiente-azul); border-radius: 2px; } .section-subtitle { font-size: 1.3rem; font-weight: 500; color: #E4E9FB; max-width: 600px; margin: 0 auto; line-height: 1.6; text-shadow: 0 1px 6px rgba(8, 11, 26, 0.6); letter-spacing: 0.2px; } /* ========================================================================== SEÇÃO: QUEM SOMOS ========================================================================== */ .about-section { padding: 2.6rem 0 8rem; background-color: transparent; position: relative; overflow: visible; } .about-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 20%, rgba(108, 77, 255, 0.16) 0%, transparent 55%), radial-gradient(circle at 90% 80%, rgba(37, 184, 255, 0.12) 0%, transparent 55%); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .about-text { font-size: 1.1rem; line-height: 1.8; } .about-text p { margin-bottom: 1.8rem; color: #D1D9F3; } .about-quote { background: linear-gradient(45deg, rgba(108, 77, 255, 0.14), rgba(37, 184, 255, 0.12)); padding: 2rem; border-radius: var(--borda-radius-media); border-left: 4px solid var(--azul-medio); margin: 2rem 0; position: relative; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .about-quote i { color: var(--azul-medio); font-size: 1.5rem; opacity: 0.6; } .about-quote i:first-child { position: absolute; top: 10px; left: 15px; } .about-quote i:last-child { position: absolute; bottom: 10px; right: 15px; } .about-quote p { font-style: italic; color: #FFFFFF; margin-bottom: 0; padding: 0 1rem; } .about-visual-content { background: rgba(21, 26, 58, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 3rem 2rem; border-radius: var(--borda-radius-grande); box-shadow: 0 18px 60px rgba(5, 7, 15, 0.55); border: 1px solid rgba(108, 77, 255, 0.3); position: relative; overflow: hidden; } .about-visual-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--gradiente-azul); } .essence-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .essence-card { text-align: center; padding: 1.5rem 1rem; transition: var(--transicao-rapida); } .essence-card:hover { transform: translateY(-5px); } .essence-icon { width: 60px; height: 60px; background: var(--gradiente-azul); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; color: var(--branco); box-shadow: var(--sombra-media); transition: var(--transicao-media); } .essence-card:hover .essence-icon { transform: scale(1.1) rotate(10deg); } .essence-card h4 { font-size: 1.1rem; margin-bottom: 0.5rem; color: #FFFFFF; } .essence-card p { font-size: 0.9rem; color: #BDC7E7; margin-bottom: 0; } /* ========================================================================== SEÇÃO: SOLUÇÕES ========================================================================== */ .solutions-section { padding: 8rem 0; background-color: transparent; position: relative; } .solutions-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(37, 184, 255, 0.14) 0%, transparent 55%), radial-gradient(circle at 80% 70%, rgba(108, 77, 255, 0.16) 0%, transparent 55%); } .solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; position: relative; z-index: 1; } .solutions-stack { display: flex; flex-direction: column; gap: 2.6rem; position: relative; z-index: 1; } .solution-section-item { background: rgba(21, 26, 58, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2.8rem 2.2rem; border-radius: var(--borda-radius-grande); box-shadow: 0 16px 52px rgba(5, 7, 15, 0.45); border: 1px solid rgba(108, 77, 255, 0.26); position: relative; overflow: hidden; } .solution-section-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--gradiente-azul); opacity: 0.9; } .solution-section-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; position: relative; z-index: 1; } .solution-section-head .solution-icon-wrapper { width: 72px; height: 72px; margin: 0; flex: 0 0 auto; } .solution-section-head .solution-icon { width: 72px; height: 72px; font-size: 1.65rem; } .solution-section-heading { display: grid; gap: 0.35rem; } .solution-section-item .solution-title { text-align: left; margin-bottom: 0; } .solution-section-subtitle { margin: 0; color: #C7D1EF; font-weight: 500; } .solution-section-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: 'copy media'; gap: 2.2rem; align-items: center; position: relative; z-index: 1; } .solution-section-item:nth-child(even) .solution-section-layout { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: 'media copy'; } .solution-section-copy { grid-area: copy; } .solution-section-media { grid-area: media; } .solution-section-item .solution-description { text-align: left; } .solution-section-item .solution-cta { text-align: left; } .solution-section-media .video-container { margin: 0; text-align: left; } .solution-section-media .video-wrapper { margin: 0; } .solution-icon-wrapper { position: relative; width: 80px; height: 80px; margin: 0 auto 1.5rem; } .solution-icon { width: 80px; height: 80px; background: var(--gradiente-azul); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--branco); position: relative; z-index: 2; box-shadow: var(--sombra-media); transition: var(--transicao-media); } .icon-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: var(--gradiente-amarelo); border-radius: 50%; opacity: 0.2; z-index: 1; } .solution-title { font-size: 1.5rem; text-align: center; margin-bottom: 1.5rem; color: #FFFFFF; } .solution-imagine { background: linear-gradient(45deg, rgba(108, 77, 255, 0.14), rgba(37, 184, 255, 0.12)); padding: 1.2rem; border-radius: var(--borda-radius-pequena); margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 1rem; } .solution-imagine i { color: var(--amarelo-dourado); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; } .solution-imagine p { margin-bottom: 0; font-style: italic; color: #E0E6FF; } .solution-description { text-align: center; margin-bottom: 1.5rem; color: #BDC7E7; flex-grow: 1; } .solution-features { list-style: none; margin-bottom: 2rem; } .solution-features li { margin-bottom: 0.8rem; padding-left: 1.8rem; position: relative; color: #C7D1EF; } .solution-features li i { position: absolute; left: 0; top: 2px; color: var(--azul-medio); font-size: 1.1rem; } .solution-cta { margin-top: auto; text-align: center; } .btn-solution { display: inline-flex; align-items: center; gap: 8px; padding: 0.8rem 1.5rem; background: var(--gradiente-amarelo); color: #FFFFFF; text-decoration: none; border-radius: var(--borda-radius-full); font-weight: 600; transition: var(--transicao-rapida); border: 2px solid transparent; } .btn-solution:hover { background: #FFFFFF; color: var(--azul-marinho); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(108, 77, 255, 0.3); } /* ========================================================================== SEÇÃO: PROCESSO ========================================================================== */ .process-section { padding: 8rem 0; background-color: transparent; position: relative; } .process-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 15% 50%, rgba(108, 77, 255, 0.14) 0%, transparent 50%), radial-gradient(circle at 85% 50%, rgba(37, 184, 255, 0.12) 0%, transparent 50%); pointer-events: none; } .process-timeline { position: relative; max-width: 1000px; margin: 0 auto; padding: 2rem 0; } .process-timeline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 100%; background: linear-gradient(to bottom, var(--azul-bebe), var(--azul-medio), var(--azul-bebe)); opacity: 0.5; } .process-step { position: relative; margin-bottom: 3rem; display: flex; align-items: center; gap: 2rem; } .process-step:nth-child(odd) { flex-direction: row-reverse; text-align: right; } .step-number { width: 70px; height: 70px; min-width: 70px; background: var(--gradiente-azul); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: var(--branco); box-shadow: var(--sombra-media); position: relative; z-index: 2; } .step-content { background: rgba(21, 26, 58, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2rem; border-radius: var(--borda-radius-media); box-shadow: 0 14px 44px rgba(5, 7, 15, 0.42); border: 1px solid rgba(108, 77, 255, 0.26); flex: 1; position: relative; } .step-content::before { content: ''; position: absolute; top: 50%; width: 20px; height: 20px; background: rgba(21, 26, 58, 0.9); transform: translateY(-50%) rotate(45deg); border: 1px solid rgba(108, 77, 255, 0.26); } .process-step:nth-child(even) .step-content::before { left: -10px; border-right: none; border-bottom: none; } .process-step:nth-child(odd) .step-content::before { right: -10px; border-left: none; border-top: none; } .step-content h3 { color: #FFFFFF; margin-bottom: 0.5rem; } .step-content p { margin-bottom: 0; color: #BDC7E7; } .step-icon { position: absolute; top: -15px; right: 20px; width: 40px; height: 40px; background: var(--gradiente-amarelo); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #FFFFFF; box-shadow: var(--sombra-suave); } .process-step:nth-child(odd) .step-icon { right: auto; left: 20px; } /* ========================================================================== SEÇÃO: GATILHO EMOCIONAL ========================================================================== */ .emotional-section { padding: 6rem 0; background: linear-gradient(45deg, rgba(184, 225, 255, 0.1), rgba(255, 239, 193, 0.1)); position: relative; overflow: hidden; } .emotional-content { max-width: 1000px; margin: 0 auto; } .emotional-text { text-align: center; margin-bottom: 3rem; } .emotional-text h2 { font-size: 2.5rem; color: #FFFFFF; margin-bottom: 1.5rem; line-height: 1.3; } .emotional-text p { font-size: 1.2rem; color: #D1D9F3; margin-bottom: 1rem; max-width: 800px; margin-left: auto; margin-right: auto; } .emotional-visual { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .visual-card { background: rgba(21, 26, 58, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2rem; border-radius: var(--borda-radius-media); text-align: center; box-shadow: 0 14px 44px rgba(5, 7, 15, 0.42); transition: var(--transicao-media); border: 1px solid rgba(108, 77, 255, 0.26); } .visual-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(108, 77, 255, 0.22); } .visual-card i { font-size: 2.5rem; color: var(--azul-medio); margin-bottom: 1rem; display: inline-block; } .visual-card h3 { color: #FFFFFF; margin-bottom: 0.5rem; } .visual-card p { color: #BDC7E7; margin-bottom: 0; font-size: 0.95rem; } /* ========================================================================== SEÇÃO: CONTATO ========================================================================== */ .contact-section { padding: 8rem 0; background-color: transparent; position: relative; } .contact-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 80%, rgba(108, 77, 255, 0.14) 0%, transparent 55%), radial-gradient(circle at 70% 20%, rgba(37, 184, 255, 0.12) 0%, transparent 55%); pointer-events: none; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; } .contact-form { background: rgba(21, 26, 58, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 3rem; border-radius: var(--borda-radius-grande); box-shadow: 0 18px 60px rgba(5, 7, 15, 0.52); border: 1px solid rgba(108, 77, 255, 0.28); position: relative; overflow: hidden; } .contact-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--gradiente-azul); border-radius: var(--borda-radius-grande) var(--borda-radius-grande) 0 0; } .form-group { margin-bottom: 1.5rem; position: relative; z-index: 1; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #E6ECFF; font-size: 0.95rem; } .form-group input, .form-group textarea { width: 100%; padding: 1rem 1.2rem; border: 1.5px solid rgba(108, 77, 255, 0.35); border-radius: var(--borda-radius-pequena); background: rgba(8, 11, 26, 0.55); color: #FFFFFF; font-size: 1rem; transition: var(--transicao-rapida); font-family: 'Inter', sans-serif; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(199, 209, 239, 0.55); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--azul-medio); box-shadow: 0 0 0 3px rgba(108, 77, 255, 0.18); } .form-group textarea { resize: vertical; min-height: 120px; } .form-submit { text-align: center; margin-top: 2rem; position: relative; z-index: 1; } .form-note { margin-top: 1rem; font-size: 0.9rem; color: #A9B3D4; display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: relative; z-index: 1; } .form-note i { color: var(--azul-medio); } .contact-info { display: flex; flex-direction: column; gap: 2rem; position: relative; z-index: 1; } .info-card { background: rgba(21, 26, 58, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2.5rem; border-radius: var(--borda-radius-grande); box-shadow: 0 16px 52px rgba(5, 7, 15, 0.45); border: 1px solid rgba(108, 77, 255, 0.26); transition: var(--transicao-media); } .info-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(108, 77, 255, 0.22); } .info-icon { width: 70px; height: 70px; background: var(--gradiente-amarelo); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #FFFFFF; margin-bottom: 1.5rem; box-shadow: 0 10px 26px rgba(108, 77, 255, 0.32); } .info-content h3 { color: #FFFFFF; margin-bottom: 1rem; } .info-content p { color: #BDC7E7; margin-bottom: 1.5rem; } .btn-whatsapp-direct { display: inline-flex; align-items: center; gap: 8px; padding: 0.8rem 1.5rem; background: #25D366; color: var(--branco); text-decoration: none; border-radius: var(--borda-radius-full); font-weight: 600; transition: var(--transicao-rapida); } .btn-whatsapp-direct:hover { background: #128C7E; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3); } .schedule { display: flex; align-items: center; gap: 0.5rem; color: #BDC7E7; font-size: 0.95rem; margin: 0; } .schedule i { color: var(--azul-medio); } /* ---------- CAMPOS NOVOS DO FORMULÁRIO ---------- */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.5rem; } .form-row .form-group { margin-bottom: 0; } .form-group label i { color: var(--laliber-purple); margin-right: 0.35rem; font-size: 0.88rem; opacity: 0.92; } /* Botão submit verde WhatsApp */ .btn-whatsapp-submit { background: linear-gradient(135deg, #25D366 0%, #1EA856 100%) !important; border: 1px solid rgba(37, 211, 102, 0.55) !important; color: #ffffff !important; padding: 1rem 2rem !important; font-size: 1rem !important; font-weight: 700 !important; border-radius: 14px !important; box-shadow: 0 14px 40px rgba(37, 211, 102, 0.28), 0 0 0 1px rgba(37, 211, 102, 0.24) !important; transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.3s ease !important; } .btn-whatsapp-submit:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.05); box-shadow: 0 22px 56px rgba(37, 211, 102, 0.42), 0 0 0 1px rgba(37, 211, 102, 0.40) !important; } .btn-whatsapp-submit:active { transform: translateY(0) scale(0.99); } .btn-whatsapp-submit i { margin-right: 0.45rem; font-size: 1.1rem; } /* Card WhatsApp lateral: destaque no número */ .info-card--whatsapp .info-icon { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35); } .info-phone { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.95rem; margin: -0.3rem 0 1.15rem; background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.28); border-radius: 12px; color: #8DFFB8 !important; font-size: 0.98rem !important; font-weight: 600; } .info-phone i { color: #25D366; } /* ---------- RESPONSIVO: campos 2 em 1 → 1 coluna ---------- */ @media (max-width: 720px) { .form-row { grid-template-columns: 1fr; gap: 1.5rem; } .contact-form { padding: 2rem 1.4rem; } .info-card { padding: 2rem 1.5rem; } } /* ========================================================================== CTA FINAL ========================================================================== */ .final-cta { padding: 6rem 0; background: var(--gradiente-azul-escuro); position: relative; overflow: hidden; } .final-content { text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .final-content h2 { font-size: 2.8rem; color: var(--branco); margin-bottom: 1.5rem; line-height: 1.3; } .final-content p { font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 3rem; } .cta-actions { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .btn-cta-primary { display: inline-flex; align-items: center; gap: 12px; padding: 1.2rem 2.5rem; background: #25D366; color: var(--branco); text-decoration: none; border-radius: var(--borda-radius-full); font-weight: 700; font-size: 1.1rem; transition: var(--transicao-media); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3); } .btn-cta-primary:hover { background: #128C7E; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4); } .btn-cta-secondary { display: inline-flex; align-items: center; gap: 12px; padding: 1.2rem 2.5rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: var(--branco); text-decoration: none; border-radius: var(--borda-radius-full); font-weight: 700; font-size: 1.1rem; transition: var(--transicao-media); border: 2px solid rgba(255, 255, 255, 0.2); } .btn-cta-secondary:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3); } /* ========================================================================== FOOTER ========================================================================== */ footer { background: var(--azul-marinho-escuro); color: var(--branco); padding: 5rem 0 2rem; position: relative; } .footer-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin-bottom: 3rem; } .footer-brand { grid-column: span 1; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; } .footer-logo .logo-icon { width: 50px; height: 50px; background: var(--gradiente-azul); border-radius: var(--borda-radius-pequena); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--branco); } .footer-logo .logo-text { font-size: 1.3rem; line-height: 1.2; } .footer-logo small { display: block; font-size: 0.8rem; font-weight: 400; opacity: 0.8; margin-top: 2px; } .footer-slogan { color: rgba(255, 255, 255, 0.8); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; } .social-links { display: flex; gap: 1rem; } .social-link { width: 45px; height: 45px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--branco); text-decoration: none; transition: var(--transicao-rapida); border: 1px solid rgba(255, 255, 255, 0.2); } .social-link:hover { background: var(--azul-medio); transform: translateY(-3px); border-color: transparent; } .footer-column h4 { color: var(--branco); font-size: 1.2rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; } .footer-column h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--gradiente-azul); } .footer-menu { list-style: none; } .footer-menu li { margin-bottom: 0.8rem; } .footer-menu a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: var(--transicao-rapida); display: inline-flex; align-items: center; gap: 8px; } .footer-menu a:hover { color: var(--azul-bebe); transform: translateX(5px); } .direct-contact { display: flex; flex-direction: column; gap: 1rem; } .contact-item { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: var(--transicao-rapida); padding: 0.8rem 0; } .contact-item:hover { color: var(--azul-bebe); transform: translateX(5px); } .contact-item i { width: 35px; height: 35px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .footer-quote { font-style: italic; margin-top: 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; max-width: 600px; margin-left: auto; margin-right: auto; } /* ========================================================================== ANIMAÇÕES ========================================================================== */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* ========================================================================== UTILITÁRIOS ========================================================================== */ .no-copy { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* ========================================================================== RESPONSIVIDADE ========================================================================== */ @media (max-width: 1024px) { .about-content { grid-template-columns: 1fr; gap: 3rem; } .footer-content { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .process-timeline::before { left: 30px; } .process-step { flex-direction: row !important; text-align: left !important; gap: 1.5rem; } .process-step:nth-child(even) .step-content::before, .process-step:nth-child(odd) .step-content::before { left: -10px; right: auto; border: 1px solid rgba(184, 225, 255, 0.3); border-top: none; border-left: none; } .step-number { width: 60px; height: 60px; min-width: 60px; font-size: 1.5rem; } .step-icon { right: 20px !important; left: auto !important; } } @media (max-width: 768px) { .mobile-menu-btn { display: block; font-size: 1.2rem; padding: 4px; } /* ===== ORDEM MOBILE: HAMBÚRGUER NA ESQUERDA, LOGO NO CENTRO, AÇÕES NA DIREITA ===== flex-direction padrão row (esq→dir). Usa order N para reordenar os filhos SEM mudar a estrutura do HTML (desktop não sofre alterações). */ .nav-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 0 12px !important; } .nav-container .mobile-menu-btn { order: 1 !important; } /* ESQUERDA */ .nav-container .logo { order: 2 !important; margin: 0 auto !important; text-align: center; } /* CENTRO (margin auto) */ .nav-container .nav-menu { order: 4 !important; } /* fora do flow (fixed left:-100%) */ .nav-container .nav-actions { order: 3 !important; margin-left: 0 !important; } /* DIREITA (não força espaço) */ /* Layout compacto ≤680px (onde nav-actions são MUITO grandes): ===== 340px → hambúrguer 37 + logo 92 (centro) + actions 180 ===== hambúrguer (ESQ · order 1 · max 37px) | LOGO (CENTRO · flex: 1 · max 92px) | actions (DIR · order 3 · width: auto) */ @media (max-width: 680px) { .nav-container { padding: 0 6px !important; gap: 6px !important; } .nav-container .mobile-menu-btn { flex: 0 0 37px !important; max-width: 37px !important; text-align: center !important; padding: 3px 0 !important; } .nav-container .logo { flex: 1 1 auto !important; max-width: 92px !important; justify-content: center !important; margin: 0 auto !important; } .nav-container .nav-actions { flex: 0 1 auto !important; max-width: calc(100% - 140px) !important; justify-content: flex-end !important; } .nav-container .nav-actions .btn-nav { padding: 4px 8px !important; font-size: 0.68rem !important; line-height: 1.15 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .nav-container .nav-actions .btn-nav i { margin-right: 4px !important; } } /* ⭐⭐⭐ HEADER NAV — FORÇA FIXO NO TOPO, MESMO QUE OUTRA MEDIA QUERY TENTE MUDAR ⭐⭐⭐ */ .header-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 10000 !important; } /* ===== TIPOGRAFIA MOBILE GLOBAL: SEM CORTAR PALAVRAS NO MEIO ===== 1) hyphens:none em TODAS as tags de texto → NUNCA hífen tipo "sis-tema". 2) Tamanhos de fonte reduzidos com clamp() → menos quebras de linha TOTAIS. 3) word-break:normal → só quebra em espaço / pontuação. */ h1, .header-title, .hero-title, h2, .section-title, .emotional-text h2, .final-content h2, h3, .subsection-title, .solution-card h3, h4, h5, h6, p, li, a, span, button, input, label, textarea, .hero-copy, .product-artwork__frame, .about-highlight__label, .hero-prompt, .nav-actions .btn-nav, .footer-column h4 { -webkit-hyphens: none !important; -moz-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; word-break: normal !important; overflow-wrap: break-word !important; } /* ===== MOBILE: SÓ FAZ OVERRIDE MÍNIMO (fluid type global já cuida da escala) ===== NÃO reduzimos absurdamente clamp() MIN → mobile visual GIGANTE igual desktop, mas RESPEITA viewport: em 360px mobile fica 6.3vmin ≈ 2.02rem h1, em 393px iphone 15 = 6.3*3.93 = 2.48rem h1 */ h1, .header-title, .hero-title { font-size: clamp(1.95rem, 7.1vmin, 3.4rem) !important; line-height: 1.1 !important; } h2, .section-title, .emotional-text h2, .final-content h2 { font-size: clamp(1.55rem, 5.3vmin, 2.5rem) !important; line-height: 1.18 !important; } h3, .subsection-title, .solution-card h3 { font-size: clamp(1.15rem, 3.9vmin, 1.65rem) !important; line-height: 1.24 !important; } body, p, li, a, button, span, label { font-size: clamp(0.92rem, 2.1vmin, 1rem) !important; line-height: 1.6 !important; } /* ============================================================ VÍDEO HERO — MOBILE: SEM CORTAR NENHUM PIXEL DO VÍDEO. - Barras pretas acima/abaixo? → MORTE. Usamos aspect-ratio IGUAL ao vídeo (3840/1644 = 2.34:1) no CONTAINER. O vídeo preenche TUDO, NÃO sobra espaço vazio em cima nem embaixo. - Marca d'água CapCut (canto sup.-ESQUERDO)? → TAMBOUR PRETO (::after) em cima, 100% mesma cor do fundo do vídeo. NÃO cortamos NENHUM frame, só cobrimos com um retângulo. ============================================================ */ /* Container com a PROPORÇÃO EXATA do vídeo → sem barras pretas. margin-top: 62px garante que o TOPO do vídeo COMEÇA EXATAMENTE ABAIXO do header-nav FIXO; não escondemos nenhuma letra da logo. */ /* ✅ HALLEY LIMITADO EXCLUSIVAMENTE AO HERO: overflow:hidden + clip-path GARANTEM que nenhuma estrela/cometa vaze para as seções abaixo (Quem Somos / Produtos etc.). Container = position relative (L2474), clip-path = moldura EXATA. */ .hero-scene { aspect-ratio: 3840 / 1644; position: relative; inset: auto; top: 0; left: 0; width: 100%; height: auto; margin-top: 62px; overflow: hidden !important; clip-path: inset(0 0 0 0) !important; background: linear-gradient(135deg, #0a0f2e 0%, #131847 50%, #0a0f2e 100%); } /* HEADER MOBILE — elimina espaço VAZIO ABAIXO do vídeo. Antes min-height:100vh fazia o header ocupar TELA INTEIRA mesmo o vídeo sendo pequeno. Agora a altura é "auto", ou seja, EXATAMENTE a soma (altura do vídeo + resto do header). Resultado: 0px de espaço morto abaixo do vídeo, marquee "cola" imediatamente na borda inferior do hero. */ .modern-header { min-height: auto !important; height: auto; padding-top: 0; } /* ⚠️ MOBILE: NÃO usamos mais a faixa preta modern-header::before neste breakpoint, porque o .hero-scene já tem margin-top:62px que EMPURRA o vídeo EXATAMENTE para ABAIXO do header-nav fixo (top:0, height:62px). Antes os dois SOMAVAM 62+62 = 124px de FAIXA PRETA VAZIA entre o nav e o vídeo. A faixa desktop (L255, top:0 / height:96px) continua funcionando normalmente em telas grandes. */ .modern-header::before { display: none !important; content: "" !important; height: 0 !important; } /* VÍDEO MOBILE: SEM ZOOM, SEM DESLOCAMENTO (NÃO CORTA FLECHA NEM GALÁXIA). A marca d'água é bloqueada EXCLUSIVAMENTE por uma caixa preta posicionada com precisão MILIMÉTRICA só na região "CapCut Ai" (canto sup. esquerdo). */ .hero-scene__video { object-fit: cover !important; object-position: center center !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; transform-origin: center center !important; transform: none !important; clip-path: none !important; z-index: 2 !important; filter: none !important; box-shadow: none !important; border: 0 none !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; cursor: pointer; } .hero-video-prompt.is-active { display: flex; } /* ===== BACKSTOP DE PRECISÃO: CAIXA PRETA SOMENTE NA ÁREA DA MARCA D'ÁGUA (top 8px / left 4px / width 155px / height 40px) ⚠️ SÓ APARECE SE O HERO TIVER O