inteiro (Hero até o CTA; o rodapé, embora tecnicamente dentro de

, tem cor própria opaca e sempre cobre o que está atrás dele, então na prática fica de fora). Rola junto com o conteúdo, igual a qualquer fundo de página normal, só que cobrindo todas as seções de uma vez — sem cor/imagem própria em cada seção não existe onde uma "emenda" poderia aparecer. As seções (.numeros-depoimentos, .samibank, .seguros, .imobiforce, .parceiros, .cta) ficam transparentes, só com seus blobs/grade/gráfico decorativos por cima — ver o restante deste arquivo. A única exceção é o próprio .hero, que tem a imagem bg-overlay.jpg de fundo (ver comentário em .hero mais abaixo) — como é a primeira seção da página, uma emenda visível só apareceria se ALGUMA outra seção tivesse fundo/imagem própria também, o que não é o caso. O em si continua branco por padrão (ver css/base.css — é usado também nas outras páginas do site, de fundo claro). Aqui, só nesta página, ele vira escuro. E se a tela for mais alta que o conteúdo (raro, mas acontece em monitores muito altos/zoom baixo), precisa de ALGUÉM ocupando esse espaço sobrando — senão ele aparece como um vão depois do rodapé (o que já tentei "resolver" só com min-height e piorou: o vão sobrava exatamente aí). A solução de verdade é sticky footer com flex: vira uma coluna flex de no mínimo 100vh, o

cresce (flex:1) pra preencher esse mínimo, e é o PRÓPRIO

