/* ============================================================ Domínio Médico — o site de marketing assets/css/landing.css Recriação do site que hoje roda em WordPress, com a mesma identidade: índigo profundo, títulos em serifa, botões em pílula e cartões de serviço que ocupam a tela inteira. A diferença é o que está POR BAIXO — aqui os preços, os domínios e o telefone saem do próprio sistema (landing.js), em vez de serem texto digitado numa página que ninguém lembra de atualizar. ---------- uma folha só ---------- Nada aqui é compartilhado com o painel (app.css) nem com o site das clínicas. A landing é o lugar onde a marca fala mais alto, e misturar as duas folhas faria uma mudança de campanha mexer na tela de agenda de quem está atendendo. ============================================================ */ /* As fontes da marca vêm do Google; a pilha de reserva logo abaixo é o que aparece se o CDN cair. `swap` para o texto nunca ficar invisível esperando — numa página de venda, texto invisível é venda perdida. */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ --lp-tinta:#0B1033; /* texto */ --lp-tinta-2:#4A5270; /* texto secundário */ --lp-roxo:#2B00BD; /* a cor da marca */ --lp-roxo-fundo:#EFEAFF; --lp-azul:#0D2A8D; /* o fundo do herói */ --lp-azul-fundo:#081A4F; --lp-rosa:#E8455F; /* o botão principal */ --lp-verde:#6BB83B; --lp-cinza:#F7F7F7; --lp-borda:#E7E7EF; --lp-raio:18px; --lp-sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lp-serif:"DM Serif Text", Georgia, "Times New Roman", serif; --lp-larg:1180px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* A barra é fixa: sem isto, todo link de âncora do menu (#sistema, #blog, #duvidas, #servicos) para com o título da seção escondido ATRÁS dela. O valor é a altura da barra mais o respiro — 12px do topo + 46 da pílula. */ html{ scroll-padding-top:86px; } @media (max-width:640px){ html{ scroll-padding-top:74px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--lp-sans); color:var(--lp-tinta); background:#fff; line-height:1.6; /* Sem `-webkit-font-smoothing:antialiased`, de propósito. No macOS ele afina o traço, e texto branco sobre foto escura — que é metade desta página — passa a parecer cinza. O site atual também não usa. */ /* `clip`, e não `hidden`: hidden faz do body um contêiner de rolagem e mata o `position:sticky` dos cartões de serviço. Os dois cortam o que vaza para o lado; só um deles não quebra a pilha. */ overflow-x:clip; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ margin:0; line-height:1.12; font-weight:700; letter-spacing:-.02em; } p{ margin:0; } [hidden]{ display:none !important; } .lp-larg{ width:min(100% - 40px, var(--lp-larg)); margin-inline:auto; } .lp-serif{ font-family:var(--lp-serif); font-weight:400; letter-spacing:0; } /* ---------- entrada ---------- Quem anima é o JavaScript (landing.js). O estado inicial fica numa classe que só ele acrescenta: se o script não rodar, a página abre inteira e legível em vez de abrir em branco. */ .lp-anima .lp-vem{ opacity:0; transform:translateY(22px); } .lp-vem{ transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .lp-vem.lp-veio{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .lp-anima .lp-vem{ opacity:1; transform:none; } } /* ============================================================ botões ============================================================ */ .lp-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:600; font-size:.95rem; font-family:inherit; border:1.5px solid transparent; cursor:pointer; transition:transform .18s, box-shadow .18s, background .18s, color .18s; white-space:nowrap; } .lp-btn:hover{ transform:translateY(-2px); } .lp-btn-primario{ background:linear-gradient(120deg, var(--lp-rosa), #B0347F 60%, var(--lp-roxo)); color:#fff; box-shadow:0 10px 24px rgba(43,0,189,.28); border:none !important; } .lp-btn-primario:hover{ box-shadow:0 14px 30px rgba(43,0,189,.36); } .lp-btn-claro{ background:#fff; color:var(--lp-tinta); box-shadow:0 6px 18px rgba(11,16,51,.12); } .lp-btn-contorno{ border-color:rgba(255,255,255,.55); color:#fff; } .lp-btn-contorno:hover{ background:rgba(255,255,255,.12); } .lp-btn-escuro{ background:var(--lp-roxo); color:#fff; box-shadow:0 10px 24px rgba(43,0,189,.25); } .lp-btn-linha{ border-color:var(--lp-borda); color:var(--lp-tinta); background:#fff; } .lp-btn-linha:hover{ border-color:var(--lp-roxo); color:var(--lp-roxo); } .lp-btn-g{ padding:16px 32px; font-size:1rem; } .lp-acoes{ display:flex; gap:12px; flex-wrap:wrap; } /* ============================================================ a borda que brilha ============================================================ Um anel de luz dá a volta no botão. O truque tem três partes: 1. `@property` registra `--lp-giro` COMO ÂNGULO. Sem esse registro o navegador trata a variável como texto e não interpola nada — o degradê salta de 0 a 360 no fim da animação em vez de girar. É a diferença entre um brilho que corre e um piscar no fim do ciclo. 2. o `conic-gradient` é quase todo transparente: só uma fatia clara, que vira o ponto de luz correndo pela borda. 3. as duas máscaras recortam o miolo (`content-box` XOR caixa inteira), deixando visível só a moldura da espessura do `padding`. Onde o `@property` não existe (navegador antigo), o ângulo fica parado no valor inicial: o botão ganha um brilho fixo num canto, e nada quebra. Só nos botões CHEIOS, de propósito. Se o contorno também brilhasse, sumiria a diferença entre "o que eu quero que você clique" e "o resto". */ @property --lp-giro{ syntax:''; initial-value:0deg; inherits:false; } @keyframes lp-gira{ to{ --lp-giro:360deg; } } .lp-btn-primario, .lp-btn-escuro, .lp-btn-claro, .lp-btn-saiba{ isolation:isolate; } .lp-btn-primario::after, .lp-btn-escuro::after, .lp-btn-claro::after, .lp-btn-saiba::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; /* a espessura do anel */ pointer-events:none; background:conic-gradient(from var(--lp-giro), transparent 0 58%, var(--brilho, rgba(255,255,255,.95)) 72%, transparent 86% 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; animation:lp-gira 3.2s linear infinite; } /* Botão branco pede anel colorido — um anel branco sobre fundo branco é um anel que ninguém vê. */ .lp-btn-claro{ --brilho:var(--lp-roxo); } .lp-btn-saiba{ position:relative; } /* Com o mouse em cima o giro acelera e o botão ganha um halo de fora. */ .lp-btn-primario:hover::after, .lp-btn-escuro:hover::after, .lp-btn-claro:hover::after, .lp-btn-saiba:hover::after{ animation-duration:1.1s; padding:2.2px; } /* Movimento perpétuo no canto do olho cansa, e quem pediu para parar pediu por um motivo. O anel fica — parado. */ @media (prefers-reduced-motion: reduce){ .lp-btn-primario::after, .lp-btn-escuro::after, .lp-btn-claro::after, .lp-btn-saiba::after{ animation:none; } } /* ============================================================ navegação ============================================================ */ .lp-nav{ position:fixed; inset:12px 0 auto; z-index:60; display:flex; justify-content:center; pointer-events:none; } /* ---------- a barra pendurada ---------- Vidro forte e BRANCO. As duas coisas puxam para lados opostos: quanto mais transparente, mais a barra pega a cor do que passa por baixo — sobre o herói azul ela virava lilás. A saída é desfoque alto com o branco bem opaco: o `blur(30px)` some com o desenho do fundo, e a `saturate` devolve o viço que o desfoque rouba, sem deixar a cor atravessar. A sombra tem três camadas, e é ela que pendura a barra: · o fio de luz por dentro, na borda de cima, que dá a espessura do vidro · o contato curto e escuro logo abaixo · o borrão largo e fraco, que é a sombra projetada na página */ .lp-nav-cx{ pointer-events:auto; position:relative; isolation:isolate; width:min(100% - 32px, calc(var(--lp-larg) + 40px)); display:flex; align-items:center; gap:18px; padding:9px 9px 9px 22px; border-radius:999px; /* Vidro fosco de verdade: pouco branco, desfoque alto. A barra pega a cor do que passa por baixo — sobre o herói ela fica levemente azulada, e é isso que faz parecer vidro em vez de uma faixa branca colada. 42% e não 52%: com metade de branco o vidro ficava leitoso e a cor de trás mal atravessava. O que compensa a perda de contraste NÃO é mais branco, é mais desfoque — em 54px o que está atrás vira mancha de cor, sem desenho que dispute com o texto do menu. Vidro se marca pelo que deixa passar, não pela camada que põe por cima. Por que 42 e não menos: o pior caso do texto ESCURO do menu é a barra passando sobre a foto escura de um cartão de serviço, que não é seção `lp-escuro` e por isso não clareia o texto. Ali o contraste cai de 6,6:1 (em 52%) para 5,1:1 — ainda folgado. Em 38% chega a 4,6:1, que passa raspando no mínimo de 4,5:1 e não deixa margem para uma foto mais escura que as de hoje. No sentido contrário, o estado ESCURO melhorou: menos branco sobre o herói levou o texto branco de 3,1:1 para 4,1:1 — abaixo do mínimo antes desta mudança, acima depois dela. */ background:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(54px) saturate(190%); backdrop-filter:blur(54px) saturate(190%); border:1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(11,16,51,.07), 0 12px 34px rgba(11,16,51,.1); transition:box-shadow .3s, background .3s, backdrop-filter .3s; } /* Depois que a página rola, a barra deixa de flutuar sobre o herói e passa a cobrir conteúdo: fica mais branca e a sombra aprofunda, para a separação ficar clara sem precisar de uma linha desenhada. */ .lp-nav.rolou .lp-nav-cx{ background:rgba(255,255,255,.54); -webkit-backdrop-filter:blur(62px) saturate(200%); backdrop-filter:blur(62px) saturate(200%); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 3px 8px rgba(11,16,51,.09), 0 18px 48px rgba(11,16,51,.16); } /* Sem `backdrop-filter` não há vidro nenhum — e uma barra translúcida sem desfoque deixa o texto do herói passar por trás do menu. Branco sólido. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lp-nav-cx, .lp-nav.rolou .lp-nav-cx{ background:#fff; } } /* ---------- a barra sobre seção escura ---------- `--lp-escuridao` vem do JavaScript (assets/js/landing.js): quanto da faixa da barra está sobre uma seção `lp-escuro`, de 0 a 1. Sem script, fica 0 — e a barra segue sendo a de sempre, branca, que é o estado seguro. O véu é um elemento por baixo de tudo, e não uma cor de fundo que muda: assim o vidro branco continua lá embaixo, o desfoque não precisa ser recalculado, e o que varia é só uma opacidade — de graça para o navegador. */ /* Mais leve pelo mesmo motivo do lado claro: em .60/.74 o véu tapava o que passava por baixo e a barra virava uma pastilha escura chapada sobre a seção escura — justamente onde o vidro tem mais a mostrar, porque é ali que o herói tem degradê, foto e a marca. */ .lp-nav-cx::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:linear-gradient(180deg, rgba(14,18,64,.44), rgba(9,12,46,.58)); opacity:var(--lp-escuridao, 0); } /* Sobre o escuro, a borda branca de 85% vira um aro aceso demais. */ .lp-nav-cx{ border-color:color-mix(in srgb, rgba(255,255,255,.34) calc(var(--lp-escuridao, 0) * 100%), rgba(255,255,255,.85)); } /* ---------- as duas marcas ---------- Não é o mesmo desenho pintado de outra cor: são dois arquivos, o oficial e a versão branca. Por isso a troca é uma sobreposição com opacidade cruzada, e não um filtro — filtro em cima do logotipo azul daria um cinza sujo no meio do caminho. */ /* Só `left`/`top`: com `inset:0` o navegador calcularia a largura pelas quatro âncoras e esticaria a marca até a ponta da barra. */ .lp-marca{ position:relative; } .lp-marca .lp-marca-clara{ position:absolute; left:0; top:0; opacity:var(--lp-escuridao, 0); } /* O logotipo é o arquivo oficial, sem símbolo desenhado por nós ao lado: o que não faz parte da identidade não entra na navegação. A altura manda, a largura acompanha — o SVG é 680x74 e qualquer largura fixa o deformaria. */ /* `flex:none` porque o logotipo é a única peça da barra que NÃO pode encolher: ele é uma palavra deitada (680x74) e, espremido por um vizinho, o navegador mantém a altura fixa e come a largura — a marca sai achatada. */ .lp-marca{ display:flex; align-items:center; flex:none; } .lp-marca img{ height:24px; width:auto; max-width:none; display:block; } /* Metade do que era (38px). O seletor passa pelo rodapé de propósito: com a especificidade só da classe, a regra do celular (mais abaixo) ganharia por vir depois e o logotipo do rodapé ficaria MAIOR na tela pequena do que no desktop. */ .lp-rodape .lp-marca img{ height:19px; } /* Peso 600 e a tinta cheia: sobre vidro transparente o cinza-médio de antes (--lp-tinta-2) caía para 2,6:1 de contraste e sumia. */ .lp-nav-links{ display:flex; gap:22px; margin-left:auto; font-size:.9rem; font-weight:600; color:var(--lp-tinta); } /* O menu atravessa junto com a marca: tinta cheia no claro, branco no escuro. A declaração de cima é o que o navegador sem `color-mix` enxerga — e ela precisa vir DEPOIS da regra acima, não antes, ou a tinta fixa ganha por ser a última a falar. */ .lp-nav-links{ color:color-mix(in srgb, #fff calc(var(--lp-escuridao, 0) * 100%), var(--lp-tinta)); } .lp-nav-links a{ position:relative; padding:4px 0; } .lp-nav-links a:hover{ color:var(--lp-roxo); } .lp-nav-links a:hover{ color:color-mix(in srgb, #fff calc(var(--lp-escuridao, 0) * 100%), var(--lp-roxo)); } .lp-nav-acoes{ display:flex; gap:8px; align-items:center; } .lp-nav-acoes .lp-btn{ padding:10px 20px; font-size:.88rem; } /* ---------- o botão do menu (só no celular) ---------- A mesma maleta médica do marque.med.br, desenhada em traço para ficar igual aos outros ícones do site — e não trazida da Font Awesome, cuja versão gratuita é sólida e pede atribuição por licença. Os dois SVGs se empilham na mesma célula do grid e trocam por opacidade: assim o botão não muda de tamanho no meio da troca, o que numa barra apertada empurraria o logotipo. A cor acompanha `--lp-escuridao`, como o resto da barra — sobre seção escura o traço vira branco. */ .lp-menu{ display:none; place-items:center; grid-template-areas:"ico"; flex:none; width:38px; height:38px; padding:0; cursor:pointer; background:none; border-radius:50%; border:1px solid color-mix(in srgb, rgba(255,255,255,.32) calc(var(--lp-escuridao, 0) * 100%), var(--lp-borda)); color:color-mix(in srgb, #fff calc(var(--lp-escuridao, 0) * 100%), var(--lp-tinta)); } .lp-menu svg{ grid-area:ico; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:opacity .18s, transform .22s; } .lp-menu-x{ opacity:0; transform:rotate(-90deg) scale(.7); } .lp-menu[aria-expanded="true"] .lp-menu-ico{ opacity:0; transform:rotate(90deg) scale(.7); } .lp-menu[aria-expanded="true"] .lp-menu-x{ opacity:1; transform:none; } .lp-menu[aria-expanded="true"]{ border-color:var(--lp-roxo); color:var(--lp-roxo); background:var(--lp-roxo-fundo); } @media (prefers-reduced-motion: reduce){ .lp-menu svg{ transition:opacity .18s; transform:none; } .lp-menu[aria-expanded="true"] .lp-menu-ico{ transform:none; } } @media (max-width:1000px){ .lp-menu{ display:grid; } .lp-nav-cx{ padding-left:18px; } /* ---------- os links viram painel ---------- Antes era `display:none` e ponto: cinco itens do menu principal desapareciam no celular sem nada que os alcançasse. Agora a mesma caixa desce como painel abaixo da barra. Branco sólido, e não vidro: o painel cobre conteúdo da página, e o desfoque que funciona na barra fina deixa o texto de trás aparecendo numa caixa alta. A cor do texto também volta a ser fixa — o `color-mix` de `--lp-escuridao` pintaria os links de branco sobre o branco do painel quando a barra estivesse sobre uma seção escura. */ .lp-nav-links{ display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; gap:0; margin-left:0; padding:8px; border-radius:24px; background:#fff; border:1px solid var(--lp-borda); box-shadow:0 18px 44px rgba(11,16,51,.16); color:var(--lp-tinta); max-height:calc(100dvh - 120px); overflow-y:auto; } .lp-nav.aberto .lp-nav-links{ display:flex; } /* O prefixo `.lp-nav.aberto` não é enfeite: `.lp-nav-links a` lá em cima dá `padding:4px 0` aos links da barra, e com a mesma especificidade (0,1,1) ele venceria aqui — os itens do painel ficariam sem respiro lateral, e só o "Soluções" (que casa com um seletor mais específico) teria o seu. Foi exatamente o que aconteceu na primeira tentativa. */ .lp-nav.aberto .lp-nav-links > *, .lp-nav.aberto .lp-nav-links .lp-submenu-pai > a{ display:block; padding:13px 14px; border-radius:14px; font-size:1rem; } /* "Soluções" é um dentro de um invólucro (o pai da cortina). Os dois casam com a regra acima, e o item ficava com o dobro da altura dos outros — o espaçamento é do link, não da caixa em volta dele. */ .lp-nav.aberto .lp-nav-links > .lp-submenu-pai{ padding:0; } .lp-nav.aberto .lp-nav-links > * + *{ border-top:1px solid var(--lp-borda); border-radius:0; } /* O "Fale conosco" do painel é o sobressalente do botão da barra: enquanto o da barra couber, este não existe. A regra precisa da mesma especificidade (0,4,0) da de cima, senão o `display:block` dela o traz de volta e o item aparece duas vezes na mesma tela — foi o que aconteceu em 768px. Quem o libera é o @media de 430px, mais abaixo. */ .lp-nav.aberto .lp-nav-links > .lp-menu-zap{ display:none; } .lp-nav-links a:active{ background:var(--lp-cinza); } .lp-nav-links a:hover{ color:var(--lp-roxo); } /* A cortina de Soluções é de ponteiro: no toque ela abriria por cima do próprio painel. "Soluções" vira o link que já era, para /solucoes, e a seta que prometia uma cortina sai junto. */ .lp-nav-links .lp-submenu{ display:none; } .lp-nav-links .lp-submenu-pai > a i{ display:none; } } /* No celular os dois botões continuam: esconder o "Login" deixaria sem entrada quem já é cliente e abriu o site pelo telefone — que é como a maioria abre. Eles encolhem, não somem. */ @media (max-width:560px){ .lp-nav-cx{ padding:7px 7px 7px 14px; gap:8px; } .lp-marca img{ height:16px; } /* Numa barra de 375px o logotipo deitado já come metade da largura; os dois botões precisam caber no resto. */ .lp-nav-acoes{ margin-left:auto; } .lp-nav-acoes .lp-btn{ padding:8px 12px; font-size:.78rem; } .lp-menu{ width:34px; height:34px; } .lp-menu svg{ width:19px; height:19px; } } /* Abaixo disso a barra tem logotipo, dois botões e a maleta na mesma linha, e o "Fale conosco" é o que estoura primeiro. Ele desce para o painel, em largura cheia — continua a um toque de distância, e o WhatsApp também está no rodapé e na chamada do fim de toda página. */ @media (max-width:430px){ .lp-nav-acoes .lp-btn-primario{ display:none; } /* Mesma corrida de especificidade da regra dos itens: a linha divisória de `> * + *` vem com (0,3,0) e arredondava o botão em 0 — ele ficava quadrado, encostado nos cantos do painel. */ .lp-nav.aberto .lp-nav-links > .lp-menu-zap{ display:block; margin-top:8px; border-top:0; border-radius:16px; background:var(--lp-roxo); color:#fff; text-align:center; font-weight:600; } .lp-nav.aberto .lp-nav-links > .lp-menu-zap:hover{ color:#fff; } } /* No desktop nem o botão do menu nem o painel existem: o "Fale conosco" do painel também não. Ele só volta no @media de 430px, acima. */ .lp-menu-zap{ display:none; } /* ============================================================ herói ============================================================ */ .lp-heroi{ position:relative; padding:160px 0 96px; text-align:center; color:#fff; /* O halo redondo genérico saiu: quem ilumina o herói agora é a marca (ver .lp-heroi-luz logo abaixo). */ background:linear-gradient(170deg, var(--lp-azul) 0%, #10165E 52%, var(--lp-azul-fundo) 100%); overflow:hidden; } /* O brilho é decorativo: `pointer-events:none` para não roubar o clique do botão, que fica logo em cima dele. */ .lp-heroi::after{ content:""; position:absolute; inset:auto -10% -55% -10%; height:60%; background:radial-gradient(60% 100% at 50% 0%, rgba(232,69,95,.22), transparent 70%); pointer-events:none; } .lp-heroi > *{ position:relative; z-index:1; } /* ============================================================ a marca no herói ============================================================ Duas camadas do mesmo Đ, cada uma fazendo uma coisa: .lp-heroi-luz o brilho do herói, agora com a forma da marca. Resolve o vazio do meio e dá profundidade. .lp-heroi::before o contorno, que é o que faz o olho RECONHECER a marca quando repara nela. Sozinha, a luz é vaga demais; sozinho, o contorno é um adesivo. A marca fica fora do centro, sangrando pela direita. Centralizada atrás do título ela vira "logotipo atrás do texto", e a barra do Đ fica boiando como uma caixa solta no meio da frase. Deslocada, ela emoldura em vez de competir, e a barra sai pela borda, onde não pede explicação. --pvx/--pvy vêm do marcaDoHeroi, em assets/js/landing.js. Sem script, no toque e com movimento reduzido ficam em zero: a marca fica parada onde nasceu e o herói continua o mesmo. */ .lp-heroi-luz{ position:absolute; z-index:0; pointer-events:none; top:-26%; right:-18%; width:70%; aspect-ratio:134/120; /* O desfoque precisa de DOIS elementos: no mesmo, o navegador aplica o filtro e SÓ DEPOIS recorta pela máscara — a borda volta a ficar dura e o resultado é o logotipo atrás do texto, que é o clichê que este caminho existe para evitar. Com o pai desfocando o filho já mascarado, a luz espalha para fora da forma. */ filter:blur(85px); translate:var(--pvx, 0px) var(--pvy, 0px); transition:translate .5s cubic-bezier(.22,.61,.36,1); } .lp-heroi-luz::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, #7C6BFF, #4430E8 52%, #E8455F); -webkit-mask:url("/assets/img/marca-d.svg") no-repeat center / contain; mask:url("/assets/img/marca-d.svg") no-repeat center / contain; } .lp-heroi::before{ content:""; position:absolute; z-index:0; pointer-events:none; top:-20%; right:-16%; width:66%; aspect-ratio:134/120; background:rgba(255,255,255,.5); /* O traço sai de duas máscaras: a marca cheia MENOS a marca encolhida por dentro. O "exclude" deixa só a casca entre as duas. */ -webkit-mask: url("/assets/img/marca-d.svg") no-repeat center / contain, url("/assets/img/marca-d.svg") no-repeat center / calc(100% - 6px) calc(100% - 6px); -webkit-mask-composite:xor; mask: url("/assets/img/marca-d.svg") no-repeat center / contain, url("/assets/img/marca-d.svg") no-repeat center / calc(100% - 6px) calc(100% - 6px); mask-composite:exclude; opacity:.38; /* Anda menos que a luz: o traço é o desenho e a luz é o ambiente. Se os dois corressem juntos, o conjunto viraria um adesivo deslizando. */ translate:calc(var(--pvx, 0px) * .35) calc(var(--pvy, 0px) * .35); transition:translate .5s cubic-bezier(.22,.61,.36,1); } /* No celular as medidas em % da largura do herói jogavam a marca inteira para fora, e sobrava um risco no canto. Aqui ela volta para dentro e cresce: numa coluna estreita o Đ é o que dá o que a largura não dá. A opacidade cai um pouco porque o texto empilhado ocupa quase todo o campo, e o traço passaria por baixo dele. */ @media (max-width:760px){ .lp-heroi-luz{ top:-8%; right:-36%; width:118%; filter:blur(60px); } .lp-heroi::before{ top:-4%; right:-34%; width:112%; opacity:.3; } } .lp-olho{ display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#B9C2FF; margin-bottom:18px; } /* 10% maior que antes (era 2.4/6vw/4.2rem) e mais apertado na vertical: o 1.12 do h1 genérico abre demais numa frase de três linhas deste tamanho. Não dá para apertar muito mais — as palavras são animadas dentro de máscaras com `overflow:hidden` (partirEmPalavras, em landing.js) e a altura da máscara sai daqui; abaixo de ~1.0 o itálico de "pacientes" bate na borda e perde o rabo do p. */ .lp-heroi h1{ font-size:clamp(2.64rem, 6.6vw, 4.62rem); line-height:1.04; max-width:16ch; margin-inline:auto; } .lp-heroi h1 em{ font-style:italic; font-family:var(--lp-serif); font-weight:400; } .lp-heroi .lp-sub{ margin:24px auto 0; max-width:56ch; color:#C9D0F5; font-size:1.06rem; } .lp-heroi .lp-sub b{ color:#fff; font-weight:600; } .lp-heroi .lp-acoes{ justify-content:center; margin-top:34px; } .lp-selos{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:34px; font-size:.88rem; color:#A9B4EC; } .lp-selos span::before{ content:"✓"; color:#6BE3C0; margin-right:7px; font-weight:700; } /* ---------- o pulo dos ícones ---------- A frase NÃO vira `inline-block`: ela quebra em duas linhas no título, e uma caixa em linha inteira forçaria tudo numa só. O palco é irmão dela, posicionado sobre o herói, e o JavaScript calcula onde a frase está na hora de soltar os ícones. */ .lp-pula{ cursor:default; } .lp-pulo{ position:absolute; inset:0; z-index:2; pointer-events:none; } .lp-pulo span{ position:absolute; display:block; will-change:transform, opacity; } .lp-pulo svg{ width:30px; height:30px; display:block; overflow:visible; } .lp-pulo path{ fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(255,255,255,.65)) drop-shadow(0 0 14px var(--lp-rosa)); } /* o preço que vem do banco entra aqui; nasce escondido */ /* Sem cápsula: só a linha de texto, em rosa. O tom é mais claro que o `--lp-rosa` da marca (#E8455F) porque aqui ele cai sobre o azul-escuro do herói — o rosa do botão, que vive sobre branco, fica escuro demais para ler neste fundo. */ .lp-heroi-preco{ margin-top:24px; display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:#FF6B87; } .lp-heroi-preco b{ color:#FF6B87; font-weight:700; } /* ============================================================ autoridade — o segundo herói, claro ============================================================ */ .lp-autoridade{ padding:110px 0 90px; background:#fff; } .lp-autoridade-cx{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; } .lp-autoridade h2{ font-size:clamp(2.1rem, 4.4vw, 3.3rem); } .lp-autoridade h2 .lp-serif{ display:block; color:var(--lp-roxo); } .lp-autoridade p{ margin-top:22px; color:var(--lp-tinta-2); font-size:1.05rem; max-width:52ch; } .lp-autoridade p b{ color:var(--lp-tinta); font-weight:600; } .lp-autoridade .lp-acoes{ margin-top:30px; } /* o painel que ilustra — os mesmos elementos do sistema de verdade */ .lp-vitrine{ position:relative; } .lp-janela{ border-radius:20px; overflow:hidden; background:#0E1330; border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 70px rgba(11,16,51,.28); } .lp-janela-topo{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#161C41; color:#8C97CF; font-size:.76rem; } .lp-janela-topo i{ width:9px; height:9px; border-radius:50%; background:#39406E; } .lp-janela-topo span{ margin-left:10px; } .lp-janela-corpo{ display:flex; min-height:280px; } .lp-mock-lado{ width:56px; padding:14px 10px; background:#0A0F28; display:flex; flex-direction:column; gap:9px; } .lp-mock-marca{ width:30px; height:30px; border-radius:9px; background:var(--lp-roxo); display:grid; place-items:center; color:#fff; font-size:.8rem; } .lp-mock-item{ height:9px; border-radius:5px; background:#1C2350; } .lp-mock-item.on{ background:var(--lp-roxo); } .lp-mock-main{ flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; } .lp-mock-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .lp-mock-kpi{ background:#151B41; border-radius:12px; padding:11px; } .lp-mock-kpi b{ display:block; color:#fff; font-size:1.15rem; } .lp-mock-kpi span{ color:#7E89C4; font-size:.7rem; } .lp-mock-agenda{ display:flex; flex-direction:column; gap:8px; } .lp-mock-slot{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; background:#151B41; border-left:3px solid var(--lp-roxo); } .lp-mock-slot b{ color:#B9C2FF; font-size:.76rem; } .lp-mock-slot span{ color:#fff; font-size:.82rem; } .lp-mock-slot.teal{ border-left-color:#0FB5A0; } .lp-mock-slot.laranja{ border-left-color:#E69500; } .lp-chip{ position:absolute; display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:14px; background:#fff; font-size:.82rem; font-weight:600; box-shadow:0 14px 34px rgba(11,16,51,.16); white-space:nowrap; } .lp-chip b{ color:var(--lp-roxo); } .lp-chip-1{ left:-34px; top:44%; } .lp-chip-2{ right:-18px; bottom:10%; } .lp-chip-3{ right:4%; top:-20px; } @media (max-width:900px){ .lp-autoridade-cx{ grid-template-columns:1fr; gap:44px; } .lp-chip-1{ left:-8px; } .lp-chip-2{ right:-8px; } } /* ============================================================ o momento da decisão — três cartões ============================================================ */ .lp-momento{ padding:0 0 100px; background:#fff; } .lp-momento-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .lp-momento-cx{ border:1px solid var(--lp-borda); border-radius:var(--lp-raio); padding:28px; background:#fff; transition:box-shadow .25s, transform .25s, border-color .25s; } .lp-momento-cx:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,16,51,.09); border-color:#D7D7EA; } .lp-momento-cx h3{ font-size:1.02rem; color:var(--lp-roxo); margin-bottom:12px; } .lp-momento-cx p{ color:var(--lp-tinta-2); font-size:.95rem; } .lp-momento-cx p b{ color:var(--lp-tinta); font-weight:600; } @media (max-width:860px){ .lp-momento-grade{ grid-template-columns:1fr; } } /* ============================================================ presença digital é decisiva ============================================================ */ .lp-decisiva{ padding:96px 0; color:#fff; overflow:hidden; background:linear-gradient(140deg, var(--lp-roxo) 0%, #1B0E9E 55%, var(--lp-azul) 100%); } .lp-decisiva-cx{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; } /* ---------- o celular encosta no fim da seção ---------- Ele desce até passar da borda e o `overflow:hidden` acima corta o resto: o aparelho não "flutua" no meio de um retângulo colorido, ele nasce do fim da seção. A margem negativa come os 96px de respiro da seção mais o corte — por isso o número não é redondo. O corte é de 30px, e não mais: abaixo disso some a moldura de baixo e o aparelho passa a continuar fora da tela, que é o efeito. Cortando mais fundo o próximo a sair é o "Agendar consulta", que fica preso ao rodapé da TELA — e é ele o assunto desta seção. */ /* 96px do respiro da seção + 103px de aparelho abaixo da borda (os 89 do --fn-corte mais os 14 da moldura). Os 103 passam dos 56 do raio, e é isso que faz a curva de baixo sumir por inteiro: o aparelho não termina, ele sai da seção. */ /* --fn-zoom encolhe o aparelho INTEIRO onde 380px não cabem. É transform, e não uma largura menor: as medidas de dentro são todas em px, então estreitar a moldura deixaria a interface do mesmo tamanho dentro de um aparelho menor. A margem acompanha o zoom — senão o corte continuaria com 103px e comeria o botão de um aparelho que encolheu. */ .lp-fone-cx{ --fn-zoom:1; align-self:end; margin-bottom:calc(-96px - 102.6px * var(--fn-zoom)); } .lp-decisiva h2{ font-size:clamp(2rem, 4.2vw, 3rem); } .lp-decisiva h2 .lp-serif{ display:block; } .lp-decisiva > * > p{ margin-top:20px; color:#CFD4FF; font-size:1.04rem; max-width:48ch; } .lp-ganhos{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px; } .lp-ganhos li{ display:flex; gap:13px; align-items:flex-start; font-size:1rem; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); } .lp-ganhos li::before{ content:"→"; color:#6BE3C0; font-weight:700; flex:none; } /* ============================================================ o celular — o caminho do paciente, encenado ============================================================ Quatro passos num ciclo, dirigidos por `data-passo` no .lp-fone (quem escreve o atributo é o `fluxoDoFone`, em assets/js/landing.js): 1 a página do médico, com o botão fixo no rodapé 2 o toque no botão 3 a folha de horários aberta, escolhendo 4 confirmado Tudo o que se move é `transform` e `opacity` — as duas propriedades que o navegador anima sem refazer layout. Numa seção que já tem degradê, sombra grande e o herói rolando atrás, animar altura aqui custaria quadro em telefone modesto. A tela tem ALTURA FIXA (`aspect-ratio`) de propósito: a folha de horários é posicionada contra o rodapé dela, e uma tela que muda de altura conforme o conteúdo faria a folha entrar de lugares diferentes a cada passo. */ .lp-fone{ /* --fn-corte: quanto da TELA fica escondido abaixo da borda da seção. Tudo o que é ancorado no rodapé da tela (o botão fixo, a folha de horários, o dedo) sobe esse tanto — senão o corte comeria justamente o que a seção existe para mostrar. Um número só, num lugar só: mudar a profundidade do corte é mudar esta linha. */ --fn-corte:88.67px; position:relative; width:380px; margin-inline:auto; transform:scale(var(--fn-zoom, 1)); transform-origin:bottom center; border-radius:55.73px; padding:13.93px; background:#0A0F28; border:1.27px solid rgba(255,255,255,.16); box-shadow:0 43.07px 88.67px rgba(0,0,0,.42); } /* a ilha do alto, que é o que faz o desenho ler como telefone e não como cartão de canto arredondado */ .lp-fone-orelha{ position:absolute; z-index:3; top:20.27px; left:50%; translate:-50% 0; width:93.73px; height:24.07px; border-radius:125.4px; background:#0A0F28; } .lp-fone-tela{ position:relative; border-radius:43.07px; overflow:hidden; background:#F4F5FB; aspect-ratio:9/18; color:var(--lp-tinta); font-size:0.91rem; line-height:1.45; } /* ---------- a barra do sistema ---------- */ .fn-status{ position:absolute; inset:0 0 auto; z-index:6; height:43.07px; display:flex; align-items:center; justify-content:space-between; padding:0 20.27px; font-size:0.79rem; font-weight:700; color:var(--lp-tinta); background:linear-gradient(#F4F5FB 62%, rgba(244,245,251,0)); } .fn-sinais{ width:32.93px; height:10.13px; border-radius:2.53px; background:currentColor; opacity:.28; } /* ---------- a página do médico ---------- Ela ROLA no passo 1 e para quando a folha sobe: é o que sugere que havia conteúdo a percorrer antes da decisão. A rolagem é um translate, não um scroll de verdade — scroll dentro de uma ilustração pega o dedo de quem estava rolando a página e prende ali. */ .fn-pagina{ position:absolute; inset:43.07px 0 0; padding:7.6px 20.27px calc(116.53px + var(--fn-corte)); transition:translate 5s linear; } .lp-fone[data-passo="1"] .fn-pagina{ translate:0 -58.27px; } .fn-url{ display:flex; align-items:center; gap:7.6px; background:#E7E9F4; border-radius:10.13px; padding:6.33px 11.4px; font-size:0.73rem; color:var(--lp-tinta-2); margin-bottom:15.2px; } .fn-url i{ width:10.13px; height:10.13px; border-radius:2.53px; background:#6BE3C0; flex:none; } .fn-medico{ display:flex; align-items:center; gap:12.67px; } .fn-av{ flex:none; width:48.13px; height:48.13px; border-radius:50%; display:grid; place-items:center; font-size:0.96rem; font-weight:700; background:var(--lp-roxo); color:#fff; } .fn-id b{ display:block; font-size:1.01rem; line-height:1.25; } .fn-id small{ color:var(--lp-tinta-2); font-size:0.81rem; } .fn-selos{ display:flex; gap:6.33px; margin:13.93px 0; } .fn-selos span{ background:var(--lp-roxo-fundo); color:var(--lp-roxo); border-radius:125.4px; padding:3.8px 11.4px; font-size:0.73rem; font-weight:700; } .fn-dados{ list-style:none; margin:0 0 13.93px; padding:0; display:grid; gap:7.6px; } .fn-dados li{ display:flex; gap:8.87px; font-size:0.81rem; color:var(--lp-tinta-2); } .fn-dados i{ font-style:normal; flex:none; } .fn-texto{ margin:0 0 10.13px; font-size:0.81rem; color:var(--lp-tinta-2); } /* ---------- o botão que acompanha a rolagem ---------- É o ponto da encenação. Fica preso ao rodapé da TELA, não ao fim da página: por isso o degradê por trás dele, que é o que o site de verdade usa para o conteúdo passar por baixo sem sujar o botão. */ .fn-rodape{ position:absolute; left:0; right:0; bottom:var(--fn-corte); z-index:2; padding:20.27px 20.27px 15.2px; background:linear-gradient(rgba(244,245,251,0), #F4F5FB 42%); transition:translate .32s cubic-bezier(.32,.72,0,1), opacity .2s; } .fn-cta{ display:block; text-align:center; border-radius:16.47px; padding:13.93px 0; background:var(--lp-roxo); color:#fff; font-weight:700; font-size:0.96rem; box-shadow:0 10.13px 25.33px rgba(60,30,220,.34); transition:scale .18s cubic-bezier(.32,.72,0,1), filter .18s; } /* o toque: o botão afunda um pouco, como afunda debaixo do dedo */ .lp-fone[data-passo="2"] .fn-cta{ scale:.955; filter:brightness(.9); } /* com a folha aberta, o botão sai de cena por baixo dela */ .lp-fone[data-passo="3"] .fn-rodape, .lp-fone[data-passo="4"] .fn-rodape{ translate:0 100%; opacity:0; } /* ---------- a folha de horários ---------- */ .fn-veu{ position:absolute; inset:0; z-index:3; background:rgba(11,16,51,.34); opacity:0; pointer-events:none; transition:opacity .3s; } .lp-fone[data-passo="3"] .fn-veu, .lp-fone[data-passo="4"] .fn-veu{ opacity:1; } .fn-folha{ position:absolute; left:0; right:0; bottom:var(--fn-corte); z-index:4; background:#fff; border-radius:27.87px 27.87px 0 0; padding:12.67px 20.27px 17.73px; box-shadow:0 -17.73px 43.07px rgba(11,16,51,.2); translate:0 calc(100% + var(--fn-corte)); transition:translate .44s cubic-bezier(.32,.72,0,1); } .lp-fone[data-passo="3"] .fn-folha{ translate:0 0; } /* no fim ela desce de novo, para o "confirmado" ficar sozinho na tela */ /* 100% da folha + o corte: descer só 100% deixaria a borda dela visível acima da linha do corte, como uma faixa branca sem explicação. */ .lp-fone[data-passo="4"] .fn-folha{ translate:0 calc(100% + var(--fn-corte)); } .fn-puxador{ display:block; width:43.07px; height:5.07px; border-radius:125.4px; background:#D8DBEA; margin:0 auto 12.67px; } .fn-folha-tit{ display:block; font-size:0.96rem; margin-bottom:11.4px; } .fn-dias{ display:flex; gap:6.33px; margin-bottom:13.93px; } .fn-dias span{ flex:1; text-align:center; border-radius:11.4px; padding:6.33px 0; background:#F1F2F9; font-size:0.7rem; color:var(--lp-tinta-2); font-weight:600; } .fn-dias span b{ display:block; font-size:0.94rem; color:var(--lp-tinta); } .fn-dias span.on{ background:var(--lp-roxo); color:#fff; } .fn-dias span.on b{ color:#fff; } /* Os horários entram um a um, e não todos juntos: é o que dá a sensação de lista carregando, e é o que a seção promete — a agenda abrindo. */ .fn-horas{ display:grid; grid-template-columns:repeat(3,1fr); gap:7.6px; margin-bottom:15.2px; } .fn-horas span{ border-radius:11.4px; padding:8.87px 0; text-align:center; background:#F1F2F9; font-size:0.84rem; font-weight:600; opacity:0; translate:0 8.87px; transition:opacity .26s, translate .26s, background .2s, color .2s; } .lp-fone[data-passo="3"] .fn-horas span, .lp-fone[data-passo="4"] .fn-horas span{ opacity:1; translate:0 0; } .fn-horas span:nth-child(1){ transition-delay:.14s; } .fn-horas span:nth-child(2){ transition-delay:.19s; } .fn-horas span:nth-child(3){ transition-delay:.24s; } .fn-horas span:nth-child(4){ transition-delay:.29s; } .fn-horas span:nth-child(5){ transition-delay:.34s; } .fn-horas span:nth-child(6){ transition-delay:.39s; } /* horário já tomado: existe para a grade não parecer um consultório vazio */ .fn-horas span.off{ color:#B4B9CE; text-decoration:line-through; } /* o escolhido só acende depois que a lista terminou de entrar */ .lp-fone[data-passo="3"] .fn-horas span.alvo, .lp-fone[data-passo="4"] .fn-horas span.alvo{ background:var(--lp-roxo); color:#fff; transition-delay:.85s; } .fn-confirmar{ display:block; text-align:center; border-radius:15.2px; padding:12.67px 0; background:#E9EAF5; color:#9AA0BF; font-weight:700; font-size:0.91rem; transition:background .25s, color .25s; } /* o botão só fica verdadeiro quando há horário escolhido — como no site */ .lp-fone[data-passo="3"] .fn-confirmar, .lp-fone[data-passo="4"] .fn-confirmar{ background:var(--lp-roxo); color:#fff; transition-delay:.95s; } /* ---------- confirmado ---------- */ .fn-pronto{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.8px; text-align:center; padding:0 32.93px var(--fn-corte); background:#fff; opacity:0; pointer-events:none; transition:opacity .3s; } .lp-fone[data-passo="4"] .fn-pronto{ opacity:1; transition-delay:.18s; } .fn-pronto-ico{ width:58.27px; height:58.27px; border-radius:50%; margin-bottom:10.13px; display:grid; place-items:center; background:#EAF8EE; color:#2D6A3A; scale:.6; transition:scale .42s cubic-bezier(.34,1.56,.64,1); } .lp-fone[data-passo="4"] .fn-pronto-ico{ scale:1; transition-delay:.26s; } .fn-pronto-ico svg{ width:27.87px; height:27.87px; } .fn-pronto b{ font-size:1.11rem; } .fn-pronto small{ color:var(--lp-tinta-2); font-size:0.86rem; } .fn-pronto-nota{ margin-top:11.4px; font-size:0.76rem; color:var(--lp-roxo); font-weight:600; background:var(--lp-roxo-fundo); border-radius:125.4px; padding:5.07px 12.67px; } /* ---------- o dedo ---------- Um círculo, não uma mão desenhada: a mão pede uma ilustração que o resto do site não tem, e o círculo é como o próprio sistema operacional mostra um toque quando se grava a tela. */ /* Medido a partir do RODAPÉ da tela, e não do topo: os dois alvos do dedo — o botão fixo e o chip do horário — são ancorados embaixo. Em porcentagem contada do topo, cada ajuste no corte desalinhava os dois. */ .fn-toque{ position:absolute; z-index:7; width:40.53px; height:40.53px; border-radius:50%; background:rgba(11,16,51,.16); border:1.9px solid rgba(11,16,51,.3); left:50%; bottom:calc(var(--fn-corte) + 38px); translate:-50% 50%; opacity:0; scale:1.5; pointer-events:none; transition:opacity .16s, scale .22s cubic-bezier(.32,.72,0,1), bottom .3s, left .3s; } .lp-fone[data-passo="2"] .fn-toque{ opacity:1; scale:1; } /* no passo 3 ele sobe até o horário escolhido, no meio da grade */ .lp-fone[data-passo="3"] .fn-toque{ opacity:1; scale:1; bottom:calc(var(--fn-corte) + 97.53px); left:20%; transition-delay:.7s; } @media (prefers-reduced-motion: reduce){ /* Sem movimento, a folha fica aberta e parada: é o quadro que conta a história inteira em uma imagem só. */ .fn-pagina, .fn-rodape, .fn-cta, .fn-folha, .fn-veu, .fn-horas span, .fn-confirmar, .fn-pronto, .fn-pronto-ico, .fn-toque{ transition:none !important; } .fn-toque{ display:none; } } /* 380px não cabem num telefone de 375: o aparelho encostava nas duas bordas e a seção o cortava dos lados. */ @media (max-width:480px){ .lp-fone-cx{ --fn-zoom:.8; } } @media (max-width:900px){ .lp-decisiva-cx{ grid-template-columns:1fr; } /* Empilhado, o celular é o último bloco da seção e continua encostando no fim dela — só com menos respiro por cima, que aqui é do texto. */ .lp-fone-cx{ margin-top:12px; } } /* ============================================================ o ecossistema — texto de marca ============================================================ */ /* ============================================================ o que somos ============================================================ */ /* Cinza entre o herói escuro e a seção branca de cima da página: sem ele, este bloco e a "autoridade" logo abaixo virariam uma faixa branca só. */ .lp-somos{ padding:96px 0; background:var(--lp-cinza); } .lp-somos-cx{ max-width:860px; margin-inline:auto; text-align:center; } /* As três linhas são de bloco dentro do MESMO h2: é uma frase só, com um ritmo de três tempos, e quebrá-la em três títulos diria ao leitor de tela que são três assuntos. A animação de entrada (gsap-text-entrance) também trata tudo como um bloco e faz as palavras chegarem em sequência. */ .lp-somos h2{ font-size:clamp(1.9rem, 4.4vw, 3.1rem); line-height:1.16; } .lp-somos-nao{ display:block; color:var(--lp-tinta-2); font-weight:600; /* as negações recuam: menores e mais claras que a afirmação */ font-size:.74em; } .lp-somos-sim{ display:block; margin-top:.28em; color:var(--lp-roxo); } .lp-somos-sim em{ font-style:italic; font-family:var(--lp-serif); font-weight:400; } .lp-somos-texto{ margin:28px auto 0; max-width:62ch; color:var(--lp-tinta-2); font-size:1.06rem; line-height:1.7; } .lp-somos-texto b{ color:var(--lp-tinta); font-weight:600; } /* As peças do ecossistema. Pílula branca sobre o cinza — o mesmo material dos cartões da página, em tamanho de etiqueta. */ .lp-somos-pecas{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; } .lp-somos-pecas a{ display:block; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--lp-borda); font-size:.88rem; font-weight:600; color:var(--lp-tinta); transition:border-color .2s, color .2s, transform .2s; } .lp-somos-pecas a:hover{ border-color:var(--lp-roxo); color:var(--lp-roxo); transform:translateY(-2px); } .lp-somos .lp-acoes{ justify-content:center; margin-top:36px; } @media (max-width:760px){ .lp-somos{ padding:72px 0; } .lp-somos-pecas{ gap:8px; } .lp-somos-pecas a{ padding:8px 13px; font-size:.82rem; } } .lp-eco{ padding:100px 0; background:var(--lp-cinza); } .lp-eco-cx{ max-width:760px; margin-inline:auto; text-align:center; } .lp-eco h2{ font-size:clamp(1.9rem, 4vw, 2.8rem); } .lp-eco p{ margin-top:22px; color:var(--lp-tinta-2); font-size:1.06rem; } .lp-eco p b{ color:var(--lp-tinta); font-weight:600; } .lp-eco .lp-acoes{ justify-content:center; margin-top:34px; } /* ============================================================ cabeçalho de seção ============================================================ */ .lp-cab{ text-align:center; max-width:720px; margin:0 auto 52px; } /* Vale fora do cabeçalho também (as dúvidas usam um à esquerda), por isso a classe é solta e não descendente de .lp-cab. */ .lp-kicker{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lp-roxo); margin-bottom:14px; } .lp-cab h2{ font-size:clamp(1.8rem, 3.8vw, 2.7rem); } .lp-cab p{ margin-top:16px; color:var(--lp-tinta-2); font-size:1.02rem; } .lp-escuro .lp-kicker{ color:#9FA9FF; } .lp-escuro .lp-cab p{ color:#C2C9F0; } /* ============================================================ serviços — os cartões grandes Reprodução do cartão do site atual, camada por camada. A receita de fundo é a mesma quatro-camadas do original — e não um degradê sobre uma foto: 1. o degradê da cor (331.96deg), opaco no canto e sumindo aos 81% 2. um degradê transparente em `soft-light` (herdado do original) 3. a MESMA foto de novo, em `overlay` 4. a foto É a camada 3 que faz o brilho: a foto misturada consigo mesma em `overlay` estoura o contraste e satura a cor, e é por isso que o cartão parece ter luz própria em vez de ser uma imagem escurecida. Trocar por um degradê simples chega perto na cor e erra o brilho inteiro. ============================================================ */ .lp-servicos{ padding:100px 0; background:#fff; } /* O original tem 1280px de cartão em 1440 de tela: 80px de respiro de cada lado. Esta seção é mais larga que o resto da página de propósito. */ .lp-servicos > .lp-larg{ width:min(100% - 40px, 1280px); } /* ---------- a pilha ---------- Bloco simples, e não grade: item de grade fica preso à própria linha, e `sticky` dentro dela para na hora de subir por cima do vizinho — que é justamente o efeito. Em fluxo normal os cartões se sobrepõem de verdade. */ .lp-servicos-pilha{ display:block; } .lp-servicos-pilha > .lp-servico{ margin-bottom:20px; } .lp-servicos-pilha > .lp-servico:last-child{ margin-bottom:0; } .lp-servico{ position:relative; border-radius:16px; /* a mesma transição do original */ transition:transform .4s ease; transform-origin:center top; } /* Cada cartão trava 12px mais abaixo que o anterior — é essa faixa que fica à mostra e conta quantos já passaram. Só no desktop: no celular a pilha vira uma coluna normal, porque cartão preso na tela pequena é cartão que o dedo não consegue passar. */ @media (min-width:861px){ /* `will-change` só aqui: ele promove cada cartão a uma camada própria, e dez camadas de foto em tela pequena é memória gasta por um efeito que nem existe no celular. */ .lp-servico{ position:sticky; top:calc(96px + var(--i, 0) * 12px); will-change:transform; } } /* ---------- a arte ---------- */ .lp-servico-arte{ position:relative; overflow:hidden; border-radius:16px; height:600px; padding:80px; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; background: linear-gradient(331.96deg, var(--esc) 19.06%, var(--cla) 33.75%, rgba(102,102,102,0) 81.42%), linear-gradient(100.48deg, rgba(0,0,0,0) .77%, rgba(13,42,141,0) 97.16%), var(--foto), var(--foto); background-blend-mode:normal, soft-light, overlay, normal; background-size:100% auto; background-position:0% 0%; /* O original deixa o `repeat` do padrão. Num cartão largo a foto escalada a 100% já passa da altura e ninguém vê — mas basta uma foto mais panorâmica para ela ladrilhar. */ background-repeat:no-repeat; transition:all .4s ease; } /* ---------- o mouse em cima ---------- O original escala duas vezes (o invólucro e a arte, 1.02 cada). Aqui a escala mora só na arte, em 1.04: o invólucro é quem o GSAP encolhe na pilha, e dois donos do mesmo `transform` brigam — o inline do GSAP ganha e o hover simplesmente não acontece. */ .lp-servico:hover .lp-servico-arte{ transform:scale(1.04); background-size:110% auto; filter:brightness(1.1) saturate(1.2); box-shadow:0 20px 60px rgba(37,99,235,.3); } /* ---------- o véu de quem ficou atrás ---------- Quem escurece o cartão empilhado é ESTE elemento, e não um `filter` no cartão inteiro: filtro atinge tudo que está dentro, inclusive o texto, e era isso que deixava as letras acinzentadas em vez de brancas. Aqui ele fica acima da foto e abaixo do texto (z-index 3 contra 100), então a profundidade continua e o branco continua branco. Quem move a opacidade é o landing.js; sem ele o véu fica invisível. */ .lp-servico-veu{ position:absolute; inset:0; z-index:3; pointer-events:none; background:#05080F; opacity:0; } /* o brilho que atravessa o cartão */ .lp-servico-arte::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.15), transparent 60%); opacity:0; transform:translateX(-100%); transition:all .6s ease; } .lp-servico:hover .lp-servico-arte::after{ opacity:1; transform:translateX(100%); } /* ---------- o texto ---------- Tudo alinhado à direita, no canto de baixo, numa coluna de 560px. */ .lp-servico-txt{ position:relative; z-index:100; width:560px; max-width:100%; display:flex; flex-direction:column; align-items:flex-end; gap:16px; text-align:right; } .lp-servico-dizeres{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; width:100%; } .lp-servico h3{ font-size:clamp(28px, 3.4vw, 48px); font-weight:600; line-height:1.25; color:#fff; letter-spacing:-.01em; margin:0; } .lp-servico-frase{ font-size:clamp(20px, 2.6vw, 36px); font-weight:700; line-height:1.11; color:#fff; letter-spacing:-.01em; } .lp-servico-desc{ font-family:Inter, var(--lp-sans); font-size:16px; font-weight:400; line-height:1.15; color:#fff; } /* O preço é acréscimo nosso — vem do banco. Entra como uma linha discreta para não mexer na tipografia que veio do original. */ .lp-servico-preco{ font-family:Inter, var(--lp-sans); font-size:14px; font-weight:600; color:#fff; margin-top:2px; } .lp-servico .lp-acoes{ justify-content:flex-end; gap:16px; } /* ---------- os dois botões ---------- "Saiba mais" usa a cor clara do próprio cartão; "Enviar mensagem" é branco com uma linha cinza. Os dois em pílula de 200px, 14px, peso 400. */ .lp-btn-saiba, .lp-btn-msg{ display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:200px; font-family:inherit; font-size:14px; font-weight:400; line-height:1.25; white-space:nowrap; transition:transform .2s, box-shadow .2s, background .2s; } .lp-btn-saiba{ background:var(--btn, var(--cla)); color:#fff; border:0; } .lp-btn-msg{ background:#fff; color:#1E2125; border:1px solid #E6E6E6; } .lp-btn-saiba:hover, .lp-btn-msg:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); } /* ---------- telas menores ---------- O original encolhe o cartão e empurra o texto para baixo; aqui a coluna de 560px passa a ocupar a largura toda e a altura vira mínima, senão o texto transborda num cartão de altura travada. */ @media (max-width:1100px){ .lp-servico-arte{ height:520px; padding:56px; } .lp-servico-txt{ width:min(560px, 100%); } } /* ---------- o cartão do sistema ---------- A foto dele é a mais clara do conjunto: luminária acesa à esquerda e janela ao fundo, e o texto do cartão mora à DIREITA — onde o degradê da cor já morreu (ele termina aos 81%). Nem escurecer as duas cores resolve sozinho, porque ali quem manda é a foto. Este véu entra pela direita, atrás do texto, e sai antes da metade para não apagar a imagem. É a mesma correção que o `::before` do celular faz logo abaixo, pelo mesmo motivo — por isso este fica limitado ao desktop, onde aquele não existe. Se os dois valessem juntos, o mais específico (este) apagaria o de lá. */ @media (min-width:861px){ .lp-servico[data-item="agenda"] .lp-servico-arte::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(270deg, rgba(8,11,20,.72), rgba(8,11,20,.38) 46%, transparent 78%); } } @media (max-width:860px){ .lp-servico-arte{ height:auto; min-height:420px; padding:32px 28px; /* `cover` no lugar de `100% auto`: num cartão estreito a foto escalada pela largura fica baixa demais e sobra fundo embaixo dela. */ background-size:cover, cover, cover, cover; background-position:50% 50%; } /* O degradê da cor vem do canto de baixo à direita e já morreu antes de chegar no topo — numa coluna estreita o título sobe para essa parte clara e some. Este véu existe só aqui; no desktop o original resolve sozinho e nada é acrescentado. */ .lp-servico-arte::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(8,11,40,.55), rgba(8,11,40,.2) 55%, transparent); } .lp-servico:hover .lp-servico-arte{ background-size:cover, cover, cover, cover; } .lp-servico-txt{ width:100%; gap:14px; } .lp-servico-desc{ font-size:15px; line-height:1.4; } .lp-servico .lp-acoes{ gap:10px; } .lp-btn-saiba, .lp-btn-msg{ padding:11px 18px; } } /* ============================================================ territórios digitais — os domínios, lidos do banco ============================================================ */ /* ============================================================ quem executa o quê ============================================================ Duas colunas porque a informação É a comparação. O lado da Domínio Médico leva o fundo da marca; o dos parceiros fica branco com borda — a diferença de peso já diz de quem é cada coluna antes de ler o rótulo. */ .lp-quem{ padding:96px 0; background:var(--lp-cinza); } .lp-quem-grade{ margin-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:18px; } .lp-quem-lado{ padding:30px 28px; border-radius:var(--lp-raio); background:#fff; border:1px solid var(--lp-borda); display:flex; flex-direction:column; } .lp-quem-dm{ background:var(--lp-roxo-fundo); border-color:transparent; } .lp-quem-papel{ display:block; margin-bottom:18px; font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--lp-tinta-2); } .lp-quem-lado ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; } .lp-quem-lado li{ position:relative; padding-left:24px; font-size:1rem; line-height:1.6; color:var(--lp-tinta-2); } .lp-quem-lado li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--lp-borda); } .lp-quem-dm li::before{ background:var(--lp-roxo); } .lp-quem-lado a{ color:var(--lp-tinta); font-weight:600; } .lp-quem-lado a:hover{ color:var(--lp-roxo); } /* ---------- a faixa de marcas ---------- Cinza por padrão: são marcas de outras empresas dentro da nossa página, e em cor cheia elas competem com tudo o que está em volta. A cor volta no hover, que é quando alguém está olhando para uma delas. */ /* Duas colunas fixas, e não `flex-wrap`: com quatro marcas de larguras diferentes a quebra natural dava três em cima e uma sozinha embaixo. */ .lp-quem-marcas{ margin-top:auto; padding-top:26px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:center; gap:18px 20px; } .lp-quem-marcas img{ justify-self:start; height:26px; width:auto; max-width:100%; filter:grayscale(1); opacity:.55; transition:filter .2s, opacity .2s; } .lp-quem-marcas img:hover{ filter:none; opacity:1; } /* O pé fecha a seção, e fecha pelo meio: é a mesma conversa do cabeçalho lá em cima, que também é centrado. Encostado à esquerda, ele lia como legenda da coluna da esquerda — e o que ele diz vale para as duas. `max-width` mais `margin-inline:auto` porque uma linha de 78ch centrada numa caixa de 1180px teria as duas pontas soltas. */ .lp-quem-pe{ margin-top:24px; max-width:78ch; margin-inline:auto; text-align:center; font-size:1rem; line-height:1.7; color:var(--lp-tinta-2); } .lp-quem-pe a{ color:var(--lp-roxo); font-weight:600; white-space:nowrap; } @media (max-width:820px){ .lp-quem{ padding:72px 0; } .lp-quem-grade{ grid-template-columns:1fr; } .lp-quem-marcas{ margin-top:22px; } } .lp-territorios{ padding:100px 0; background:var(--lp-cinza); } .lp-terr-busca{ display:flex; gap:10px; max-width:520px; margin:0 auto 26px; flex-wrap:wrap; } .lp-terr-busca input{ flex:1; min-width:220px; padding:14px 18px; border-radius:999px; border:1.5px solid var(--lp-borda); background:#fff; font-family:inherit; font-size:.95rem; color:var(--lp-tinta); } .lp-terr-busca input:focus{ outline:none; border-color:var(--lp-roxo); } .lp-terr-resumo{ text-align:center; color:var(--lp-tinta-2); font-size:.9rem; margin-bottom:24px; } .lp-terr-resumo b{ color:var(--lp-roxo); } /* Espaço reservado: a lista chega do banco depois da página, e sem uma altura mínima o rodapé salta para cima do dedo de quem já estava rolando. */ .lp-terr-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; min-height:280px; align-content:start; } .lp-terr{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-radius:14px; background:#fff; border:1px solid var(--lp-borda); font-size:.9rem; transition:border-color .2s, box-shadow .2s, transform .2s; } .lp-terr:hover{ border-color:var(--lp-roxo); box-shadow:0 10px 26px rgba(43,0,189,.1); transform:translateY(-2px); } .lp-terr b{ display:block; font-weight:600; letter-spacing:-.01em; } .lp-terr small{ color:var(--lp-tinta-2); font-size:.78rem; } .lp-terr-tag{ flex:none; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-radius:999px; background:#EAF8EE; color:#2D6A3A; } .lp-terr-tag.ocupado{ background:#F1F1F6; color:#8A90A8; } .lp-terr.ocupado{ opacity:.62; } .lp-terr.ocupado:hover{ transform:none; border-color:var(--lp-borda); box-shadow:none; } .lp-terr-vazio{ text-align:center; color:var(--lp-tinta-2); padding:30px; } .lp-terr-pe{ text-align:center; margin-top:30px; color:var(--lp-tinta-2); font-size:.9rem; } /* ============================================================ o problema de quem atende ============================================================ */ .lp-problema{ padding:100px 0; background:#fff; } .lp-problemas{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .lp-problema-item{ padding:28px 24px; border-radius:var(--lp-raio); background:var(--lp-cinza); border:1px solid var(--lp-borda); } /* Os mesmos ícones desenhados da seção "O sistema", na cor da marca. O brilho aqui é mais discreto: sobre fundo claro um halo forte não parece luz, parece borrão. */ /* Caixa branca com uma sombra leve, e não o quadrado tingido da seção escura: aqui o cartão já é cinza, e o branco levanta o ícone em vez de somar mais um tom por cima de outro. */ .lp-problema-item .lp-ico{ width:40px; height:40px; margin-bottom:14px; background:#fff; border-color:var(--lp-borda); box-shadow:0 1px 3px rgba(11,16,51,.07), 0 6px 16px rgba(11,16,51,.06); transition:box-shadow .25s, transform .25s; } .lp-problema-item:hover .lp-ico{ box-shadow:0 2px 5px rgba(11,16,51,.09), 0 10px 24px rgba(11,16,51,.1); transform:translateY(-2px); } .lp-problema-item .lp-ico path{ filter:drop-shadow(0 0 3px color-mix(in srgb, var(--cor) 45%, transparent)); } .lp-problema-item:hover .lp-ico path{ filter:drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 60%, transparent)); } .lp-problema-item p{ color:var(--lp-tinta-2); font-size:.95rem; } @media (max-width:900px){ .lp-problemas{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .lp-problemas{ grid-template-columns:1fr; } } /* ============================================================ o sistema ============================================================ */ .lp-sistema{ padding:100px 0; color:#fff; background:linear-gradient(160deg, var(--lp-azul-fundo), #0E1240 60%, #150B52); } .lp-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .lp-card{ padding:30px 26px; border-radius:var(--lp-raio); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); transition:background .25s, transform .25s, border-color .25s; } .lp-card:hover{ background:rgba(255,255,255,.1); transform:translateY(-4px); border-color:rgba(255,255,255,.22); } /* ---------- os ícones que se desenham ---------- Cada ícone é UM só, com vários subcaminhos quando precisa. Isso importa: o traço é desenhado de uma ponta à outra como uma linha contínua, e não como peças que aparecem em paralelo. Quem desenha é o landing.js (stroke-dashoffset). Aqui só a aparência — e o traço nasce INTEIRO, sem dash nenhum: se o script não rodar, o ícone está lá, desenhado, em vez de ser um quadrado vazio. */ .lp-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; background:color-mix(in srgb, var(--cor) 26%, transparent); border:1px solid color-mix(in srgb, var(--cor) 46%, transparent); } .lp-ico svg{ width:24px; height:24px; display:block; /* o brilho passa da caixa — cortar aqui apagaria o halo */ overflow:visible; } .lp-ico path{ fill:none; stroke:var(--cor); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px var(--cor)); transition:filter .3s, stroke-width .3s; } .lp-card:hover .lp-ico path{ filter:drop-shadow(0 0 9px var(--cor)); } .lp-card:hover .lp-ico path, .lp-problema-item:hover .lp-ico path{ stroke-width:1.7; } /* A ponta de luz: uma cópia do mesmo traço, curta e branca, que o JavaScript faz correr pelo caminho enquanto a linha nasce — é ela que dá a impressão de que alguém está desenhando o ícone. Nasce invisível; sem o script, continua invisível e não sobra nada estranho na tela. */ .lp-ico .lp-ico-luz{ stroke:#fff; stroke-width:2.2; opacity:0; filter:drop-shadow(0 0 5px var(--cor)) drop-shadow(0 0 10px #fff); } .lp-card h3{ font-size:1.1rem; margin-bottom:10px; } .lp-card p{ color:#BFC6EC; font-size:.94rem; } @media (max-width:900px){ .lp-grade{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .lp-grade{ grid-template-columns:1fr; } } /* ============================================================ secretária virtual ============================================================ */ .lp-secretaria{ padding:100px 0; background:var(--lp-roxo-fundo); } .lp-secretaria-cx{ display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:center; } .lp-etiqueta{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 13px; border-radius:999px; background:var(--lp-roxo); color:#fff; margin-bottom:18px; } .lp-secretaria h2{ font-size:clamp(1.9rem, 4vw, 2.8rem); } .lp-secretaria > * > p{ margin-top:20px; color:var(--lp-tinta-2); font-size:1.03rem; max-width:50ch; } .lp-lista{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; } .lp-lista li{ display:flex; gap:12px; font-size:.97rem; color:var(--lp-tinta-2); } .lp-lista li::before{ content:"✓"; color:var(--lp-roxo); font-weight:800; flex:none; } .lp-lista li b{ color:var(--lp-tinta); font-weight:600; } .lp-conversa{ background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 26px 60px rgba(43,0,189,.16); border:1px solid #E2DCFB; } .lp-conversa-topo{ display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--lp-roxo); color:#fff; } .lp-av{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; font-weight:700; font-size:.85rem; } .lp-conversa-topo b{ display:block; font-size:.95rem; } .lp-conversa-topo small{ opacity:.8; font-size:.74rem; } .lp-conversa-corpo{ padding:20px; display:flex; flex-direction:column; gap:12px; background:#FAF9FF; } .lp-msg{ max-width:82%; padding:12px 15px; border-radius:16px; font-size:.9rem; line-height:1.5; } .lp-msg.dela{ background:#fff; border:1px solid var(--lp-borda); border-bottom-left-radius:5px; } .lp-msg.minha{ background:var(--lp-roxo); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; } /* O botão fecha a lista e precisa de mais ar que o espaço entre dois itens dela — senão lê como se fosse mais um item, e não como o fim do raciocínio. */ .lp-secretaria .lp-acoes{ margin-top:38px; } /* ---------- a arte: conversa em cima, quadro embaixo ---------- */ .lp-secretaria-arte{ display:grid; gap:18px; } /* ---------- o quadro de tarefas ---------- A mesma peça de /app/tarefas, encolhida: três colunas, cartões curtos e a etiqueta que diz de que lado veio cada um. Não é a tela inteira — é o suficiente para o médico entender que o combinado NÃO mora no chat. */ .lp-quadro{ background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 26px 60px rgba(43,0,189,.16); border:1px solid #E2DCFB; } .lp-quadro-topo{ padding:14px 20px 12px; border-bottom:1px solid var(--lp-borda); } .lp-quadro-topo b{ font-size:.95rem; } .lp-quadro-topo span{ display:block; font-size:.76rem; color:var(--lp-tinta-2); margin-top:2px; } .lp-quadro-colunas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:14px; background:#FAF9FF; } .lp-coluna{ display:flex; flex-direction:column; gap:8px; min-width:0; } .lp-coluna-tit{ display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--lp-tinta-2); } .lp-coluna-tit i{ font-style:normal; background:#EDEAFB; color:var(--lp-roxo); border-radius:99px; padding:1px 6px; font-size:.64rem; } .lp-cartao{ background:#fff; border:1px solid var(--lp-borda); border-radius:12px; padding:9px 10px; font-size:.76rem; line-height:1.4; color:var(--lp-tinta); box-shadow:0 2px 6px rgba(11,16,51,.05); } .lp-cartao small{ display:block; margin-top:5px; font-size:.66rem; color:var(--lp-tinta-2); } /* O cartão concluído perde o peso: o quadro é sobre o que falta, e o que está feito só precisa continuar visível. */ .lp-cartao.feito{ opacity:.62; } .lp-tag{ display:inline-block; margin-bottom:5px; border-radius:5px; padding:1px 6px; font-size:.6rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } /* As duas pontas da mesma mesa: o que o médico pediu e o que ela separou. Cores diferentes porque é a única informação do cartão que o olho precisa pegar antes de ler o texto. */ .lp-tag.pedido{ background:#EDEAFB; color:var(--lp-roxo); } .lp-tag.tarefa{ background:#E4F6EC; color:#1F7A47; } @media (max-width:900px){ .lp-secretaria-cx{ grid-template-columns:1fr; } } /* Em coluna estreita três colunas de quadro viram três tiras ilegíveis. Vira uma lista: a ordem das colunas continua sendo a do quadro. */ @media (max-width:560px){ .lp-quadro-colunas{ grid-template-columns:1fr; gap:14px; } } /* ============================================================ como começa ============================================================ */ .lp-comeco{ padding:100px 0; background:#fff; } .lp-passos{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .lp-passo{ padding:30px 26px; border-radius:var(--lp-raio); border:1px solid var(--lp-borda); background:#fff; } .lp-passo b{ width:36px; height:36px; border-radius:11px; background:var(--lp-roxo-fundo); color:var(--lp-roxo); display:grid; place-items:center; font-size:.95rem; margin-bottom:16px; } .lp-passo h3{ font-size:1.04rem; margin-bottom:9px; } .lp-passo p{ color:var(--lp-tinta-2); font-size:.93rem; } @media (max-width:900px){ .lp-passos{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .lp-passos{ grid-template-columns:1fr; } } /* ============================================================ blog ============================================================ Uma FILA que rola de lado, e não uma grade. Sete artigos empilhados em três linhas comiam meia página de rolagem no meio do site — e a home não é o blog, é a porta dele. Numa fila, os sete cabem na altura de um. A rolagem é nativa: `overflow-x` com `scroll-snap`. No celular o dedo já faz o gesto, e o teclado também anda pela trilha (ela é focável). As setas são um atalho para o mouse, e por isso nascem escondidas — quem as mostra é o landing.js, depois de confirmar que há mais artigos do que cabem. Cartão sem caixa: nada de fundo branco, borda ou sombra. O que segura a composição é a CAPA — a única coisa ali que muda de cartão para cartão. */ .lp-blog{ padding:88px 0; background:var(--lp-cinza); } .lp-blog .lp-cab{ margin-bottom:38px; } .lp-posts{ display:flex; gap:24px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; /* respiro embaixo para o anel de foco do teclado não ser cortado */ padding-bottom:6px; /* A barra some, a rolagem fica. As setas e o gesto dão conta, e uma barra cinza cortando a fila de capas estraga a única coisa que o bloco tem. */ scrollbar-width:none; -ms-overflow-style:none; } .lp-posts::-webkit-scrollbar{ display:none; } .lp-posts:focus-visible{ outline:2px solid var(--lp-roxo); outline-offset:6px; border-radius:6px; } @media (prefers-reduced-motion: reduce){ .lp-posts{ scroll-behavior:auto; } } .lp-post{ flex:0 0 clamp(250px, 30%, 330px); scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; background:none; border:0; box-shadow:none; } /* O último encaixa pelo FIM. Com `scroll-snap` mandatório e todo mundo encaixando pelo começo, a última parada possível era o penúltimo cartão: alinhar o começo do último exigiria rolar além do fim da trilha, e o navegador puxa de volta. O último artigo ficava sempre cortado pela borda — e no desktop o respiro da direita existia no CSS sem nunca aparecer. Encaixando pelo fim, a última parada é o fim da rolagem: o cartão aparece inteiro, com a mesma margem que o primeiro tem no começo. */ .lp-post:last-child{ scroll-snap-align:end; } /* A capa é quem recebe o gesto do mouse: a imagem aproxima dentro da moldura, e o cartão inteiro não se mexe. */ .lp-post-capa{ border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#E9E9F2; /* o que se vê enquanto a foto carrega */ } .lp-post-capa img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); } .lp-post:hover .lp-post-capa img{ transform:scale(1.05); } .lp-post-corpo{ display:flex; flex-direction:column; gap:8px; flex:1; } .lp-post-corpo time{ color:var(--lp-tinta-2); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } /* Três linhas e ponto: títulos de tamanhos diferentes desalinhariam a fila inteira, e o começo do título já diz do que se trata. */ .lp-post h3{ font-size:1.02rem; line-height:1.32; letter-spacing:-.01em; transition:color .2s; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .lp-post:hover h3{ color:var(--lp-roxo); } .lp-post .lp-mais{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--lp-roxo); font-size:.88rem; } .lp-post .lp-mais i{ font-style:normal; transition:transform .25s; } .lp-post:hover .lp-mais i{ transform:translateX(4px); } /* ---------- o pé: setas de um lado, "ver todos" do outro ---------- */ .lp-blog-pe{ margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .lp-setas{ display:flex; gap:10px; } .lp-seta{ width:42px; height:42px; border-radius:50%; font-size:1rem; border:1.5px solid var(--lp-borda); background:#fff; color:var(--lp-tinta); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, color .2s, opacity .2s, transform .2s; } .lp-seta:hover:not(:disabled){ border-color:var(--lp-roxo); color:var(--lp-roxo); transform:translateY(-2px); } .lp-seta:disabled{ opacity:.35; cursor:default; } /* ---------- de ponta a ponta no desktop ---------- Este é o único bloco da página que não tem fim: a trilha continua fora da tela. Presa aos 1180px do `.lp-larg`, ela terminava com uma faixa cinza de cada lado — e um carrossel que acaba antes da borda parece uma lista que acabou. Solto, ele vaza pelos dois lados. A trilha não cola na borda nas PONTAS: no começo o primeiro cartão nasce nos 80px, e no fim o último para a 80px da direita. Mas os 80px são PADDING DA TRILHA, não margem da caixa — padding rola junto com o conteúdo. Parado, ele é a margem; em movimento, os cartões atravessam esse espaço e saem pela borda da tela, que é a ideia de que o carrossel vaza para fora da página. Uma margem no contêiner daria o mesmo desenho parado e cortaria os cartões antes dos 80px na rolagem — a faixa ficaria vazia, como se a tela acabasse ali. O `scroll-padding` repete os mesmos 80px: com `scroll-snap` mandatório, sem ele o navegador encaixaria o primeiro cartão no zero e comeria a margem já na primeira pintura. O cabeçalho não precisa de trava: `.lp-cab` já tem 720px e fica centrado sozinho. O pé alinha pelos mesmos 80px, para as setas nascerem na mesma linha em que os cartões começam. No celular nada muda: lá a rolagem já é o dedo, e cartão colado na borda fica pior do que a margem que ele tem hoje. */ @media (min-width:701px){ .lp-blog > .lp-larg{ width:100%; max-width:none; margin-inline:0; } .lp-blog .lp-posts{ padding-inline:80px; scroll-padding-inline:80px; } /* O cabeçalho já tem 720px próprios; o respiro aqui é só para a faixa de telas entre 701px e 760px, onde o texto encostaria na borda. */ .lp-blog .lp-cab{ padding-inline:20px; } .lp-blog .lp-blog-pe{ padding-inline:80px; } } /* Sem setas no celular: lá o gesto é o dedo, e dois botões a mais só ocupam a altura que este bloco existe para economizar. */ @media (max-width:700px){ .lp-setas{ display:none; } .lp-blog-pe{ justify-content:center; } .lp-post{ flex-basis:78%; } } /* ============================================================ dúvidas ============================================================ */ .lp-faq{ padding:100px 0; background:#fff; } .lp-faq-cx{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; } .lp-faq-lado{ position:sticky; top:110px; } .lp-faq-lado h2{ font-size:clamp(1.8rem,3.6vw,2.5rem); margin-bottom:18px; } .lp-faq-lado p{ color:var(--lp-tinta-2); margin-bottom:26px; } .lp-faq-itens{ display:grid; gap:10px; } .lp-faq details{ border:1px solid var(--lp-borda); border-radius:14px; background:#fff; padding:0 20px; transition:border-color .2s, box-shadow .2s; } .lp-faq details[open]{ border-color:var(--lp-roxo); box-shadow:0 10px 26px rgba(43,0,189,.08); } .lp-faq summary{ cursor:pointer; list-style:none; padding:18px 0; font-weight:600; font-size:.98rem; display:flex; gap:14px; align-items:flex-start; } .lp-faq summary::-webkit-details-marker{ display:none; } .lp-faq summary::before{ content:"+"; color:var(--lp-roxo); font-weight:700; font-size:1.15rem; line-height:1.25; flex:none; width:16px; } .lp-faq details[open] summary::before{ content:"−"; } .lp-faq details p{ color:var(--lp-tinta-2); font-size:.94rem; padding:0 0 20px 30px; } @media (max-width:900px){ .lp-faq-cx{ grid-template-columns:1fr; gap:34px; } .lp-faq-lado{ position:static; } } /* ============================================================ chamada final ============================================================ */ .lp-cta{ padding:110px 0; text-align:center; color:#fff; background:linear-gradient(135deg, var(--lp-roxo), #7A1E9C 55%, var(--lp-rosa)); } .lp-cta h2{ font-size:clamp(2rem,4.4vw,3.1rem); max-width:18ch; margin-inline:auto; } .lp-cta p{ margin:20px auto 0; max-width:54ch; color:rgba(255,255,255,.88); font-size:1.04rem; } .lp-cta .lp-acoes{ justify-content:center; margin-top:32px; } .lp-cta small{ display:block; margin-top:22px; color:rgba(255,255,255,.7); font-size:.85rem; } /* ============================================================ rodapé ============================================================ */ .lp-rodape{ padding:80px 0 34px; color:#fff; background:linear-gradient(160deg, var(--lp-azul-fundo), #0A0F2E); } .lp-rodape-frase{ font-size:clamp(1.5rem,3.4vw,2.3rem); max-width:22ch; margin-bottom:54px; } .lp-rodape-frase .lp-serif{ display:block; font-size:.78em; opacity:.8; } .lp-rodape-grade{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; } .lp-rodape h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#8C97CF; margin:0 0 16px; font-weight:700; } .lp-rodape nav{ display:grid; gap:10px; font-size:.93rem; color:#C6CCEC; } .lp-rodape nav a:hover{ color:#fff; } .lp-rodape-marca p{ color:#A6AFDB; font-size:.92rem; margin-top:14px; max-width:34ch; } /* ---------- quem é quem ---------- Uma nota, não letra miúda: fica no mesmo tamanho dos outros textos do rodapé e com o mesmo contraste. Encolher isto seria esconder a única frase da página que diz quem responde pelo quê. */ .lp-rodape-nota{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); max-width:86ch; color:#A6AFDB; font-size:.9rem; line-height:1.7; } .lp-rodape-nota a{ color:#fff; text-decoration:underline; text-underline-offset:3px; } .lp-rodape-nota + .lp-rodape-fim{ margin-top:24px; border-top:0; padding-top:0; } .lp-rodape-fim{ margin-top:54px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:#8C97CF; font-size:.84rem; } @media (max-width:820px){ .lp-rodape-grade{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .lp-rodape-grade{ grid-template-columns:1fr; } } /* ============================================================ o submenu de Soluções ============================================================ Abre no hover e no foco pelo teclado. Os links são de verdade no HTML — um menu montado por JavaScript é um menu que o buscador não percorre, e estas páginas existem para serem achadas. A caixa tem o mesmo vidro da barra: mesmo desfoque, mesma sombra de três camadas. Ela é um pedaço da barra que desceu, não um painel estranho. */ .lp-submenu-pai{ position:relative; } .lp-submenu-pai > a{ display:inline-flex; align-items:center; gap:5px; } .lp-submenu-pai > a i{ font-style:normal; font-size:.8em; opacity:.6; transition:transform .22s; } .lp-submenu-pai:hover > a i, .lp-submenu-pai:focus-within > a i{ transform:translateY(2px); opacity:1; } /* O invólucro tem o espaço vazio DENTRO dele: sem isso o ponteiro atravessa uma faixa morta entre o link e a caixa, o hover cai e o menu fecha na cara de quem estava indo nele. */ .lp-submenu{ position:absolute; top:100%; left:50%; /* Dez serviços em coluna única virariam uma tira mais alta que a tela em notebook. Em duas colunas a lista inteira cabe de uma olhada — que é o serviço que um menu presta. */ padding-top:16px; min-width:660px; transform:translate(-50%, 8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, transform .22s, visibility .22s; } .lp-submenu-pai:hover .lp-submenu, .lp-submenu-pai:focus-within .lp-submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0); } .lp-submenu-cx{ padding:10px; border-radius:20px; background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(40px) saturate(180%); backdrop-filter:blur(40px) saturate(180%); border:1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px rgba(11,16,51,.09), 0 20px 48px rgba(11,16,51,.18); display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; } /* O "ver todas" atravessa as duas colunas e fecha a caixa. */ .lp-submenu-cx > .lp-submenu-todos{ grid-column:1 / -1; } .lp-submenu-cx a{ display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:13px; transition:background .18s; } .lp-submenu-cx a:hover{ background:color-mix(in srgb, var(--cla, var(--lp-roxo)) 9%, transparent); } /* a bolinha da cor do serviço, a mesma do cartão dele na home */ .lp-submenu-cx a > i{ flex:none; width:9px; height:9px; border-radius:50%; margin-top:6px; background:var(--cla, var(--lp-roxo)); box-shadow:0 0 0 3px color-mix(in srgb, var(--cla, var(--lp-roxo)) 16%, transparent); } .lp-submenu-cx b{ display:block; font-size:.92rem; font-weight:600; color:var(--lp-tinta); letter-spacing:-.01em; line-height:1.3; } .lp-submenu-cx small{ display:block; font-size:.8rem; color:var(--lp-tinta-2); line-height:1.35; } /* ---------- a cor dentro da caixa ---------- A barra clareia os links conforme passa sobre uma seção escura (`--lp-escuridao`, lá em cima). Dentro do submenu isso não vale: a caixa é branca em qualquer lugar da página, e o mesmo branco que salva o link na faixa escura apaga ele aqui — era o "hover branco no fundo claro". A regra abaixo tem a MESMA especificidade do hover da barra (classe + elemento + pseudo-classe, nos dois) e mora depois dele no arquivo: empate resolvido por quem fala por último. Para o "ver todas" precisou de uma classe a mais, porque ali o seletor da barra é mais específico do que o `.lp-submenu-todos` sozinho. */ .lp-submenu-cx a, .lp-submenu-cx a:hover{ color:var(--lp-tinta); } /* ---------- "ver todas as soluções" ---------- A seta vai para a borda direita da caixa (`margin-left:auto`), e não colada no texto: ela fecha o popup do outro lado, alinhada com o fim dos cartões das duas colunas. Por isso este item alinha pelo centro, e não pelo topo como os outros — o texto é de uma linha só. */ .lp-submenu-todos{ margin-top:4px; padding-top:12px !important; border-top:1px solid var(--lp-borda); font-size:.88rem; font-weight:600; border-radius:0 0 13px 13px; align-items:center; gap:8px; } .lp-submenu-cx .lp-submenu-todos, .lp-submenu-cx .lp-submenu-todos:hover{ color:var(--lp-roxo); } .lp-submenu-cx .lp-submenu-todos:hover{ background:color-mix(in srgb, var(--lp-roxo) 12%, transparent); } /* O `` daqui é a SETA, não a bolinha colorida dos outros itens — e os dois são a mesma tag. Sem desfazer, a regra de cima (`.lp-submenu-cx a > i`) transformava a seta num círculo de 9px com fundo roxo: ficava um bullet com um `→` espremido dentro. Duas classes no seletor para ganhar dela. */ .lp-submenu-cx .lp-submenu-todos > i{ width:auto; height:auto; border-radius:0; background:none; box-shadow:none; margin:0 0 0 auto; font-style:normal; font-size:1rem; line-height:1; transition:transform .22s; } .lp-submenu-todos:hover i{ transform:translateX(4px); } /* Sem `backdrop-filter` a caixa fica sólida — um submenu translúcido sem desfoque deixa o texto da página passar por trás dos itens. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lp-submenu-cx{ background:#fff; } } /* Abaixo de 1120px a caixa de duas colunas encostaria nas bordas da janela; uma coluna volta a caber. */ @media (max-width:1120px){ .lp-submenu{ min-width:340px; } .lp-submenu-cx{ grid-template-columns:1fr; max-height:70vh; overflow-y:auto; } } @media (prefers-reduced-motion: reduce){ .lp-submenu{ transition:opacity .01s; transform:translate(-50%, 0); } }