— mesma cor do resto da página — quem ocupa a sobra, empurrando o rodapé (margin-top:auto) pra baixo. Assim o vão, quando existe, fica ANTES do rodapé (entre o CTA e ele, mesma cor de sempre) — nunca depois dele, nem em branco, nem parecendo que o rodapé cresceu. */ body { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--cor-fundo-escuro); } main { flex: 1; display: flex; flex-direction: column; background-color: var(--cor-fundo-escuro); } .rodape { margin-top: auto; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; /* Imagem original de novo como fundo do Hero (era a única seção que tinha — as outras continuam com a cor sólida vinda de

, ver comentário em "Fundo único da home" acima). O gradiente listado PRIMEIRO pinta por cima da imagem (múltiplos background-image empilham nessa ordem) e funde o final dela na mesma cor sólida que a próxima seção usa — sem isso, a borda de baixo da .hero cortava seco bem em cima da .numeros-depoimentos (a foto tem um azul mais claro que a --cor-fundo-escuro sólida, e a emenda ficava visível como uma linha reta). Começa a desbotar a 75% da altura pra dar bastante espaço pra transição ficar suave. */ background-image: linear-gradient(to bottom, transparent 0%, transparent 75%, var(--cor-fundo-escuro) 100%), url("img.php?src=bg-overlay.jpg&w=2000"); background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat; /* --espaco-120 pra bater com o padding-block das outras seções (ver comentário em .samibank) — só soma a altura do header porque essa é a única seção que fica embaixo dele. */ padding-block: calc(var(--altura-header) + var(--espaco-120)) var(--espaco-120); /* Sem overflow:hidden de propósito: a "bolha de vidro" grande (.hero__esfera--grande) é maior que a própria seção e propositalmente estoura o limite dela — com overflow:hidden isso cortava ela seca, criando uma linha reta exatamente onde a próxima seção começa (o "círculo com base reta" que aparecia ao rolar). Sem o corte, ela só continua seu degradê suave por cima do fundo (que já é a mesma cor em toda a página), sem nenhuma quebra. Isso não muda com o bg-overlay.jpg de volta: background-image nunca "vaza" do próprio elemento, então não precisa de overflow:hidden pra contê-la — só os elementos FILHOS (a esfera) é que estourariam o limite sem ele. */ /* Dá profundidade real ao rotateX/rotateY do núcleo (nucleo-tilt.js) */ perspective: 1600px; } /* Núcleo do hero: a própria imagem de referência (assets/img/nucleo.png), com tilt 3D via CSS seguindo o mouse (nucleo-tilt.js) — sem WebGL, o visual é sempre exatamente o da imagem aprovada. Fica atrás do conteúdo (sem z-index; .hero__conteudo/.hero__cartoes têm z-index:1 e ficam por cima). Passa por public/img.php (ver src/core/ImagemLocal.php) pra sair em WebP em vez do PNG original — arquivo CSS não roda PHP, então a URL do proxy é escrita à mão aqui (mesma pasta ../img.php de qualquer do site, funciona igual em qualquer base_path). */ .hero__nucleo { position: absolute; top: 3rem; right: -19rem; width: 76rem; height: 76rem; background-image: url("img.php?src=nucleo.png&w=1200"); background-size: contain; background-repeat: no-repeat; opacity: 0; /* nucleo-tilt.js sobe pra 1 na entrada */ pointer-events: none; will-change: transform; } .hero__conteudo { position: relative; z-index: 1; /* margin-inline:auto herdado de .container, sem sobrescrever — o texto acompanha a mesma borda esquerda da logo no header (.header__conteudo usa exatamente esse max-width:71rem + margin-inline:auto). Só o .hero__cartoes fica fora dessa largura — ver mais abaixo. */ /* Deixa o wrapper "transparente" ao mouse — os elementos interativos e de texto reativam os eventos logo abaixo */ pointer-events: none; } .hero__conteudo a, .hero__titulo, .hero__desde, .hero__descricao { pointer-events: auto; } .hero__titulo { max-width: 50.8rem; font-size: var(--texto-hero); font-weight: var(--peso-regular); line-height: var(--altura-linha-compacta); letter-spacing: var(--espacamento-letra-hero); color: var(--cor-texto-invertido); } .hero__titulo strong { font-weight: var(--peso-extrabold); } .hero__desde { font-size: var(--texto-subtitulo-hero); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-hero); color: var(--cor-azul-claro); } .hero__descricao { max-width: 31.75rem; margin-top: var(--espaco-32); font-size: var(--texto-subtitulo); line-height: 1.3; color: var(--cor-texto-invertido); } .hero__botao { margin-top: var(--espaco-48); } /* Único bloco do Hero fora de .hero__conteudo/.container de propósito: com 4 cards, a largura de texto (--largura-conteudo, 71rem) deixava cada card estreito demais — títulos como "Administradora de Condomínios" quebravam em 3 linhas tortas. Usa a variante larga (--largura-conteudo-larga, 77.7rem — mesma da faixa de seguros, ver .seguros__faixa) só pra si, sem alargar o título/descrição acima. position+z-index repetem o que .hero__conteudo já faz, pra ficar por cima do glow/bolhas de vidro (absolutos, sem z-index, atrás de qualquer bloco em fluxo normal que não tenha o próprio empilhamento). */ .hero__cartoes { position: relative; z-index: 1; width: 100%; /* Mais largo que --largura-conteudo-larga (77.7rem) de propósito: em monitores bem largos, 77.7rem centralizado sobrava uma faixa vazia grande dos dois lados, deixando a fileira de cards "flutuando" no meio da tela em vez de ocupar o espaço — ver o comentário parecido em .hero__conteudo (esse aqui é o único bloco do Hero que pode esticar além do container normal). */ max-width: 90rem; margin-inline: auto; padding-inline: var(--espaco-24); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espaco-32); margin-top: var(--espaco-80); text-align: left; } .cartao-solucao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-16); padding: 2.063rem; background-color: transparent; /* Vidro fosco: borra o que passa atrás (o .hero__nucleo, principalmente nos cards mais à direita) sem tirar a transparência do fundo — o card continua deixando a cor de trás aparecer, só que suavizada, em vez de virar um retângulo sólido. */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(110, 168, 255, .15), 0 20px 50px -20px rgba(58, 130, 255, .5); border-color: rgba(110, 168, 255, .45); border-radius: 20px; transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), border-color var(--transicao-padrao); } .cartao-solucao:hover { transform: translateY(-0.375rem); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(110, 168, 255, .15), 0 20px 50px -20px rgba(58, 130, 255, .5); border-color: var(--cor-primaria); } .cartao-solucao__icone { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: #dae2ff; border-radius: var(--raio-8); } .cartao-solucao__icone img { width: 1.5rem; height: 1.5rem; object-fit: contain; } .cartao-solucao__icone img.chave { width: 1.5rem; height: 0.75rem; object-fit: contain; } .cartao-solucao__titulo { font-size: var(--texto-titulo-card); font-weight: var(--peso-semibold); line-height: 1.33; color: var(--cor-fundo); } .cartao-solucao__texto { font-size: var(--texto-pequeno); line-height: 1.43; color: var(--cor-fundo); } .cartao-solucao__link { display: inline-flex; align-items: center; gap: var(--espaco-8); margin-top: auto; font-size: var(--texto-base); font-weight: var(--peso-bold); color: var(--cor-fundo); transition: color var(--transicao-rapida); } .cartao-solucao__link:hover { color: var(--cor-primaria); } .cartao-solucao__link img { width: 0.875rem; height: 0.875rem; } /* -------------------------------------------------------------------------- Estatísticas -------------------------------------------------------------------------- */ .numeros-depoimentos { position: relative; } .estatisticas { position: relative; z-index: 1; padding-block: var(--espaco-120) var(--espaco-96); } .estatisticas__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-24); } .estatisticas__item { text-align: center; } .estatisticas__numero { font-size: var(--texto-numero); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-azul-claro); line-height: 1.17; animation: estatisticas-pulso 3.6s ease-in-out infinite; } /* Pulso suave nos números — reforça a ideia de "dado vivo" sem ser uma mancha de cor por trás (nada de blob grande, só o próprio texto respirando). Um pequeno atraso por item pra não pulsarem em uníssono. */ .estatisticas__item:nth-child(2) .estatisticas__numero { animation-delay: .5s; } .estatisticas__item:nth-child(3) .estatisticas__numero { animation-delay: 1s; } @keyframes estatisticas-pulso { 0%, 100% { text-shadow: 0 0 0.5rem rgba(var(--glow-ciano), .35); } 50% { text-shadow: 0 0 1.25rem rgba(var(--glow-ciano), .75); } } @media (prefers-reduced-motion: reduce) { .estatisticas__numero { animation: none; } } .estatisticas__rotulo { margin-top: var(--espaco-8); font-size: var(--texto-micro); font-weight: var(--peso-medio); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-texto-borda-clara); } /* -------------------------------------------------------------------------- Depoimentos -------------------------------------------------------------------------- */ .depoimentos { position: relative; z-index: 1; padding-block: var(--espaco-96) var(--espaco-120); } .depoimentos__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-24); } .depoimento { display: flex; gap: var(--espaco-32); padding: 2.563rem; background-color: transparent; border: 1px solid; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(110, 168, 255, .15), 0 20px 50px -20px rgba(58, 130, 255, .5); border-color: rgba(110, 168, 255, .45); border-radius: 20px; } .depoimento__avatar { width: 5rem; height: 5rem; border-radius: var(--raio-12); object-fit: cover; flex-shrink: 0; } .depoimento__estrelas { display: flex; } .depoimento__estrelas img { width: 1.25rem; height: 1.188rem; } .depoimento__citacao { margin-top: var(--espaco-16); font-style: italic; line-height: var(--altura-linha-texto); color: var(--cor-fundo); } .depoimento__nome { margin-top: var(--espaco-24); color: var(--cor-fundo); } .depoimento__cargo { color: var(--cor-fundo); } /* -------------------------------------------------------------------------- SamiBank -------------------------------------------------------------------------- */ .samibank { position: relative; /* Grade bem sutil tipo "papel de gráfico" — reforça a ideia de dashboard/analytics financeiro sem competir com o texto. */ background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 3rem 3rem; /* --espaco-120 nos dois lados — mesmo padding-block de todas as outras seções da home, pra não sobrar diferença de respiro entre elas. */ padding-block: var(--espaco-120); } .samibank__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 31rem 1fr; gap: var(--espaco-64); align-items: center; } .samibank__imagem img { width: 100%; /* !important necessário: o height="279" do HTML (dimensão original do arquivo, ver home.php) tem prioridade MAIOR do que o normal — sem forçar aqui, ele vence height:auto e a proporção quebra (imagem esmagada/estirada, já que width:100% é fluido). width/height do HTML continuam servindo pra reservar o espaço certo antes da imagem carregar (evita troca de layout) — só a altura final é que precisa ceder pro auto. */ height: auto !important; border-radius: var(--raio-24); box-shadow: var(--sombra-imagem); } .samibank__chapeu { font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-azul-claro); } .samibank__titulo { margin-top: var(--espaco-16); font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); line-height: var(--altura-linha-titulo); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto-invertido); } /* Sobrescreve só aqui — .texto-destaque-azul é usada também em condominios.php (fundo claro), onde o azul escuro padrão continua certo. */ .samibank__titulo .texto-destaque-azul { color: var(--cor-azul-claro); } .samibank__descricao { margin-top: var(--espaco-24); color: var(--cor-texto-borda-clara); } .samibank__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-24); margin-top: var(--espaco-32); } .samibank__item { display: flex; align-items: center; gap: var(--espaco-12); color: var(--cor-texto-invertido); } .samibank__item img { width: 1.313rem; height: 1.313rem; flex-shrink: 0; } /* -------------------------------------------------------------------------- Seguros -------------------------------------------------------------------------- */ .seguros { position: relative; padding-block: var(--espaco-120); } .seguros__faixa { position: relative; z-index: 1; max-width: var(--largura-conteudo-larga); margin-inline: auto; padding: var(--espaco-80) var(--espaco-48); display: flex; flex-direction: column; align-items: center; } /* Fio de luz correndo devagar no topo do card — era uma borda lisa fixa; vira uma faixa clara percorrendo de um lado a outro em loop, tipo um "scanner" bem discreto. Só o pseudo-elemento anima; o card em si fica parado. */ .seguros__faixa::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--raio-20) var(--raio-20) 0 0; background: linear-gradient(90deg, transparent, rgba(var(--glow-ciano), .9), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: seguros-luz 5s linear infinite; } @keyframes seguros-luz { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } @media (prefers-reduced-motion: reduce) { .seguros__faixa::before { animation: none; background-position: 50% 0; } } .seguros__titulo { font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); text-align: center; color: var(--cor-fundo); } .seguros__descricao { max-width: 42rem; margin-top: var(--espaco-16); text-align: center; color: var(--cor-fundo); } .seguros__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espaco-24); width: 100%; max-width: var(--largura-conteudo); margin-top: var(--espaco-64); } .cartao-seguro { display: flex; flex-direction: column; gap: var(--espaco-8); padding: 2.063rem; background-color: transparent; border: 1px solid; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(110, 168, 255, .15), 0 20px 50px -20px rgba(58, 130, 255, .5); border-color: rgba(110, 168, 255, .45); border-radius: 20px; transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), border-color var(--transicao-padrao); } .cartao-seguro:hover { transform: translateY(-0.375rem); box-shadow: var(--sombra-card); border-color: var(--cor-primaria); } .cartao-seguro__icone { width: 1.688rem; height: 1.688rem; object-fit: contain; } .cartao-seguro__titulo { margin-top: var(--espaco-8); font-size: var(--texto-subtitulo); font-weight: var(--peso-semibold); color: var(--cor-fundo); } .cartao-seguro__texto { font-size: var(--texto-medio); line-height: 1.6; color: var(--cor-fundo); } .seguros__botao { margin-top: var(--espaco-48); } /* -------------------------------------------------------------------------- Vitrine: SAMI ERP Condomínios Título/descrição + screenshot grande num card "flutuando" (borda + sombra, bem definido — sem fade nele: era o que a referência (Magic UI) tentava imitar, mas o print daqui é uma grade cheia de texto/ cor, então esmaecer a base só embaralhava o conteúdo em vez de "dissolver" limpo) + uma faixa de confiança com os logos dos clientes administradoras de condomínio (os mesmos do .parceiros mais abaixo, só que aqui numa fileira parada, sem a trilha animada — essa seção é só um resumo/prévia, o .parceiros que rola é o "sobre nós" completo). O clima "flutuando no escuro" da referência vem do .secao-estrelas (poeira de estrelas, ver index.php) e do glow suave atrás do card, não de esmaecer a imagem em si. */ .vitrine { position: relative; padding-block: var(--espaco-120); text-align: center; } .vitrine__conteudo { position: relative; z-index: 1; padding: 0; } /* Selo/pill no topo (estilo "Introducing …" da referência): pílula escura translúcida com borda fininha, brilho azul da marca e seta que desliza no hover. É um link pra página do produto. */ .vitrine__selo { display: inline-flex; align-items: center; gap: var(--espaco-8); margin-bottom: var(--espaco-32); padding: var(--espaco-8) var(--espaco-16); border-radius: var(--raio-pilula); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: var(--texto-pequeno); font-weight: var(--peso-medio); color: var(--cor-texto-invertido-suave); transition: background-color var(--transicao-padrao), border-color var(--transicao-padrao); } .vitrine__selo:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); } .vitrine__selo-brilho { color: var(--cor-azul-claro); font-size: 0.8em; } .vitrine__selo-seta { color: var(--cor-texto-borda-clara); transition: transform var(--transicao-padrao); } .vitrine__selo:hover .vitrine__selo-seta { transform: translateX(3px); } /* Título em escala "hero" (bem maior que o de seção), leading colado e um leve gradiente vertical branco→cinza — o texto some pra baixo igual à referência. */ .vitrine__titulo { max-width: 22ch; margin-inline: auto; font-size: clamp(2.4rem, 1.1rem + 4.2vw, 4.75rem); font-weight: var(--peso-semibold); line-height: var(--altura-linha-compacta); letter-spacing: var(--espacamento-letra-hero); background: linear-gradient(180deg, #ffffff 30%, #aab2c8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .vitrine__descricao { max-width: 38rem; margin: var(--espaco-24) auto 0; font-size: var(--texto-grande); line-height: var(--altura-linha-larga); color: var(--cor-texto-borda-clara); } /* Só o espaçamento; forma e cor vêm de .botao + .botao--vidro (base.css). */ .vitrine__botao { margin-top: var(--espaco-40); } .vitrine__botao-seta { transition: transform var(--transicao-padrao); } .vitrine__botao:hover .vitrine__botao-seta { transform: translateX(3px); } /* Wrapper da mídia: dá o contexto pro glow ficar ATRÁS da imagem sem ser recortado pela máscara de fade (que agora vive só no container interno). O espaçamento de topo saiu do .imagem e veio pra cá, pra o glow alinhar com a imagem de verdade. */ .vitrine__midia { position: relative; z-index: 1; margin-top: var(--espaco-80); } /* Glow atrás da imagem, centralizado e subindo por cima dela (a "luz da tela" batendo pra cima). Fica fora da máscara, então espalha livre pra cima; a imagem opaca cobre o miolo e o brilho aparece acima e nas beiradas. */ .vitrine__brilho { position: absolute; left: 50%; top: -10rem; transform: translateX(-50%); width: 74rem; max-width: 96%; height: 36rem; /* Núcleo brilhante posicionado no topo (30% do box) → o brilho forte fica em cima/na borda de cima da imagem e vaza pra cima, em vez de ficar escondido atrás do miolo do print. */ background: radial-gradient(ellipse 55% 50% at 50% 30%, rgba(var(--glow-royal), .55) 0%, rgba(var(--glow-ciano), .2) 42%, transparent 72%); filter: blur(50px); z-index: -1; pointer-events: none; } .vitrine__imagem { position: relative; z-index: 1; max-width: 72rem; margin-inline: auto; padding-inline: var(--espaco-24); /* Dissolve o print pro fundo escuro na base (como na referência): fade mais longo/gradual — começa cedo e some de vez lá embaixo. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%); } .vitrine__imagem img { display: block; width: 100%; /* !important: mesmo motivo de .samibank__imagem img acima. */ height: auto !important; /* Só o topo arredondado importa; a base é dissolvida pela máscara do container, então nada de sombra/borda embaixo. */ border-radius: var(--raio-16) var(--raio-16) 0 0; border: 1px solid rgba(255, 255, 255, .14); border-bottom: none; } /* Ângulo animado do "border beam" (o mesmo fio de luz da faixa de seguros, mas dando a volta na borda da imagem em vez de correr só no topo). */ @property --vitrine-beam { syntax: ""; initial-value: 0deg; inherits: false; } /* O fio de luz percorrendo a borda: um segmento claro num conic-gradient que gira, recortado só na moldura (padding + mask-composite) e alinhado à imagem (mesmo raio de topo, mesmo recuo lateral do container). */ .vitrine__imagem::after { content: ""; position: absolute; inset: 0 var(--espaco-24); z-index: 2; border-radius: var(--raio-16) var(--raio-16) 0 0; padding: 1.5px; background: conic-gradient(from var(--vitrine-beam), transparent 0deg, transparent 290deg, rgba(var(--glow-ciano), .85) 330deg, #ffffff 345deg, rgba(var(--glow-ciano), .85) 355deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: vitrine-beam-girar 6s linear infinite; } @keyframes vitrine-beam-girar { to { --vitrine-beam: 360deg; } } @media (prefers-reduced-motion: reduce) { .vitrine__imagem::after { animation: none; } } /* Clientes num painel discreto (fundo levíssimo + brilho interno no topo + borda sutil) pra ancorar os logos abaixo da imagem, em vez de flutuarem soltos no fundo escuro. */ .vitrine__confianca { position: relative; z-index: 1; max-width: 72rem; margin: 25px auto 0; padding: 25px 70px; border-top: 1px solid rgba(255, 255, 255, .12); } /* Feixe de luz correndo na borda de cima do painel — o mesmo efeito da faixa de seguros (reaproveita o @keyframes seguros-luz): um segmento claro que percorre o topo de um lado ao outro em loop. */ .vitrine__confianca::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--raio-24) var(--raio-24) 0 0; background: linear-gradient(90deg, transparent, rgba(var(--glow-ciano), .9), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: seguros-luz 5s linear infinite; } @media (prefers-reduced-motion: reduce) { .vitrine__confianca::before { animation: none; background-position: 50% 0; } } .vitrine__confianca-rotulo { font-size: var(--texto-micro); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-texto-borda-clara); } .vitrine__logos { display: flex; align-items: center; justify-content: center; gap: var(--espaco-32) var(--espaco-48); margin-top: var(--espaco-32); } /* Sem plaquinha: logos viram silhueta branca monocromática direto no fundo escuro (como as marcas da referência). Todos os PNGs têm fundo transparente, então brightness(0) invert(1) pinta o traço de branco sem virar bloco. Opacidade baixa que sobe no hover. */ .vitrine__logo { max-height: 2.2rem; max-width: 8.5rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.62; transition: opacity var(--transicao-padrao); } .vitrine__logo:hover { opacity: 1; } /* Exceção: logos com fundo/emblema chapado embutido no PNG (ex.: Imofar) viram um bloco branco sólido com o filtro. Enquanto não houver uma versão branca/vetor com fundo transparente, mostro esse numa plaquinha clara — menor e discreta, alinhada à altura dos outros pra não dominar. */ .vitrine__logo--chip { filter: none; opacity: 0.95; max-height: 2.6rem; background-color: rgba(255, 255, 255, 0.95); padding: var(--espaco-4) var(--espaco-8); border-radius: var(--raio-6); } .vitrine__logo--chip:hover { opacity: 1; } /* -------------------------------------------------------------------------- ImobiForce -------------------------------------------------------------------------- */ .imobiforce { position: relative; padding-block: var(--espaco-160) var(--espaco-120); } /* Meteoros da ImobiForce nascem no topo da PRÓPRIA seção (não em top:-12%, que é acima dela) pra não vazarem pra cima cruzando o arco da vitrine de condomínios. Sem overflow/clip aqui, então o glow rotativo da seção segue inteiro (não marca as bordas). */ .imobiforce .secao-meteoro { top: 0; } /* Glow girando bem devagar atrás da imagem do dashboard — "tech/CRM em movimento contínuo", sem ser uma mancha de cor parada (o que os blobs antigos eram) nem chamar mais atenção que o conteúdo. */ .imobiforce::before { content: ""; position: absolute; top: 50%; right: 8%; z-index: 0; width: 42rem; height: 42rem; margin-top: -21rem; border-radius: 50%; filter: blur(60px); background: conic-gradient(from 0deg, rgba(var(--glow-ciano), .5), rgba(var(--glow-azul), .22) 30%, transparent 55%, rgba(var(--glow-royal), .4) 80%, rgba(var(--glow-ciano), .5)); animation: imobiforce-girar 22s linear infinite; pointer-events: none; } @keyframes imobiforce-girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .imobiforce::before { animation: none; } } .imobiforce__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-64); align-items: center; } .imobiforce__logo { width: 14.5rem; height: auto; } .imobiforce__titulo { max-width: 29rem; margin-top: var(--espaco-48); font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); line-height: var(--altura-linha-titulo); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto-invertido); } .imobiforce__descricao { max-width: 33rem; margin-block: var(--espaco-24) var(--espaco-32); color: var(--cor-texto-borda-clara); } .imobiforce__imagem img { width: 100%; /* !important: mesmo motivo de .samibank__imagem img acima. */ height: auto !important; border-radius: var(--raio-8); } /* -------------------------------------------------------------------------- Parceiros -------------------------------------------------------------------------- */ .parceiros { position: relative; padding-block: var(--espaco-120); text-align: center; } @keyframes parceiros-respirar { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .parceiros::before { animation: none; } } .parceiros>.container { position: relative; z-index: 1; } .parceiros__titulo { font-size: var(--texto-titulo); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto-invertido); } .parceiros__descricao { max-width: 57rem; margin: var(--espaco-32) auto 0; line-height: var(--altura-linha-larga); color: var(--cor-texto-borda-clara); } .parceiros__logos { overflow: hidden; margin-top: var(--espaco-64); /* Esmaecimento nas bordas, como no design — também disfarça a entrada/ saída dos logos da trilha (ver .parceiros__trilha) */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* Trilha com dois grupos idênticos lado a lado, animando -50% em loop linear: no instante em que o primeiro grupo sai inteiro de cena, o segundo já está exatamente onde o primeiro começou — sem nenhuma "costura" visível. width:max-content evita que o flex encolha os grupos pra caber na tela. */ .parceiros__trilha { display: flex; width: max-content; animation: parceiros-rolar 32s linear infinite; } @media (prefers-reduced-motion: reduce) { .parceiros__trilha { animation: none; } } @keyframes parceiros-rolar { from { transform: translateX(0); } to { /* -50% da trilha inteira = a largura de UM grupo, já que os dois são idênticos */ transform: translateX(-50%); } } /* Cada grupo carrega seu próprio espaçamento (inclusive o "gap" final, via padding) — assim os dois grupos ficam com a MESMA largura exata, requisito pra o translateX(-50%) acima bater certinho. */ .parceiros__grupo { display: flex; align-items: center; flex-shrink: 0; gap: var(--espaco-32); padding-right: var(--espaco-32); } .parceiros__logo { max-height: 3.5rem; max-width: 9rem; object-fit: contain; /* Logos são pensados pra fundo claro — em vez de arriscar sumir no fundo escuro novo, cada um ganha uma "plaquinha" clara própria. */ background-color: rgba(255, 255, 255, 0.92); padding: var(--espaco-12) var(--espaco-16); border-radius: var(--raio-8); } /* -------------------------------------------------------------------------- CTA final -------------------------------------------------------------------------- */ .cta { position: relative; padding-block: var(--espaco-120); } .cta__caixa { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--espaco-16); padding: var(--espaco-64); /* Antes era um card com gradiente azul sólido — funcionava como um "banner" colado por cima, quebrando o fundo escuro único da home (ver comentário no topo deste arquivo). Trocado pelo mesmo vidro translúcido usado nos outros cards sobre esse fundo (ex.: .numero, .parceiro__logo-caixa), pra que o CTA se funda com o resto da página e só o halo abaixo marque o destaque. */ background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--raio-24); text-align: center; /* Halo pulsando bem devagar — dá urgência/energia ao card final sem ser uma cor de fundo nova, só um brilho respirando ao redor dele. */ animation: cta-halo 3.2s ease-in-out infinite; } @keyframes cta-halo { 0%, 100% { box-shadow: 0 0 2.5rem rgba(var(--glow-royal), .25); } 50% { box-shadow: 0 0 4.5rem rgba(var(--glow-ciano), .45); } } @media (prefers-reduced-motion: reduce) { .cta__caixa { animation: none; } } .cta__titulo { font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto-invertido); } .cta__descricao { color: var(--cor-texto-invertido); opacity: 0.9; padding-bottom: var(--espaco-24); } /* Decoração das seções escuras (estrelas/meteoros ambientes): regras compartilhadas em .secao-estrelas/.secao-meteoros movidas pra css/base.css, pra ficarem disponíveis em qualquer página (não só na home) — ver lá. */ /* Glow interativo do SamiBank — ver js/samibank-interativo.js. Descansa atrás da imagem do celular (coluna esquerda do grid) e segue o mouse dentro da seção com um leve atraso (lerp), como se a luz da tela do app reagisse a onde você está olhando. Só o "transform" é controlado por JS; posição de repouso, tamanho e cor ficam aqui. */ .samibank__glow-interativo { position: absolute; top: 50%; left: 30%; z-index: 0; width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; border-radius: 50%; filter: blur(75px); background: radial-gradient(circle, rgba(var(--glow-ciano), .55) 0%, rgba(var(--glow-royal), .18) 45%, rgba(var(--glow-royal), 0) 72%); pointer-events: none; will-change: transform; } @media (prefers-reduced-motion: reduce) { .samibank__glow-interativo { display: none; } } /* Gráfico de linha do SamiBank — trend ascendente ao longo da base da seção, tipo o painel de um dashboard financeiro. Decorativo/abstrato (não são números reais) e discreto o bastante pra não brigar com o texto por cima; só o ponto final "pulsa", como um indicador ao vivo. */ .samibank__grafico { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; opacity: .6; pointer-events: none; } .samibank__grafico-stop-inicio { stop-color: rgb(var(--glow-ciano)); stop-opacity: .32; } .samibank__grafico-stop-fim { stop-color: rgb(var(--glow-ciano)); stop-opacity: 0; } .samibank__grafico-area { fill: url(#samibank-grafico-fill); } .samibank__grafico-linha { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* CTA final: mesma chuva de meteoros do SamiBank, cruzando o outro sentido pra não repetir. */ .cta .secao-meteoros { transform: scaleX(-1); /* mesma chuva, espelhada — não repete o SamiBank */ } /* -------------------------------------------------------------------------- Responsivo — Home -------------------------------------------------------------------------- */ @media (max-width: 64rem) { /* 1024px — puxa o núcleo mais pra fora, senão a área visível dele fica grande demais numa tela mais estreita. */ .hero__nucleo { right: -30rem; } .hero__cartoes { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } .depoimentos__grade { grid-template-columns: 1fr; } .samibank__grade { grid-template-columns: 1fr; gap: var(--espaco-48); } .samibank__imagem { max-width: 31rem; } .seguros__grade { grid-template-columns: repeat(2, 1fr); } .imobiforce__grade { grid-template-columns: 1fr; gap: var(--espaco-48); } } @media (max-width: 48rem) { /* 768px */ .hero { padding-block: calc(var(--altura-header) + var(--espaco-64)) var(--espaco-64); } .hero__nucleo { display: none; } .hero__descricao { font-size: var(--texto-grande); } .hero__botao { margin-top: var(--espaco-32); width: 100%; } .hero__cartoes { margin-top: var(--espaco-48); } .estatisticas { padding-block: var(--espaco-64) var(--espaco-32); } .estatisticas__grade { grid-template-columns: 1fr; gap: var(--espaco-40); } .depoimentos { padding-block: var(--espaco-32) var(--espaco-64); } .depoimento { flex-direction: column; gap: var(--espaco-24); padding: var(--espaco-24); } .samibank { padding-block: var(--espaco-64); } .samibank__lista { grid-template-columns: 1fr; gap: var(--espaco-16); } .seguros { padding-block: var(--espaco-64); } .seguros__faixa { padding: var(--espaco-48) var(--espaco-24); border-radius: 0; } .seguros__grade { grid-template-columns: 1fr; margin-top: var(--espaco-40); } .seguros__botao { width: 100%; } .vitrine { padding-block: var(--espaco-64); } .vitrine__imagem { margin-top: var(--espaco-40); } .vitrine__confianca { margin-top: var(--espaco-48); } .imobiforce { padding-block: var(--espaco-64); } .imobiforce__logo { width: 11rem; } .imobiforce__titulo { margin-top: var(--espaco-32); } .parceiros { padding-block: var(--espaco-64); } .parceiros__grupo { gap: var(--espaco-24); padding-right: var(--espaco-24); } .parceiros__logo { max-height: 2.75rem; max-width: 7rem; } .cta { padding-block: var(--espaco-64); } .cta__caixa { padding: var(--espaco-48) var(--espaco-24); } .cta__caixa .botao--branco { width: 100%; font-size: var(--texto-grande); } }