/* ===== estilo: base ===== */ /* Briefing IMMakers Ads. Escuro, contido: profundidade vem de superfícies e linhas finas, não de brilhos. A cor de ação é o laranja; o gradiente da marca aparece só no destaque do título, no progresso e no símbolo. Motion guiado pelo scroll em motion.js. */ :root { --cor-roxo: #753C84; --cor-roxo-claro: #B57AC4; --cor-amarelo: #F2BD00; --cor-vermelho: #D62D4D; --cor-laranja: #DF6311; --cor-laranja-claro: #EC7A2E; --cor-dark-purple: #22192C; /* Superfícies em degraus, do fundo da página ao elemento mais elevado */ --fundo: #0E0915; --s1: #150F1E; --s2: #1B1426; --s3: #231A30; --linha: #2A2136; --linha-forte: #3D3249; --texto: #F5F1F8; --texto-2: #C7BDD2; --texto-3: #8F839D; --erro: #FF8AA0; --gradiente-marca: linear-gradient(100deg, var(--cor-roxo-claro) 0%, var(--cor-vermelho) 45%, var(--cor-laranja) 72%, var(--cor-amarelo) 100%); --fonte: 'Montserrat', system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.3rem, 5vw, 4.4rem); --fs-h2: clamp(1.8rem, 3.6vw, 2.9rem); --r-card: 16px; --r-ctrl: 10px; --r-pill: 9999px; --suave: cubic-bezier(0.22, 1, 0.36, 1); --espaco-secao: 96px; --fs-rotulo: .75rem; --fs-leitura: .875rem; color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--fonte); color: var(--texto); line-height: 1.6; background: var(--fundo); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 3px; border-radius: 4px; } .hidden { display: none !important; } /* Aviso de página aberta como arquivo (file://): sem servidor, o envio não funciona. */ .aviso-arquivo { position: fixed; inset: 0 0 auto; z-index: 1100; padding: 10px 16px; background: var(--s3); border-bottom: 1px solid var(--linha-forte); border-left: 3px solid var(--cor-amarelo); color: var(--texto-2); font-size: .85rem; line-height: 1.6; } .aviso-arquivo strong { color: var(--texto); } .aviso-arquivo code { font-family: ui-monospace, Consolas, monospace; color: var(--texto); } ::selection { background: var(--cor-laranja); color: #fff; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 2000; background: var(--s2); padding: 8px 16px; border-radius: var(--r-ctrl); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Um fundo só para a página inteira: fixo, com duas luzes discretas da marca e um granulado leve. Nenhuma seção tem fundo próprio, então não se vê onde um bloco termina e o outro começa. */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body::before { z-index: -2; background: radial-gradient(60vw 50vw at 0% 0%, rgba(117, 60, 132, 0.28), transparent 70%), radial-gradient(50vw 45vw at 100% 100%, rgba(223, 99, 17, 0.12), transparent 70%); } body::after { z-index: -1; opacity: 0.45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } .titulo-secao { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 12px 0 40px; width: 100%; max-width: none; } .texto-gradiente { font-style: normal; background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } .secao { padding-block: var(--espaco-secao); } /* Card: a única superfície da página. Sem sombra, sem brilho; no hover só a borda clareia. */ .card { position: relative; background: var(--s1); border: 1px solid var(--linha); border-radius: var(--r-card); padding: 28px; } /* Progresso da página e topbar */ .progresso-pagina { position: fixed; inset: 0 0 auto; height: 2px; z-index: 1100; pointer-events: none; } .progresso-pagina span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--progresso, 0)); background: var(--gradiente-marca); } .topbar { position: fixed; inset: 0 0 auto; z-index: 1000; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color 300ms, border-color 300ms; } .topbar.rolado { background: rgba(14, 9, 21, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--linha); } .topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 68px; } .topbar__logo { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; } .topbar__logo img { width: 150px; height: auto; } /* Botões */ .imm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 8px 0 24px; border-radius: var(--r-pill); font-family: inherit; font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; border: 1px solid transparent; color: #fff; transition: background-color 200ms, border-color 200ms, color 200ms, transform 200ms; } .imm-btn:not(:has(.imm-btn__icone)) { padding: 0 24px; } .imm-btn:active { transform: scale(0.98); } .imm-btn__icone { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, 0.16); transition: transform 300ms var(--suave); } .imm-btn__icone svg { width: 15px; height: 15px; } .imm-btn:hover .imm-btn__icone { transform: translateX(3px); } .imm-btn--voltar .imm-btn__icone { transform: rotate(180deg); } .imm-btn--voltar:hover .imm-btn__icone { transform: translateX(-3px) rotate(180deg); } .imm-btn--sm { min-height: 44px; padding: 0 6px 0 18px; font-size: 0.875rem; gap: 10px; } .imm-btn--sm .imm-btn__icone { width: 28px; height: 28px; } .imm-btn--primary { background: var(--cor-laranja); } .imm-btn--primary:hover { background: var(--cor-laranja-claro); } .imm-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; } .imm-btn--ghost { background: transparent; color: var(--texto); border-color: var(--linha-forte); } .imm-btn--ghost .imm-btn__icone { background: var(--s3); } .imm-btn--ghost:hover { border-color: var(--texto-3); } .imm-btn--claro { background: var(--texto); color: var(--cor-dark-purple); } .imm-btn--claro .imm-btn__icone { background: var(--cor-laranja); color: #fff; } .imm-btn--claro:hover { background: #fff; } .link-seta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--texto); text-decoration: none; } .link-seta svg { width: 14px; height: 14px; transition: transform 300ms var(--suave); } .link-seta:hover svg { transform: translateX(4px); } /* Símbolo em 4 traços (logo separada por cor) */ .simbolo { position: relative; aspect-ratio: 520 / 517; width: 100%; } .simbolo__traco { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--e, 1)); transition: transform 900ms var(--suave), opacity 700ms var(--suave), filter 700ms var(--suave); } /* Hero */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; } .hero__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 56px; } .hero__titulo { font-size: var(--fs-hero); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; margin: 18px 0 24px; } .hero__titulo .linha { display: block; overflow: hidden; overflow: clip; overflow-clip-margin: 0.2em; padding-bottom: 0.06em; white-space: nowrap; } .hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.15rem); color: var(--texto-2); max-width: none; } .hero__meta { font-size: 0.85rem; color: var(--texto-3); } /* Começo da análise no próprio topo */ .inicio { margin-top: 40px; display: grid; gap: 14px; max-width: 560px; } .inicio__titulo { font-size: 0.95rem; font-weight: 600; color: var(--texto); } .inicio__opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .inicio__opcao { min-height: 52px; padding: 0 14px; border-radius: var(--r-ctrl); border: 1px solid var(--linha-forte); background: var(--s1); color: var(--texto); font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: border-color 200ms, background-color 200ms; } /* Cores da marca para cada contexto, também acessíveis pelo teclado. */ .inicio__opcao { --cor-opcao: var(--cor-laranja); } .inicio__opcao[data-contexto="Empresa"] { --cor-opcao: var(--cor-roxo); } .inicio__opcao[data-contexto="Consultoria"] { --cor-opcao: var(--cor-amarelo); } .inicio__opcao[data-contexto="Outro"] { --cor-opcao: var(--cor-vermelho); } .inicio__opcao:hover, .inicio__opcao:focus-visible { border-color: var(--cor-opcao); background: color-mix(in srgb, var(--cor-opcao) 18%, var(--s1)); } .inicio__opcao:focus-visible { outline-color: color-mix(in srgb, var(--cor-opcao) 70%, var(--texto)); } /* O símbolo entra montando os quatro traços; depois gira com a rolagem (motion.js) */ .simbolo--hero { max-width: 440px; justify-self: center; transform: rotate(var(--giro, 0deg)) scale(var(--escala, 1)); opacity: var(--sumir, 1); } .simbolo--hero .simbolo__traco { transition: none; } .js-motion .simbolo--hero .simbolo__traco { animation: montar 1500ms var(--suave) backwards; } .js-motion .simbolo--hero .simbolo__traco--amarelo { animation-delay: 120ms; } .js-motion .simbolo--hero .simbolo__traco--vermelho { animation-delay: 240ms; } .js-motion .simbolo--hero .simbolo__traco--laranja { animation-delay: 360ms; } @keyframes montar { from { opacity: 0; transform: rotate(-70deg) scale(0.6); } } /* Faixa de formatos */ .faixa { border-block: 1px solid var(--linha); overflow: hidden; overflow: clip; padding: 18px 0; } .faixa__trilho { display: flex; width: max-content; animation: faixa 50s linear infinite; } .faixa:hover .faixa__trilho { animation-play-state: paused; } .faixa__lista { display: flex; list-style: none; flex-shrink: 0; } .faixa__lista li { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-size: 1rem; font-weight: 600; color: var(--texto-3); } .faixa__lista li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--linha-forte); } @keyframes faixa { to { transform: translateX(-50%); } } /* Jornada no scroll. Sem JS (ou com movimento reduzido) vira uma lista simples. */ .jornada-scroll { position: relative; padding: 112px 0; } .jornada-scroll__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: center; } .jornada-scroll__cabeca { grid-column: 1 / -1; } .jornada-scroll__cabeca .titulo-secao { margin-bottom: 0; } .simbolo--jornada { max-width: 420px; justify-self: center; } .etapas-scroll { list-style: none; display: grid; gap: 40px; } .etapa-scroll__num { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; color: var(--cor); } .etapa-scroll h3 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 14px 0 16px; } .etapa-scroll p { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--texto-2); max-width: 40ch; } .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .tags li { font-size: 0.85rem; font-weight: 500; padding: 6px 12px; border-radius: 8px; background: var(--s2); border: 1px solid var(--linha); color: var(--texto-2); } .indicador-etapas { display: none; } .js-motion .jornada-scroll.ativo { height: 460vh; padding: 0; } .js-motion .jornada-scroll.ativo .jornada-scroll__fixo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; overflow: clip; } .js-motion .jornada-scroll.ativo .jornada-scroll__grade { grid-template-rows: auto 1fr; padding-top: 68px; } .js-motion .jornada-scroll.ativo .simbolo--jornada { grid-row: 2; grid-column: 1; } .js-motion .jornada-scroll.ativo .etapas-scroll { grid-row: 2; grid-column: 2; } .js-motion .jornada-scroll.ativo .etapa-scroll { grid-area: 1 / 1; opacity: 0; transform: translateY(32px); transition: opacity 600ms var(--suave), transform 800ms var(--suave); pointer-events: none; } .js-motion .jornada-scroll.ativo .etapa-scroll.atual { opacity: 1; transform: none; pointer-events: auto; } .js-motion .jornada-scroll.ativo .etapa-scroll.passada { transform: translateY(-32px); } .js-motion .jornada-scroll.ativo .simbolo--jornada .simbolo__traco { opacity: 0.1; filter: grayscale(1) brightness(1.6); } .js-motion .jornada-scroll.ativo .simbolo--jornada .simbolo__traco.aceso { opacity: 0.45; filter: none; } .js-motion .jornada-scroll.ativo .simbolo--jornada .simbolo__traco.atual { opacity: 1; filter: none; --e: 1.03; } .js-motion .jornada-scroll.ativo .indicador-etapas { display: flex; gap: 6px; grid-column: 1 / -1; justify-self: center; } .indicador-etapas span { width: 28px; height: 3px; border-radius: 3px; background: var(--linha-forte); transition: background-color 400ms, width 400ms var(--suave); } .indicador-etapas span.atual { width: 48px; background: var(--cor); } .indicador-etapas span.aceso { background: var(--texto-3); } /* Revelar ao rolar */ .js-motion .revelar { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--suave) var(--atraso, 0ms), transform 900ms var(--suave) var(--atraso, 0ms); } .js-motion .revelar.visivel { opacity: 1; transform: none; } .js-motion .revelar-linha { display: inline-block; transform: translateY(105%); transition: transform 1000ms var(--suave) var(--atraso, 0ms); } .js-motion .pronto .revelar-linha { transform: none; } /* Como funciona: quatro etapas numa linha, separadas por fio, sem caixas */ .passos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linha); } .passo { padding: 28px 28px 0 0; } .passo + .passo { padding-left: 28px; border-left: 1px solid var(--linha); } .passo__num { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; color: var(--cor-laranja); margin-bottom: 40px; font-variant-numeric: tabular-nums; } .passo h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; } .passo p { font-size: 0.925rem; color: var(--texto-2); } /* Briefing: resumo e formulário, mesmas superfícies e mesma altura */ .secao-briefing { padding: var(--espaco-secao) 0; } .secao-briefing__sub { width: 100%; max-width: none; color: var(--texto-2); margin: -24px 0 40px; font-size: 1.05rem; } .briefing-bento { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; } .resumo { display: flex; flex-direction: column; gap: 20px; } .resumo__cabeca { display: flex; justify-content: space-between; align-items: baseline; } .resumo__rotulo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); } .resumo__contador { font-size: 0.875rem; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; } .resumo__lista { list-style: none; display: grid; gap: 2px; } .resumo__lista li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; } .resumo__lista li.atual { background: var(--s2); } .resumo__marca { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; } .resumo__lista li.atual .resumo__marca { border-color: var(--cor-laranja); } .resumo__lista li.feito .resumo__marca { border-color: var(--cor-laranja); background: var(--cor-laranja); } .resumo__lista li.feito .resumo__marca::after { content: ""; width: 7px; height: 4px; border: 1.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .resumo__item { display: flex; flex-direction: column; min-width: 0; } .resumo__pergunta { font-size: 0.875rem; font-weight: 500; color: var(--texto-3); } .resumo__lista li.atual .resumo__pergunta, .resumo__lista li.feito .resumo__pergunta { color: var(--texto); } .resumo__resposta { font-size: 0.8rem; color: var(--texto-2); overflow-wrap: anywhere; } .resumo__rodape { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--linha); } .resumo__rodape p { font-size: 0.8rem; color: var(--texto-3); } .resumo__selo { flex: none; color: var(--texto-3); margin-top: 2px; } .resumo__selo svg { width: 16px; height: 16px; } .fluxo { display: flex; flex-direction: column; gap: 16px; padding: 32px; } .fluxo__topo { display: flex; flex-direction: column; gap: 12px; } .segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; } .segmentos i { height: 3px; border-radius: 3px; background: var(--linha); transition: background-color 400ms; } .segmentos i.feito { background: var(--cor-laranja); } .segmentos i.atual { background: color-mix(in srgb, var(--cor-laranja) 45%, var(--linha)); } .progresso__texto { font-size: 0.8rem; color: var(--texto-3); font-weight: 500; } .pergunta { border: 0; animation: entrar 500ms var(--suave); } @keyframes entrar { from { opacity: 0; transform: translateX(16px); } } .pergunta legend { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; } .pergunta__ajuda { color: var(--texto-2); margin-bottom: 24px; } .opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; } .opcao { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; text-align: left; border-radius: var(--r-ctrl); border: 1px solid var(--linha-forte); background: var(--s2); color: var(--texto); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: border-color 200ms, background-color 200ms; } .opcao:hover { border-color: var(--texto-3); } .opcao__letra { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: .75rem; font-weight: 600; color: var(--texto-3); border: 1px solid var(--linha-forte); } .opcao__texto { flex: 1; } .opcao__marca { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; } .opcao[aria-pressed="true"] { border-color: var(--cor-laranja); background: color-mix(in srgb, var(--cor-laranja) 10%, var(--s2)); } .opcao[aria-pressed="true"] .opcao__letra { color: var(--cor-laranja); border-color: var(--cor-laranja); } .opcao[aria-pressed="true"] .opcao__marca { border-color: var(--cor-laranja); background: var(--cor-laranja); } .opcao[aria-pressed="true"] .opcao__marca::after { content: ""; width: 7px; height: 4px; border: 1.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .opcao--solta { margin-top: 16px; display: inline-flex; min-height: 48px; } .dica-teclado { margin-top: 12px; font-size: 0.78rem; color: var(--texto-3); } @media (max-width: 960px), (hover: none), (pointer: coarse) { .dica-teclado { display: none; } } .pergunta__selecao-ajuda { margin-top: 12px; font-size: var(--fs-leitura); color: var(--texto-2); } .fluxo__acoes { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 0; flex-wrap: wrap; } .fluxo__titulo { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; } .fluxo__texto { color: var(--texto-2); } #formBriefing, #formLead { display: flex; flex-direction: column; flex: none; } .campo { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .campo label { font-weight: 500; font-size: 0.875rem; color: var(--texto-2); } .campo input, .campo textarea { width: 100%; font-family: inherit; font-size: 1rem; padding: 13px 14px; border-radius: var(--r-ctrl); border: 1px solid var(--linha-forte); background: var(--s2); color: var(--texto); transition: border-color 200ms, box-shadow 200ms; } .campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); } .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cor-laranja); box-shadow: 0 0 0 3px rgba(223, 99, 17, 0.16); } .campo input:disabled, .campo textarea:disabled { opacity: 0.45; } .campo textarea { min-height: 130px; resize: vertical; } .campo__ajuda { display: block; margin-top: 8px; color: var(--texto-3); font-size: 0.8rem; } .campos-duplos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; } .campo--flutuante { position: relative; margin-top: 8px; } .campo--flutuante input { padding: 24px 14px 8px; } .campo--flutuante label { position: absolute; left: 15px; top: 16px; pointer-events: none; font-size: 1rem; color: var(--texto-3); transform-origin: left top; transition: transform 200ms var(--suave), color 200ms; } .campo--flutuante input:focus + label, .campo--flutuante input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(0.75); color: var(--texto-2); } .consentimento { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 0.875rem; color: var(--texto-2); cursor: pointer; } .consentimento input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin-top: 0.15em; border-radius: 5px; border: 1px solid var(--linha-forte); background: var(--s2); cursor: pointer; display: grid; place-items: center; } .consentimento input:checked { border-color: var(--cor-laranja); background: var(--cor-laranja); } .consentimento input:checked::after { content: ""; width: 9px; height: 5px; border: 1.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .consentimento input:focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 2px; } .consentimento a { color: var(--texto); } .consentimento__titulo { display: block; margin-bottom: 6px; color: var(--texto); font-size: .875rem; } .pergunta__descricao { margin-top: 12px; max-width: 70ch; color: var(--texto-2); font-size: .95rem; line-height: 1.65; } .pergunta__complementar { min-width: 0; margin-top: 24px; padding: 20px; border: 1px solid var(--linha-forte); border-radius: var(--r-ctrl); background: rgba(14,9,21,.22); } .pergunta__complementar legend { padding-inline: 6px; font-size: 1rem; font-weight: 600; } #briefing .opcao--multipla .opcao__marca { border-radius: 5px; } #briefing .opcoes--destino { grid-template-columns: minmax(0,1fr); } @media (max-width: 640px) { .pergunta__complementar { padding: 14px; } } .erro { color: var(--erro); font-size: 0.875rem; font-weight: 500; min-height: 1.2em; margin-top: 12px; } .carregando { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 20px; padding: 48px 0; color: var(--texto-2); font-weight: 500; } .simbolo--carregando { width: 84px; } .simbolo--carregando .simbolo__traco { animation: pulsar 1.6s var(--suave) infinite; } .simbolo--carregando .simbolo__traco--amarelo { animation-delay: 0.15s; } .simbolo--carregando .simbolo__traco--vermelho { animation-delay: 0.3s; } .simbolo--carregando .simbolo__traco--laranja { animation-delay: 0.45s; } @keyframes pulsar { 0%, 100% { opacity: 0.25; transform: scale(0.94); } 40% { opacity: 1; transform: scale(1); } } /* Resultado */ .resultado__cabecalho { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .selo { font-size: .75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--cor-amarelo); color: var(--cor-dark-purple); } .resultado__titulo { width: 100%; max-width: none; margin-bottom: 20px; } .resultado__briefing { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; } .resultado__briefing li { font-size: 0.85rem; font-weight: 500; color: var(--texto-2); padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--linha-forte); } .rotulo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 14px; } /* Bento: análise + mapa na primeira linha; jornada, lacunas e chamada ocupam a largura toda */ .bento-resultado { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } .bento-resultado:has(#mapaCard.hidden) .leitura { grid-column: 1 / -1; } .bento-resultado .jornada-card, .bento-resultado .lacunas, .bento-resultado .cta-final { grid-column: 1 / -1; } .leitura p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: 62ch; } /* Mapa das 4 etapas: linha vertical ligando os pontos */ .mapa { display: flex; flex-direction: column; } .mapa__etapas { list-style: none; display: grid; gap: 0; } .mapa__etapa { position: relative; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; } .mapa__etapa + .mapa__etapa { border-top: 1px solid var(--linha); } .mapa__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); justify-self: center; } .mapa__nome { font-weight: 600; } .mapa__qtd { font-size: 0.85rem; color: var(--texto-2); font-variant-numeric: tabular-nums; } .mapa__etapa--fora .mapa__ponto { background: transparent; border: 1px solid var(--linha-forte); } .mapa__etapa--fora .mapa__nome, .mapa__etapa--fora .mapa__qtd { color: var(--texto-3); font-weight: 500; } .mapa__total { margin-top: auto; padding-top: 16px; font-size: 0.85rem; color: var(--texto-3); } /* Jornada: um card só, uma linha por etapa; à esquerda a etapa, à direita as soluções */ .jornada-card { padding: 0; } .jornada { list-style: none; } .etapa { --cor: var(--cor-roxo-claro); display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 28px; } .etapa + .etapa { border-top: 1px solid var(--linha); } .etapa--descobrir { --cor: var(--cor-roxo-claro); } .etapa--considerar { --cor: var(--cor-amarelo); } .etapa--agir { --cor: var(--cor-vermelho); } .etapa--relacionar { --cor: var(--cor-laranja); } .etapa__info { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 2px solid var(--cor); align-self: start; } .etapa__num { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--cor); font-variant-numeric: tabular-nums; } .etapa__nome { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.2; } .etapa__descricao { font-size: 0.85rem; color: var(--texto-3); } .etapa__solucoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; } .solucao { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r-ctrl); background: var(--s2); border: 1px solid var(--linha); } .solucao h4 { font-size: 1rem; font-weight: 600; } .solucao p { font-size: 0.875rem; color: var(--texto-2); flex: 1; } .solucao .link-seta { margin-top: 8px; color: var(--cor-laranja-claro); align-self: flex-start; } /* Lacunas: lista numerada em duas colunas, as extras atrás de um botão */ .lacunas { display: grid; grid-template-columns: 220px 1fr; gap: 12px 32px; } .lacunas__topo p { font-size: 0.85rem; color: var(--texto-3); } .lacunas__lista { list-style: none; counter-reset: lacuna; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; } .lacunas__lista li { counter-increment: lacuna; position: relative; padding-left: 34px; font-size: 0.925rem; color: var(--texto-2); } .lacunas__lista li::before { content: counter(lacuna, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font-size: 0.75rem; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; } .lacunas__lista--fechada li:nth-child(n+5) { display: none; } .lacunas__mais { grid-column: 2; justify-self: start; background: none; border: 0; padding: 4px 0; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--texto); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linha-forte); } .lacunas__mais:hover { text-decoration-color: var(--texto); } .cta-final { display: block; padding: 36px 40px; } .cta-final::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--gradiente-marca); } .cta-final__conteudo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cta-final__texto { max-width: 60ch; } .cta-final h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; } .cta-final p { color: var(--texto-2); } .aviso { margin-top: 24px; font-size: 0.8rem; color: var(--texto-3); max-width: 80ch; } /* Nossas soluções: grade regular de 3 colunas; Projetos Especiais ocupa a última linha inteira */ .solucoes__topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 40px; } .solucoes__topo .titulo-secao { margin-bottom: 0; } .solucoes__intro { width: 100%; max-width: none; color: var(--texto-2); } .grade-solucoes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card-solucao { display: flex; flex-direction: column; gap: 10px; transition: border-color 200ms, background-color 200ms; } .card-solucao:hover { border-color: var(--linha-forte); background: var(--s2); } .card-solucao__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .card-solucao__icone { width: 22px; height: 22px; color: var(--texto-2); } .card-solucao__etapa { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 500; color: var(--texto-3); } .card-solucao__etapa i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); } .card-solucao h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .card-solucao p { font-size: 0.9rem; color: var(--texto-2); flex: 1; } .card-solucao__link { margin-top: 10px; align-self: flex-start; } .card-solucao__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* Mesmo esqueleto dos outros cards (ícone e etapa no topo, título, texto), só que o link vai para a direita */ .card-solucao--largo { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; column-gap: 32px; row-gap: 10px; align-items: end; } .card-solucao--largo .card-solucao__topo { grid-column: 1 / -1; } .card-solucao--largo h3, .card-solucao--largo p { grid-column: 1; } .card-solucao--largo p { max-width: 60ch; } .card-solucao--largo .card-solucao__link { grid-column: 2; grid-row: 2 / 4; align-self: end; margin: 0; } /* Chamada final */ .cta-banda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: 48px; } .cta-banda::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--gradiente-marca); } .cta-banda > div { flex-basis: 100%; min-width: 0; } .cta-banda .titulo-secao { margin-bottom: 0; max-width: none; } .rodape { padding: 24px 0 calc(32px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); font-size: 0.85rem; color: var(--texto-3); } .rodape__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .rodape img { width: 130px; height: auto; opacity: 0.85; } .rodape__grupo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 100%; color: var(--texto-2); } .rodape .rodape__logo-grupo { width: auto; max-width: 100%; height: calc(130px * 83 / 480); opacity: 1; } /* Responsivo */ @media (max-width: 960px) { .hero__inner { grid-template-columns: 1fr; } .simbolo--hero { max-width: 220px; order: -1; justify-self: start; } .grade-solucoes { grid-template-columns: 1fr 1fr; } .passos { grid-template-columns: 1fr 1fr; border-top: 0; } .passo, .passo + .passo { padding: 24px 24px 24px 0; border-left: 0; border-top: 1px solid var(--linha); } .passo:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--linha); } .passo__num { margin-bottom: 20px; } .briefing-bento { grid-template-columns: 1fr; } .resumo { display: none; } .bento-resultado { grid-template-columns: 1fr; } .etapa { grid-template-columns: 1fr; gap: 18px; } .lacunas { grid-template-columns: 1fr; } .lacunas__lista { grid-template-columns: 1fr; } .lacunas__mais { grid-column: 1; } .jornada-scroll__grade { grid-template-columns: 1fr; } .simbolo--jornada { max-width: 260px; } .js-motion .jornada-scroll.ativo .jornada-scroll__grade { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; gap: 20px; } .js-motion .jornada-scroll.ativo .simbolo--jornada { grid-row: 2; grid-column: 1; max-width: min(200px, 26vh); } .js-motion .jornada-scroll.ativo .etapas-scroll { grid-row: 3; grid-column: 1; align-self: start; } .js-motion .jornada-scroll.ativo .indicador-etapas { grid-row: 4; } .js-motion .jornada-scroll.ativo .titulo-secao { font-size: clamp(1.6rem, 6vw, 2.2rem); } } @media (max-width: 600px) { .hero { padding: 100px 0 64px; min-height: auto; } .simbolo--hero { max-width: 140px; } .inicio__opcoes { grid-template-columns: 1fr 1fr; } .topbar__logo img { width: 124px; } .secao, .jornada-scroll, .secao-briefing { padding-block: 80px; } .grade-solucoes { grid-template-columns: 1fr; } .card-solucao--largo { grid-column: auto; grid-template-columns: 1fr; } .card-solucao--largo .card-solucao__link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; } .passos { grid-template-columns: 1fr; } .passo:nth-child(even) { padding-left: 0; border-left: 0; } .card, .fluxo { padding: 22px 20px; } .campos-duplos { grid-template-columns: 1fr; } .fluxo__acoes .imm-btn { flex: 1; padding: 0 18px; } .fluxo__acoes .imm-btn--voltar { flex: none; } .fluxo__acoes .imm-btn__icone { display: none; } .cta-final, .cta-banda { padding: 32px 22px; } .etapa { padding: 22px 20px; } .cta-banda .imm-btn, .cta-final .imm-btn { width: 100%; } .etapa-scroll h3 { font-size: 2.4rem; margin: 10px 0; } .tags { margin-top: 14px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .simbolo--hero { transform: none; opacity: 1; } *, *::before, *::after { animation: none !important; transition: none !important; } } :root { --img-gradiente: url("data:image/webp;base64,UklGRsgkAABXRUJQVlA4IDQOAADQngCdASrAAxwCPpFIoU0lpCMiIAgAsBIJaW7hPW/agF4S3I2u//+pFwt//6epv3uTvP+H5oF//16rBP+9ZfgH/xL6L+wBPYB77Zu5u5u5OQ99snIfBahBdpUCyXa8XJyHvtlZuvmBFEfCJkNplOyL/5ge+2TkTblUfEV6HychwBf8Fz6m9O8zntqdBbzA99sxlp8X77ojlSVzPhbsEg3JwM65Ulw1A6yFpTCiEwCIHk4XykrXzxFyMaIXDA0RzODz6y1P0Rgite8uV4NRFzGWjX6Uoh+uqBYIyE541zeFlQv+fZQw1eqKsr+AdMEAetOfWZuppERRFhmaBmy2q5G7s1DxPdJeCs9OIFH6erAqoz6rSlOJEZRj1DNoiJ0Pr3DWoPkulhXL9p34UPk0XU4rDRZnGfLSRb6/PUDsFonIk6J9xJ5lw8R/f5cjBf7Xi7T4GNYKNR1q1J5h+7sEQcoyeKlSNSlrjMBzw5LtdyDKa32PbGdccdNOhuqDjzQhIqdnqLmfxle9mSACvg/XflYc/MrV6Tmk5MaMNOfi405PEfe2KIscH6xrnMEozOV1ybBdKaU2smyhXyMJaluCIvF0PBC/CBgYa7G74otYwVt4RcdHHCp096XLQo8+Kx7/kFTRg3Hj8OMDbAHHJYLh3HJCx9aX/I63hPoiIpSgnhli0UKrvmgl0V0Op0h+7LLHaWY3LhS0ukxjU0U6Yr+jY1yaXJzMeuzKJF4uic1b8tszVu2wX3CrdOKN/7sQCIN8PuO7m15F160CK1gMw/0pYzrtNyCshZ/xQZRIFXAQaY22K3dx8mBL3e+qJU6BRM22kZSyF7bOt6qe+pM2mKaw+D/iziWZWXEOp034D3H4m0pf7MPajGZHiLZSm+QfbjU4h7A+oqH7ZT6c3BWTzFZq9zuUTyW9q9ZQkmhAP7oXdDGNlKyaQY/vr2crC9l8PB/fpP8VCOwE5cvYjRCM4q3wYc07a5caa2BCf6l0ZMHpKcJTNdowzALIr5XxTTZzOKCc50kxHskhWgL1ilKh2rpxyjS1jJLcQzcYFsJl/uRntD/ccQBWjmhWuVlG8Ox7bmStO2/lkHPglh9q94TjlFHp3jVu11AzyKiSvQhQBMegKjejPAdkC4c26UdxA8R4XZVaqIqBOGtLpsV7kk0XoExcefBEASAawGNMnv00jOfmlKMJ8M5nvL46q3QTP/pgkVGV/0zvGZtiQRQ3tgSYKV6IrmZxniBV8kpRihPI73iMFFR/i3yk4EkCqcbza937tHX/VMiU58deE9BgYdp3Qagtu/YpD3wp6QxM1Xt2+5v0x6ArRBZRSqGrGXBz8XuG22vg6o8458npKJf0VO+6zPN7KojxCCJgIKh/vyKGExfBgpTNyyQNalvKyP7vCXtIAyn648PHv54CDP8MrFoEwMSAQezq88XQCLKUK8C30c7C7DCWIbLf+WcFFjIg9/vB/ipoSJ64m5BzB+QjcaKSuqjnHfoy1kcOB//klW5TRCakbk3F20+LoWY0LCXoLsYBgAqnnZL1Hi6ldKUxue0hJOw8iCxu/scM2GJhoVrs1Kv4/d+PUGfJWUUhvjroCJ08uyPOekZKIEoe2d8/zHwTWmDl8RA9eAWLok3Gv6ApQp2mFasAqumUuVlqGK/TQkmTJXzy0g0xOjoswe5g+oPUGr4Ai8oBqdqrpteUAUR8qqhx2w4AAP7mSn/+SX+7//d/8sP1b8MeGOuRdeRK8pXtGaKJZLj7qFlbo9a4XpuEcq5jwqjScdqkfvtgUrQh/ZSxkju46x9h8zrUINtuSTimDe+8f1pYmVEb8RSNXhR+HnGDXTqHV2KrOj0x4BCfRqjWxK3S3i0WgKWjh8eku9nSF6qQUXaWow2FMsyFOHyi+YUcyb4zTugDu3FQ8PIAooI/oF25gMosWSQ+XqalZDko4PbLQbDigCBJ5z1qTmTMyfWUHLV604cOugzb3n+FqZYnV1PBf2m6GW1DTQeb14+iIrUBkp+AoYzG44LcsbJ1TigOlCsudR4R/gnBABaRzyrQLQDtNhbVFZZsEP+DuNROwdcY6G+/YMKqm/sUNIAN0/QRuyebuMqfIXqWNSsnxWnTuinSYAZvu8fTI3noVl/RTIpXIi8QNQh/ha4zgEcFZZxgN4OtgzMxvhrK3/P4Dsd6vD8pPfC8RfRtuVyfmuCSY9tgAaOO8voxBp/PQnOpxkVZe0/BPse9NYQVnODbqp+QUAs0J56FexIUij4numzInjgE5HzqQVGG1Djr8i+xB08ROV63IWo9OEfzJRD4Jnx3LumLhEINTg4cHIm69nBK3P94lyVW6Fq8AZK+TZNMCWHKoNKPyVy8WDhAZiuj7RAPoa07FnB4SUG/CpRXnHcgdVQW5XLtz9yIS+VlpNF9DXL9TgwNqDIBPHf1pbZBj9NEDfjAuQBIuupb1cWz8Pv3TpWhVuQtsTybcI+SRTcRq3CxZwRQPHANTci+JDjsMthfiT5k2E6i7n2Vkqs3cSXbj1ZFjOZwgkSY4oY7MnpTt8jONIiGFwT8L1CApWlVlHVDL3KAAgPcXl9Fm3knBmsbz6IGA2jJP3wwXEBGTSZaxUNLKSo2VS31vruU1THJ5v2zCKf7+0xyVcJQ6vQMdYGzM+jjH4ZaOskdmtiCkkSNio5eWRF7JuPbaqa06UDFsSyCMC3bOAgHOuoYh+HGhUsbcFWgS6GpWtvx2n5/70kmzzKcSTKN34MDiAmoLPeWqASilW4ABJN3bvsYxS7qJ/mglIq7zChEJcCE6o8h8g8psgZZMmadK/hxvnko7IS7XPoVcAmfbGcOHLhGfMg89DbL2VnX2QvSKsAAx8T+3Idip/5U9Ou/sZeRaLRIkTDGzBzN8zwiWI0vj/xm9TejPNZqNR91VMlqfom10aeEmlQzrVVyM/yFVKdcDvCuC+L1sYL3knMl2+6dgT4d5N3BT9s1M4RaoYyvtGCEas/L+AdTaTubwQzxqCDxpIfg6Sil+sVzBVpCElzdNxcxmhD5OZIhqUXKI+Y7K1fvr4OIFYRROpzdD9tmhNYLa68nAMfkXQTLA/GUkH8pTrQPqI6YL29ZdgTDPCszxXiMrbl82Smz+dNX3hs/SDvNnzAVS6NoP5py41imktD3BgVxi5pfP9gn7uZItc2QDrN0SZLDDXbuKCR1nZ21l5Ba1ONVuqJYt2MrcYGridA2ESygDuv6/jWkSH/2uCBpd5CWRvOEHr63HPm+niIPfLHlLhKn2uZQULvtnbEq2XWWWwTj5Z2WB0vp9vNEdN7nzIqOBkkrF3U5tTKEbrdk+LCqRxE3UVy3OqAtf0klfz/6aIAUz3inS+cA/cPoeBI85wyaj7L3z+f/wEdYo2fNvvUkRDwapVnhSms8YXXNPQv32MuD7eKN6lh2S64wyDbBxmCNsb4h15n4bvchtIbx2fKge888WbHOf5P3Yb//49Xv626oXJ2P58HJzF2Bk9kCyRzy16k3dJIxrH3IXNcsCqRFMKGS+vf1q980uluae26W5liKr6QozjUxdgiwTyf/n4k5vePsa/w2NCXi8KUXkAPIn+oL0t4dJCi0IDHnV2N5EBwWX8eiHBAzXblNEGUgWB37zw/wrWT9vUbP/tKU8EYNh+zHc7I9+M4PBDCVBZ6ejC62ZJL+BtfvdjXxF2nE+Ro9pQncvIHBfSJGh62AX3PuffLca6ztu5F4jYZea8qyc9+Cj8IhaNYscJCnHZynyBa1nJMCDnRR5EA2gN/khwNbbjYldoHitrLHsvib41QK1aaw79Vwf2a5akh8E22vHbBZmBUyIfc2cgxiQ4v68nERBdheTIe0nGcLnriGxVmNplo2F+qk0i/XFwkpjNor2qmt/oHAqcoP6ikYIhwCGykjz7Ws42+oG0GAkRJwhL60OVCWNV9HCkNfESYIf12O8JGSc8zyh1lmeFbI7jmY3zfvenqU9kaYisU52dG4UsVZ8ZalInMwfemqD2mceXR3yFAZzE4lQKAFLBPkD3DEoZ6yjzpFNHviOaCEMeNgdHYQO8FOFpZe1kvzF5Yrb/T27A39yzRQrmK5DdhXBj4Bg1NapSEIhs5eKj7V6ZRhUnXG82Oz2Xd5kjyDfN4nRj44qn3IrhxfHcPsr10MLGdzxkk1HSxqjD9Mmtr2BaiUCOsg113UtNP+TtV7d8N86TUrDB1UH3uE4ggHi5q0Mvg1HukmoK2NOHxObNrFTdTIUZU85GoJE9dOllYeT3gNh+fu4Wt6yXWjbtar1iJgm8mll2/vuVFWeQWnRep3kHahIqK1jKS6PZcH1LV33mRHC+2LzbdGP7ohUSADsSaiqlFyJtLexJzmNmNnhg5a55LK5V7g9FEgkXh5QE8hM0zhlMA5zO6XjVC5SDRYaGVgEY6NJxzRF9WV6ACg9kGu8ppPHOKcsCsS1j011HUZ7ZYiLfizYKym8ffGgeNs/TH+YpLWNnbusbXUOsAICbfNQa1jRpheRhJvMzLzGhkTY0vxlXNjlgq+lj7Gr1E9bzgWFk/RERQouY0CDwT7D2xhRjn7gejbzo7G0cwvSH4zOZP0WaWslKInuxFMhE8qVje+1h0l83OTdYFUOt0ABwQ73tWaBggwBXsiG6BOMYlSmqdQtkeJsI/aaWRJWJ+YPKEbG5WtoZWhuamnF0h/Gjda0/a+3w3JkYnI+RXH6M6BYkz7s73LBs52we0ZWqbvpqfa+zReXohKHFFHQxFMjSRyi3/NgV0fOlB+2tLwwpou6yXr/8HTFtqphJidEerW9sai81J8EKxxdpX2KlyO34LKRdmMZjGyv+W/5gcGYqWe8SUNCsRsTGIwwRZ9TtVC+hNMzCyG2w244ABDMlBBfxYAAAAAFn9qdW1iAAAAHmp1bWRjMnBhABEAEIAAAKoAOJtxA2MycGEAAAAWWWp1bWIAAABHanVtZGMybWEAEQAQgAAAqgA4m3EDdXJuOmMycGE6NjZiYTFhODItMWIxYy00Njk3LTg3ZTYtNTU0ZjJkNGU0YTlhAAAAA5RqdW1iAAAAKWp1bWRjMmFzABEAEIAAAKoAOJtxA2MycGEuYXNzZXJ0aW9ucwAAAAC5anVtYgAAAERqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmluZ3JlZGllbnQudjMAAAAAGGMyc2iGGWOZ7/uibLrDw7Ntl7AZAAAAbWNib3KjaWRjOmZvcm1hdGppbWFnZS93ZWJwamluc3RhbmNlSUR4LHhtcDppaWQ6MWI1OWRhYWYtNWNmNS00Zjc0LTgwMDAtZDUwYjc4YmRmZDUwbHJlbGF0aW9uc2hpcGhwYXJlbnRPZgAAAeJqdW1iAAAAQWp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuYWN0aW9ucy52MgAAAAAYYzJzaH6QKilY8A8xN7wmvr4QKQIAAAGZY2JvcqJnYWN0aW9uc4KiZmFjdGlvbmtjMnBhLm9wZW5lZGpwYXJhbWV0ZXJzoWtpbmdyZWRpZW50c4GiY3VybHgtc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5pbmdyZWRpZW50LnYzZGhhc2hYIF2WL8YdJ2E8y7NScmrQeutVdE0Bri5FtFh6abE2Hi/VpGZhY3Rpb254HWNvbS5hbnRocm9waWMuY2xhdWRlLnByb3ZpZGVkanBhcmFtZXRlcnOheB9jb20uYW50aHJvcGljLm9yaWdpbi1jb25maWRlbmNlZ3Vua25vd25rZGVzY3JpcHRpb254ZkNsYXVkZSBwcm92aWRlZCB0aGlzIGZpbGUgYXQgdGhlIHJlcXVlc3Qgb2YgYSB1c2VyIGFuZCBtYXkgaGF2ZSBjcmVhdGVkIG9yIG1vZGlmaWVkIHRoZSBmaWxlIGNvbnRlbnRzLm1zb2Z0d2FyZUFnZW50oWRuYW1lZkNsYXVkZXJhbGxBY3Rpb25zSW5jbHVkZWT1AAAAyGp1bWIAAABAanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5oYXNoLmRhdGEAAAAAGGMyc2jf3tgdmkjA0OFkzIwEPWb5AAAAgGNib3KlY2FsZ2ZzaGEyNTZjcGFkTAAAAAAAAAAAAAAAAGRoYXNoWCCMeu14QksIhBF1dJObw2L8r14Wnd+BYVFDLTZABH9swWRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBkOSGZsZW5ndGgZFocAAAI+anVtYgAAACdqdW1kYzJjbAARABCAAACqADibcQNjMnBhLmNsYWltLnYyAAAAAg9jYm9ypWNhbGdmc2hhMjU2aXNpZ25hdHVyZXhNc2VsZiNqdW1iZj0vYzJwYS91cm46YzJwYTo2NmJhMWE4Mi0xYjFjLTQ2OTctODdlNi01NTRmMmQ0ZTRhOWEvYzJwYS5zaWduYXR1cmVqaW5zdGFuY2VJRHgseG1wOmlpZDozYTI1MDEwNS1jZTRkLTQ0OTctYmMwNS01YjVlMzYwNDMyODZyY3JlYXRlZF9hc3NlcnRpb25zg6JjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggXZYvxh0nYTzLs1JyatB661V0TQGuLkW0WHppsTYeL9WiY3VybHgqc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5hY3Rpb25zLnYyZGhhc2hYIMPxAACPYuRbTqEHMBwqKqoPAKcL1Ab6U40Y2xYHzeVQomN1cmx4KXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaGFzaC5kYXRhZGhhc2hYIJefFq60GKSGUrAOn7CXHTPAq3M8znkQ+K3aMm5FnCTndGNsYWltX2dlbmVyYXRvcl9pbmZvo2RuYW1lb0FudGhyb3BpYyBGaWxlc2d2ZXJzaW9uZTEuMC4wa3NwZWNWZXJzaW9uZTIuNC4wAAAQOGp1bWIAAAAoanVtZGMyY3MAEQAQgAAAqgA4m3EDYzJwYS5zaWduYXR1cmUAAAAQCGNib3LShFkCEqIBJhghWQIKMIICBjCCAY2gAwIBAgIUQOWgCu7COdC+uIP6BkIFPWdVEwAwCgYIKoZIzj0EAwMwSTEXMBUGA1UEChMOQW50aHJvcGljLCBQQkMxLjAsBgNVBAMTJUFudGhyb3BpYyBDb250ZW50IENyZWRlbnRpYWxzIFJvb3QgQ0EwHhcNMjYwODA3MTg0MzU2WhcNMjgwODA2MTk0MzU2WjBEMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEpMCcGA1UEAxMgQW50aHJvcGljIENsYXVkZSBDb250ZW50IFNpZ25pbmcwWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAASYegpry1AYBRTVNL1CpTlbROnY3dey+UrsF9C3phYrATN3ZHf93Mo8RQN0KOUuOn19P4oWNFWe5n2/She9N7eTo1gwVjAOBgNVHQ8BAf8EBAMCB4AwFQYDVR0lBA4wDAYKKwYBBAGD6F4CATAMBgNVHRMBAf8EAjAAMB8GA1UdIwQYMBaAFM5R4gSBTmRbI/jjxM+aPpzB11zCMAoGCCqGSM49BAMDA2cAMGQCMDFzHRSeAXrSy1WOzkbhPZ6Km2wGTmZ/2gK18k8BQGXyqz88Rdrz6CTX9flAnYNVxgIwcF9c3fVhqmJKpi+UhasNUMko69cyX6STPfta3Q8EjyzDjzoyrol46FP6VFHhvUcJoWNwYWRZDZ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2WEDYdTdxbPo556O3GYsFiVP5GYdb50VHUM6fx2BwtsOMUU/ONnQzqj8xdiV/sA6sBIXRZTifvXK0cQ+KfYPNZSPuAA=="); } .demo-faixa { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 1200; padding: 8px 16px; border-radius: 9999px; background: var(--cor-amarelo); color: var(--cor-dark-purple); font-size: 0.8rem; font-weight: 700; width: max-content; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); } /* Composição de soluções: cores IMMakers com uma camada escura uniforme para leitura. */ #solucoes { background: transparent; } #solucoes::before { content: none; } #solucoes .solucoes__topo { gap: 20px; margin-bottom: 40px; } #solucoes .titulo-secao { color: #F5F1F8; } #solucoes .solucoes__intro { color: #E5DDEC; line-height: 1.75; } #solucoes .grade-solucoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } #solucoes .card-solucao { min-width: 0; background: var(--s1); border-color: rgba(199, 189, 210, .2); } #solucoes .card-solucao:hover { background: var(--s2); border-color: var(--cor-roxo-claro); } #solucoes .card-solucao h3 { color: var(--texto); } #solucoes .card-solucao p, #solucoes .card-solucao__icone, #solucoes .card-solucao__etapa { color: var(--texto-2); } #solucoes .card-solucao__link { color: var(--cor-laranja-claro); } #solucoes .card-solucao:focus-within { border-color: var(--cor-roxo-claro); } #solucoes .card-solucao__link:focus-visible { outline-color: var(--cor-amarelo); } @media (max-width: 960px) { #solucoes .grade-solucoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { #solucoes .solucoes__topo { gap: 16px; margin-bottom: 28px; } #solucoes .grade-solucoes { grid-template-columns: minmax(0, 1fr); } } /* Carrossel manual das 11 soluções. */ #solucoes .grade-solucoes { display: grid; position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 2.35); grid-auto-rows: 1fr; align-items: stretch; gap: 18px; margin: 0; padding: 4px 2px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; } #solucoes .grade-solucoes:focus-visible { outline: 2px solid var(--cor-laranja-claro); outline-offset: 6px; border-radius: 20px; } #solucoes .card-solucao { --card-accent: var(--cor-roxo-claro); display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 330px; padding: 28px; border-radius: 20px; position: relative; scroll-snap-align: start; background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 70%), var(--s1); } #solucoes .card-solucao[data-solucao="deal"], #solucoes .card-solucao[data-solucao="wifi"], #solucoes .card-solucao[data-solucao="movimento"] { --card-accent: var(--cor-amarelo); } #solucoes .card-solucao[data-solucao="localizacao"], #solucoes .card-solucao[data-solucao="push"] { --card-accent: var(--cor-vermelho); } #solucoes .card-solucao[data-solucao="email"], #solucoes .card-solucao[data-solucao="projetos"] { --card-accent: var(--cor-laranja); } #solucoes .card-solucao:hover, #solucoes .card-solucao:focus-within { border-color: var(--card-accent); } #solucoes .card-solucao__topo { gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } #solucoes .card-solucao__icone { display: block; width: 64px; height: 64px; padding: 15px; flex: none; color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 12%, var(--s2)); border: 1px solid color-mix(in srgb, var(--card-accent) 38%, var(--linha)); border-radius: 18px; } #solucoes .card-solucao__etapa { font-size: .75rem; line-height: 1.5; } #solucoes .card-solucao h3 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 700; line-height: 1.2; } #solucoes .card-solucao p { font-size: .95rem; line-height: 1.7; flex: 1; } #solucoes .card-solucao__link { margin-top: auto; padding-top: 10px; font-size: .875rem; } .carrossel-solucoes { min-width: 0; } .carrossel-solucoes__controles { display: flex; align-items: center; gap: 20px; margin-top: 24px; } .carrossel-solucoes__controles[hidden] { display: none; } .carrossel-solucoes__total { font-size: .8rem; color: var(--texto-2); white-space: nowrap; } .carrossel-solucoes__progresso { display: block; appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 4px; border: 0; border-radius: 99px; overflow: hidden; background: var(--linha); color: var(--cor-laranja); } .carrossel-solucoes__progresso::-webkit-progress-bar { background: var(--linha); } .carrossel-solucoes__progresso::-webkit-progress-value { background: var(--gradiente-marca); border-radius: 99px; } .carrossel-solucoes__progresso::-moz-progress-bar { background: var(--gradiente-marca); border-radius: 99px; } .carrossel-solucoes__setas { display: flex; gap: 8px; } .carrossel-solucoes__seta { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linha-forte); color: var(--texto); background: var(--s2); cursor: pointer; transition: background-color 180ms, border-color 180ms; } .carrossel-solucoes__seta svg { width: 18px; height: 18px; } .carrossel-solucoes__seta:hover:not(:disabled) { background: var(--cor-roxo); border-color: var(--cor-roxo-claro); } .carrossel-solucoes__seta:disabled { opacity: .35; cursor: default; } .carrossel-solucoes__seta:focus-visible { outline: 2px solid var(--cor-laranja-claro); outline-offset: 4px; } @media (max-width: 960px) { #solucoes .grade-solucoes { grid-auto-columns: calc((100% - 18px) / 1.45); } } @media (max-width: 640px) { #solucoes .grade-solucoes { grid-auto-columns: 100%; gap: 14px; } #solucoes .card-solucao { padding: 24px; border-radius: 16px; min-height: 330px; } #solucoes .card-solucao h3 { font-size: 1.4rem; } .carrossel-solucoes__controles { gap: 12px; margin-top: 18px; } .carrossel-solucoes__total { font-size: .75rem; } } /* Banner com gradiente: foto removida nesta revisão. */ /* Fundo fotográfico do CTA final definido em #cta-imagem-restaurada-design. */ /* ===== estilo: base ===== */ /* Compensação do cabeçalho fixo ao abrir a análise. */ #briefing { scroll-margin-top: 88px; } /* ===== estilo: base ===== */ /* Redes sociais junto à marca no rodapé. */ .marca-com-redes { display: flex; align-items: center; gap: 16px; flex: none; } .redes-sociais { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .redes-sociais a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--texto-2); background: transparent; border: 1px solid transparent; border-radius: 10px; text-decoration: none; transition: color 180ms, border-color 180ms, background-color 180ms; } .redes-sociais a:hover { color: var(--cor-laranja-claro); border-color: var(--linha-forte); background: var(--s2); } .redes-sociais a:focus-visible { outline: 2px solid var(--cor-laranja-claro); outline-offset: 3px; } .redes-sociais svg { display: block; width: 18px; height: 18px; } .rodape .marca-com-redes { flex-wrap: wrap; } @media (max-width: 480px) { .marca-com-redes { gap: 12px; } .redes-sociais { gap: 2px; } } /* ===== estilo: base ===== */ /* Mockups das soluções: fundo transparente, estrutura neutra e destaque da marca. */ .solucao-mockup { display: grid; place-items: center; flex: none; width: 100%; height: 160px; margin: 0 0 4px; pointer-events: none; } .solucao-mockup svg { display: block; width: 100%; max-width: 320px; height: 100%; color: var(--card-accent); } @media (max-width: 640px) { .solucao-mockup { height: 145px; } } /* ===== estilo: base ===== */ /* Fluxo da análise: quatro etapas conectadas em HTML acessível. */ #como-funciona .infografico-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 12px 0 0; margin: 0; } .infografico-etapas__etapa { position: relative; min-width: 0; padding: 0 8px; text-align: center; } .infografico-etapas__etapa:not(:last-child)::before { content: ''; position: absolute; top: 44px; left: calc(50% + 48px); width: calc(100% - 72px); height: 2px; background: linear-gradient(90deg, var(--cor-etapa), var(--cor-proxima)); opacity: .9; } .infografico-etapas__etapa:not(:last-child)::after { content: ''; position: absolute; top: 38px; left: calc(100% + 4px); width: 12px; height: 12px; border-top: 2px solid var(--cor-proxima); border-right: 2px solid var(--cor-proxima); transform: rotate(45deg); } .infografico-etapas__marco { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-inline: auto; border: 1px solid color-mix(in srgb, var(--cor-etapa) 65%, var(--linha)); border-radius: 50%; color: var(--cor-etapa); background: color-mix(in srgb, var(--cor-etapa) 8%, var(--fundo)); } .infografico-etapas__marco svg { display: block; width: 34px; height: 34px; } .infografico-etapas__numero { position: absolute; top: -5px; right: -7px; display: grid; place-items: center; min-width: 32px; height: 26px; padding-inline: 6px; border: 1px solid color-mix(in srgb, var(--cor-etapa) 65%, var(--linha)); border-radius: var(--r-pill); color: var(--cor-etapa); background: var(--s1); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .08em; } .infografico-etapas__etapa h3 { min-height: 2.6em; margin: 26px 0 10px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--texto); } .infografico-etapas__etapa p { margin: 0 auto; max-width: 29ch; font-size: .925rem; line-height: 1.75; color: var(--texto-2); } @media (max-width: 960px) { #como-funciona .infografico-etapas { grid-template-columns: minmax(0, 1fr); gap: 36px; } .infografico-etapas__etapa { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px 28px; min-height: 88px; padding: 0; text-align: left; } .infografico-etapas__marco { grid-column: 1; grid-row: 1 / 3; margin: 0; } .infografico-etapas__etapa h3 { grid-column: 2; min-height: 0; margin: 0; } .infografico-etapas__etapa p { grid-column: 2; max-width: none; margin: 0; } .infografico-etapas__etapa:not(:last-child)::before { top: 96px; left: 44px; width: 1px; height: calc(100% - 68px); background: linear-gradient(180deg, var(--cor-etapa), var(--cor-proxima)); } .infografico-etapas__etapa:not(:last-child)::after { top: calc(100% + 15px); left: 41px; transform: rotate(135deg); } } @media (max-width: 540px) { .infografico-etapas__etapa { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; } .infografico-etapas__marco { width: 64px; height: 64px; } .infografico-etapas__marco svg { width: 28px; height: 28px; } .infografico-etapas__numero { right: -6px; top: -7px; min-width: 28px; height: 23px; font-size: .75rem; } .infografico-etapas__etapa:not(:last-child)::before { top: 72px; left: 32px; height: calc(100% - 44px); } .infografico-etapas__etapa:not(:last-child)::after { left: 29px; } } /* ===== estilo: base ===== */ .privacidade-formulario { min-width: 0; margin: 24px 0 0; padding: 18px 20px 20px; border: 1px solid var(--linha-forte); border-radius: var(--r-card); } .privacidade-formulario legend { padding: 0 8px; font-size: .9rem; font-weight: 600; color: var(--texto); } .privacidade-formulario > p { color: var(--texto-2); font-size: .825rem; line-height: 1.7; } .privacidade-formulario .consentimento { margin-top: 18px; line-height: 1.7; } .privacidade-formulario .privacidade-formulario__direitos { margin-top: 18px; font-size: .775rem; } .privacidade-formulario a { display: inline-flex; align-items: center; min-height: 44px; } .privacidade-formulario a, .aviso-privacidade a { color: var(--cor-laranja-claro); text-underline-offset: 3px; overflow-wrap: anywhere; } .privacidade-formulario a:focus-visible, .aviso-privacidade a:focus-visible, .rodape__privacidade:focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 4px; border-radius: 3px; } .rodape__institucional { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; } .rodape__privacidade { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); font-size: .8rem; text-underline-offset: 4px; } .rodape__privacidade:hover { color: var(--cor-laranja-claro); } .aviso-privacidade { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); margin: auto; padding: 0; color: var(--texto); background: var(--s1); border: 1px solid var(--linha-forte); border-radius: 20px; overflow-y: auto; overscroll-behavior: contain; } .aviso-privacidade::backdrop { background: rgba(0, 0, 0, .78); } .aviso-privacidade__cabecalho { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; background: var(--s1); border-bottom: 1px solid var(--linha); } .aviso-privacidade__cabecalho h2 { font-size: clamp(1.1rem, 3vw, 1.4rem); line-height: 1.25; } .aviso-privacidade__cabecalho h2:focus { outline: none; } .aviso-privacidade__fechar { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--linha-forte); border-radius: 50%; background: var(--s2); color: var(--texto); cursor: pointer; } .aviso-privacidade__fechar svg { width: 20px; height: 20px; } .aviso-privacidade__fechar:focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 3px; } .aviso-privacidade__conteudo { padding: 24px 28px 32px; } .aviso-privacidade__introducao { color: var(--cor-roxo-claro); font-size: .8rem; margin-bottom: 24px; } .aviso-privacidade__conteudo section + section { margin-top: 24px; } .aviso-privacidade__conteudo h3 { font-size: 1rem; margin: 0 0 8px; } .aviso-privacidade__conteudo p { font-size: .875rem; color: var(--texto-2); line-height: 1.8; } @media (max-width: 540px) { .privacidade-formulario { padding: 14px 14px 18px; } .aviso-privacidade__cabecalho { padding: 16px 18px; } .aviso-privacidade__conteudo { padding: 20px 18px 24px; } } /* ===== estilo: base ===== */ /* Linha legal abaixo das duas marcas. */ .rodape__legal { display: flex; flex-basis: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; gap: 12px 24px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--linha); color: var(--texto-3); font-size: .8rem; } .rodape__copyright { margin: 0; } @media (max-width: 540px) { .rodape__legal { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ===== estilo: base ===== */ /* Ajustes de leitura para o conteúdo fornecido em Texto LP.docx. */ .rotulo-secao { display: block; margin: 0 0 14px; color: var(--cor-roxo-claro); font-size: .8rem; font-weight: 600; letter-spacing: .07em; line-height: 1.5; } #topo .hero__titulo { --fs-hero: clamp(2.15rem, 4.7vw, 4.1rem); } #topo .hero__titulo .linha { white-space: normal; } #topo .hero__titulo .revelar-linha { max-width: 100%; } .rodape { border-top: 0; } #solucoes .card-solucao { --card-accent: var(--cor-roxo-claro); } #solucoes .card-solucao[data-principal="considerar"] { --card-accent: var(--cor-amarelo); } #solucoes .card-solucao[data-principal="agir"] { --card-accent: var(--cor-vermelho); } #solucoes .card-solucao[data-principal="relacionar"] { --card-accent: var(--cor-laranja); } /* Fluxo estático em janelas baixas para acomodar as listas completas da jornada. */ @media (max-width: 960px) and (max-height: 800px) { .js-motion .jornada-scroll.ativo { height: auto; padding: 80px 0; } .js-motion .jornada-scroll.ativo .jornada-scroll__fixo { position: static; height: auto; display: block; overflow: visible; } .js-motion .jornada-scroll.ativo .jornada-scroll__grade { padding-top: 0; grid-template-rows: auto auto auto; } .js-motion .jornada-scroll.ativo .etapas-scroll { display: grid; gap: 40px; } .js-motion .jornada-scroll.ativo .etapa-scroll { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; } .js-motion .jornada-scroll.ativo .etapa-scroll.passada { transform: none; } .js-motion .jornada-scroll.ativo .indicador-etapas { display: none; } } /* ===== estilo: base ===== */ .inicio__opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pergunta__ajuda--empresa { margin: 24px 0 0; font-size: .875rem; } .resultado-v6 { grid-column: 1 / -1; } .resultado-v6__confianca { color: var(--cor-roxo-claro); font-size: .9rem; margin-top: 12px; } .resultado-v6__bloco { margin-top: 24px; } .resultado-v6__bloco h4 { font-size: .95rem; font-weight: 600; margin-bottom: 10px; } .resultado-v6__bloco ul { padding-left: 20px; display: grid; gap: 8px; font-size: .9rem; color: var(--texto-2); line-height: 1.7; } .resultado-v6__fonte { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: .75rem; color: var(--texto-3); line-height: 1.7; } .solucao__disponibilidade { font-size: .75rem; color: var(--texto-3); } .solucao .solucao__condicao { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--cor-laranja); color: var(--texto-2); font-size: .825rem; line-height: 1.7; } .solucao__detalhes { margin-top: 12px; font-size: .8rem; color: var(--texto-2); } .solucao__detalhes summary { cursor: pointer; color: var(--cor-laranja-claro); font-weight: 600; padding: 6px 0; } .solucao__detalhes summary:focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 3px; } .solucao__detalhes p { margin-top: 10px; font-size: .8rem; } .solucao__detalhes ul { padding-left: 18px; margin-top: 10px; display: grid; gap: 6px; line-height: 1.6; } @media (max-width: 540px) { .resultado-v6__bloco ul { font-size: .85rem; } } /* ===== estilo: base ===== */ /* Títulos das demais seções usam a largura útil completa. */ .titulo-secao { width: 100%; max-width: none; min-width: 0; overflow-wrap: break-word; } /* ===== estilo: base ===== */ /* Chamada final: cantos superiores retos, mantendo os inferiores. */ #comece-agora .cta-banda, #comece-agora .cta-banda::before { border-top-left-radius: 0; border-top-right-radius: 0; } /* ===== estilo: base ===== */ #cta-banda-titulo .cta-banda__titulo-leve { font-weight: 700; } /* ===== estilo: base ===== */ /* Menor respiro acima e abaixo do infográfico de quatro etapas. */ #como-funciona { padding-block: var(--espaco-secao); } @media (max-width: 640px) { #como-funciona { padding-block: 40px; } } /* ===== estilo: base ===== */ /* Mais espaço entre o título da jornada e o símbolo animado. */ #jornadaScroll .jornada-scroll__cabeca { margin-bottom: 32px; } @media (max-width: 960px), (max-height: 700px) { #jornadaScroll .jornada-scroll__cabeca { margin-bottom: 16px; } } /* ===== estilo: base ===== */ /* Quatro ícones alinhados, seguidos pelos textos na mesma faixa de leitura. */ @media (min-width: 961px) { #como-funciona .infografico-etapas { grid-template-rows: 88px auto; row-gap: 24px; } #como-funciona .infografico-etapas__etapa { display: grid; grid-row: 1 / 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; } #como-funciona .infografico-etapas__marco { grid-row: 1; grid-column: 1; } #como-funciona .infografico-etapas__texto { grid-row: 2; grid-column: 1; align-self: start; } #como-funciona .infografico-etapas__etapa::before, #como-funciona .infografico-etapas__etapa::after { grid-row: 1; } } #como-funciona .infografico-etapas__texto h3 { min-height: 0; margin: 0 0 10px; color: var(--cor-etapa); } @media (max-width: 960px) { #como-funciona .infografico-etapas { gap: 48px; } #como-funciona .infografico-etapas__etapa { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } #como-funciona .infografico-etapas__marco { flex-shrink: 0; margin: 0 auto; } #como-funciona .infografico-etapas__texto { width: 100%; max-width: 42ch; } #como-funciona .infografico-etapas__texto p { max-width: none; } #como-funciona .infografico-etapas__etapa:not(:last-child)::before { top: calc(100% + 10px); left: 50%; width: 1px; height: 24px; } #como-funciona .infografico-etapas__etapa:not(:last-child)::after { top: calc(100% + 25px); left: calc(50% - 6px); } } /* ===== estilo: design-boxes-briefing ===== */ /* Referência: Uiverse.io, MuhammadHasann. Adaptado ao design system IMMakers Ads. */ @property --imm-briefing-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* Escopo exclusivo dos dois boxes do briefing; mantém o grid e as medidas atuais. */ #briefing .briefing-bento > .card { position: relative; isolation: isolate; min-width: 0; border: 1px solid var(--linha-forte); border-radius: var(--r-card); color: var(--texto); background-color: var(--s1); background-image: radial-gradient(at 88% 40%, var(--s1) 0%, transparent 85%), radial-gradient(at 49% 30%, var(--s1) 0%, transparent 85%), radial-gradient(at 14% 26%, var(--s1) 0%, transparent 85%), radial-gradient(at 0% 100%, color-mix(in srgb, var(--cor-roxo) 66%, transparent) 0%, transparent 70%), radial-gradient(at 48% 100%, color-mix(in srgb, var(--cor-vermelho) 26%, transparent) 0%, transparent 66%), radial-gradient(at 100% 100%, color-mix(in srgb, var(--cor-laranja) 28%, transparent) 0%, transparent 62%); box-shadow: inset 0 -16px 24px rgba(181, 122, 196, .12), 0 16px 40px rgba(14, 9, 21, .2); } /* A máscara limita o brilho à borda, sem cobrir conteúdo nem capturar cliques. */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { #briefing .briefing-bento > .card::before { content: ''; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--imm-briefing-angle), var(--linha-forte) 0deg 190deg, var(--cor-roxo) 235deg, var(--cor-roxo-claro) 270deg, var(--cor-vermelho) 300deg, var(--cor-laranja) 325deg, var(--cor-amarelo) 340deg, var(--linha-forte) 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: imm-briefing-border 8s linear infinite; } #briefing .briefing-bento > .resumo::before { animation-delay: -4s; } } @keyframes imm-briefing-border { to { --imm-briefing-angle: 360deg; } } #briefing .resumo__rotulo { color: var(--cor-roxo-claro); } #briefing .resumo__contador { color: var(--cor-amarelo); } #briefing .resumo__lista li.atual { background: color-mix(in srgb, var(--cor-roxo) 24%, var(--s1)); box-shadow: inset 2px 0 var(--cor-roxo-claro); } #briefing .resumo__lista li.atual .resumo__marca { border-color: var(--cor-roxo-claro); } #briefing .resumo__lista li.feito .resumo__marca { border-color: var(--cor-amarelo); background: var(--cor-amarelo); } #briefing .resumo__lista li.feito .resumo__marca::after { border-color: var(--cor-dark-purple); } #briefing .resumo__rodape { border-top-color: var(--linha-forte); } #briefing .resumo__selo { color: var(--cor-roxo-claro); } #briefing .resumo__rodape p, #briefing .progresso__texto, #briefing .dica-teclado, #briefing .campo__ajuda { color: var(--texto-2); } #briefing .segmentos i.feito { background: var(--cor-roxo-claro); } #briefing .segmentos i.atual { background: var(--cor-amarelo); } #briefing .opcao { background: color-mix(in srgb, var(--s1) 86%, transparent); border-color: var(--linha-forte); transition: border-color 200ms, background-color 200ms, box-shadow 200ms; } #briefing .opcao:hover { border-color: var(--cor-roxo-claro); } #briefing .opcao[aria-pressed='true'] { border-color: var(--cor-roxo-claro); background: color-mix(in srgb, var(--cor-roxo) 28%, var(--s1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-roxo-claro) 28%, transparent); } #briefing .opcao[aria-pressed='true'] .opcao__letra { border-color: var(--cor-roxo-claro); color: var(--texto); } #briefing .opcao[aria-pressed='true'] .opcao__marca { border-color: var(--cor-amarelo); background: var(--cor-amarelo); } #briefing .opcao[aria-pressed='true'] .opcao__marca::after { border-color: var(--cor-dark-purple); } #briefing .campo input, #briefing .campo textarea { background: color-mix(in srgb, var(--s1) 90%, transparent); } #briefing .campo input:focus, #briefing .campo textarea:focus { border-color: var(--cor-roxo-claro); box-shadow: 0 0 0 3px rgba(181, 122, 196, .18); } #briefing .imm-btn--primary:not(#btnAvancar) { color: var(--texto); background: linear-gradient(0deg, #5B2D67, var(--cor-roxo)); border-color: color-mix(in srgb, var(--cor-roxo-claro) 60%, var(--cor-roxo)); box-shadow: inset 0 -2px 18px -4px rgba(181, 122, 196, .45); } #briefing .imm-btn--primary:not(#btnAvancar):hover { background: linear-gradient(0deg, var(--cor-roxo), #874997); } #briefing .imm-btn--primary:not(#btnAvancar) .imm-btn__icone { color: var(--cor-dark-purple); background: var(--cor-amarelo); } #briefing .imm-btn--ghost { background: color-mix(in srgb, var(--s1) 75%, transparent); } #briefing .imm-btn--ghost:hover { border-color: var(--cor-roxo-claro); } #briefing .privacidade-formulario { background: color-mix(in srgb, var(--s1) 86%, transparent); border-color: var(--linha-forte); } @media (prefers-reduced-motion: reduce) { #briefing .briefing-bento > .card::before { animation: none; } #briefing .opcao { transition: none; } } /* ===== estilo: carrossel-destaque-design ===== */ /* Carrossel editorial: uma solução em foco e prévias laterais. */ #solucoes .grade-solucoes { --slide-gutter: 52px; grid-auto-columns: 100%; gap: 24px; padding: 12px var(--slide-gutter) 24px; scroll-padding-inline: var(--slide-gutter); scrollbar-width: none; } #solucoes .grade-solucoes::-webkit-scrollbar { display: none; } #solucoes .card-solucao { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr auto; gap: 16px 40px; min-height: 390px; padding: 36px; scroll-snap-align: center; border-radius: 24px; background: radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 65%), var(--s1); transition: opacity 300ms, transform 400ms var(--suave), border-color 250ms; } #solucoes .card-solucao[data-principal='descobrir'] { --card-accent: var(--cor-roxo-claro); } #solucoes .card-solucao[data-principal='considerar'] { --card-accent: var(--cor-amarelo); } #solucoes .card-solucao[data-principal='agir'] { --card-accent: var(--cor-vermelho); } #solucoes .card-solucao[data-principal='relacionar'] { --card-accent: var(--cor-laranja); } #solucoes .carrossel-solucoes[data-featured-ready] .card-solucao { opacity: .48; transform: scale(.96); } #solucoes .carrossel-solucoes[data-featured-ready] .card-solucao.is-active, #solucoes .carrossel-solucoes[data-featured-ready] .card-solucao:focus-within { opacity: 1; transform: scale(1); border-color: var(--card-accent); } #solucoes .card-solucao .solucao-mockup { grid-column: 1; grid-row: 1 / 5; align-self: stretch; min-height: 280px; height: auto; margin: 0; padding: 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--card-accent) 20%, var(--linha)); background: color-mix(in srgb, var(--card-accent) 5%, var(--fundo)); } #solucoes .solucao-mockup svg { width: 100%; height: auto; max-width: 420px; } #solucoes .card-solucao__topo { grid-column: 2; grid-row: 1; margin: 0 0 4px; } #solucoes .card-solucao__icone { width: 44px; height: 44px; padding: 10px; border-radius: 12px; } #solucoes .card-solucao__etapa { color: var(--card-accent); font-size: .8rem; } #solucoes .card-solucao h3 { grid-column: 2; grid-row: 2; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.12; } #solucoes .card-solucao p { grid-column: 2; grid-row: 3; font-size: 1rem; line-height: 1.75; } #solucoes .card-solucao__link { grid-column: 2; grid-row: 4; justify-self: start; align-self: end; margin: 8px 0 0; padding-top: 0; color: var(--card-accent); } #solucoes .carrossel-solucoes__controles { margin-top: 12px; gap: 24px; padding-inline: 4px; } #solucoes .carrossel-solucoes__total { min-width: 76px; color: var(--texto); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; } #solucoes .carrossel-solucoes__progresso { height: 2px; } #solucoes .carrossel-solucoes__seta { width: 48px; height: 48px; } @media (max-width: 960px) { #solucoes .grade-solucoes { --slide-gutter: 32px; gap: 18px; } #solucoes .card-solucao { padding: 28px; column-gap: 24px; } #solucoes .card-solucao .solucao-mockup { padding: 12px; } } @media (max-width: 760px) { #solucoes .grade-solucoes { --slide-gutter: 20px; gap: 12px; } #solucoes .card-solucao { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; gap: 16px; padding: 24px; min-height: 0; border-radius: 20px; } #solucoes .card-solucao__topo { grid-column: 1; grid-row: 1; } #solucoes .card-solucao .solucao-mockup { grid-column: 1; grid-row: 2; min-height: 180px; height: 200px; } #solucoes .solucao-mockup svg { width: auto; max-width: 100%; height: 100%; } #solucoes .card-solucao h3 { grid-column: 1; grid-row: 3; font-size: 1.65rem; } #solucoes .card-solucao p { grid-column: 1; grid-row: 4; font-size: .95rem; } #solucoes .card-solucao__link { grid-column: 1; grid-row: 5; font-size: .8rem; } #solucoes .carrossel-solucoes__controles { gap: 12px; } } @media (prefers-reduced-motion: reduce) { #solucoes .card-solucao { transition: none; } } /* ===== estilo: imm-gsap-design ===== */ /* A mesma composição visual, com GSAP controlando somente transform e opacidade. */ html.gsap-motion .revelar { opacity: 1; transform: none; transition: none; } html.gsap-motion .revelar-linha { transform: none; transition: none; } html.gsap-motion .simbolo--hero .simbolo__traco { animation: none; transition: none; } html.gsap-motion .jornada-scroll.ativo .etapa-scroll { transition: none; } html.gsap-motion #solucoes .card-solucao { transition: border-color 250ms, background-color 200ms; } /* ===== estilo: solucoes-scroll-design ===== */ .carrossel-solucoes__viewport { min-width: 0; } .carrossel-solucoes__pular { display: none; } #solucoes.solucoes--scroll { padding-block: 20px; } #solucoes.solucoes--scroll .solucoes__topo { gap: 12px; margin-bottom: 20px; } #solucoes.solucoes--scroll .rotulo-secao { margin-bottom: 10px; } #solucoes.solucoes--scroll .titulo-secao { font-size: clamp(1.5rem, 2.5vw, 2.2rem); } #solucoes.solucoes--scroll .solucoes__intro { font-size: .9rem; line-height: 1.6; } #solucoes.solucoes--scroll .carrossel-solucoes__viewport { overflow: hidden; overflow: clip; } #solucoes.solucoes--scroll .carrossel-solucoes__viewport:focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 3px; border-radius: 20px; } #solucoes.solucoes--scroll .grade-solucoes { display: flex; width: 100%; overflow: visible; scroll-snap-type: none; touch-action: pan-y; } #solucoes.solucoes--scroll .card-solucao { flex: 0 0 100%; min-height: 340px; padding: 28px; } #solucoes.solucoes--scroll .card-solucao .solucao-mockup { min-height: 240px; } #solucoes.solucoes--scroll .card-solucao h3 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); } #solucoes.solucoes--scroll .card-solucao p { font-size: .925rem; line-height: 1.65; } #solucoes.solucoes--scroll .carrossel-solucoes__controles { margin-top: 8px; } #solucoes.solucoes--scroll .carrossel-solucoes__pular { display: inline-block; flex: none; color: var(--texto-2); font-size: .8rem; text-underline-offset: 4px; } #solucoes.solucoes--scroll .carrossel-solucoes__pular:hover { color: var(--cor-amarelo); } @media (max-width: 760px) { #solucoes.solucoes--scroll { padding-block: 12px; } #solucoes.solucoes--scroll .solucoes__topo { gap: 8px; margin-bottom: 12px; } #solucoes.solucoes--scroll .titulo-secao { font-size: 1.4rem; } #solucoes.solucoes--scroll .solucoes__intro { font-size: .8rem; line-height: 1.5; } #solucoes.solucoes--scroll .card-solucao { padding: 18px; gap: 12px; } #solucoes.solucoes--scroll .card-solucao .solucao-mockup { height: 120px; min-height: 120px; } #solucoes.solucoes--scroll .card-solucao__icone { width: 32px; height: 32px; padding: 7px; } #solucoes.solucoes--scroll .card-solucao h3 { font-size: 1.4rem; } #solucoes.solucoes--scroll .card-solucao p { font-size: .85rem; } #solucoes.solucoes--scroll .carrossel-solucoes__progresso { display: none; } #solucoes.solucoes--scroll .carrossel-solucoes__pular { margin-left: auto; font-size: .75rem; } #solucoes.solucoes--scroll .carrossel-solucoes__seta { width: 40px; height: 40px; } } /* ===== estilo: jornada-scroll-restaurada-design ===== */ /* Jornada original: quatro etapas no scroll, com os dados atuais. */ #jornadaScroll.jornada--scroll { height: 460vh; height: 460svh; padding: 0; } #jornadaScroll.jornada--scroll .jornada-scroll__fixo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; overflow: clip; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { height: 100%; min-height: 0; padding-top: 100px; padding-bottom: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 12px 64px; } #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { grid-column: 1 / -1; margin-bottom: 10px; } #jornadaScroll.jornada--scroll .simbolo--jornada { grid-column: 1; grid-row: 2; max-width: min(360px, 44svh); } #jornadaScroll.jornada--scroll .etapas-scroll { grid-column: 2; grid-row: 2; display: grid; gap: 0; min-width: 0; } #jornadaScroll.jornada--scroll .etapa-scroll { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(32px); transition: opacity 600ms var(--suave), transform 800ms var(--suave), visibility 600ms; } #jornadaScroll.jornada--scroll .etapa-scroll.passada { transform: translateY(-32px); } #jornadaScroll.jornada--scroll .etapa-scroll.atual { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } #jornadaScroll.jornada--scroll .simbolo--jornada .simbolo__traco { opacity: .1; filter: grayscale(1) brightness(1.6); } #jornadaScroll.jornada--scroll .simbolo--jornada .simbolo__traco.aceso { opacity: .45; filter: none; } #jornadaScroll.jornada--scroll .simbolo--jornada .simbolo__traco.atual { opacity: 1; filter: none; --e: 1.03; } #jornadaScroll.jornada--scroll .indicador-etapas { display: flex; grid-column: 1 / -1; grid-row: 3; align-self: end; } @media (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { padding-top: 88px; padding-bottom: 16px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 8px; } #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { margin-bottom: 10px; } #jornadaScroll.jornada--scroll .titulo-secao { font-size: clamp(1.3rem, 4.5vw, 2rem); line-height: 1.2; } #jornadaScroll.jornada--scroll .rotulo-secao { margin-bottom: 8px; } #jornadaScroll.jornada--scroll .simbolo--jornada { grid-column: 1; grid-row: 2; max-width: min(140px, 16svh); } #jornadaScroll.jornada--scroll .etapas-scroll { grid-column: 1; grid-row: 3; align-self: center; } #jornadaScroll.jornada--scroll .etapa-scroll h3 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 8px 0 10px; } #jornadaScroll.jornada--scroll .etapa-scroll p { max-width: none; font-size: .9rem; line-height: 1.5; } #jornadaScroll.jornada--scroll .tags { gap: 5px; margin-top: 12px; } #jornadaScroll.jornada--scroll .tags li { font-size: .75rem; padding: 4px 8px; } #jornadaScroll.jornada--scroll .indicador-etapas { grid-row: 4; } } @media (max-height: 540px) and (min-width: 600px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { padding-top: 78px; padding-bottom: 12px; gap: 8px 24px; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); } #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { margin-bottom: 10px; } #jornadaScroll.jornada--scroll .titulo-secao { font-size: 1.35rem; } #jornadaScroll.jornada--scroll .rotulo-secao { font-size: .75rem; margin-bottom: 4px; } #jornadaScroll.jornada--scroll .simbolo--jornada { grid-column: 1; grid-row: 2; max-width: min(150px, 35svh); } #jornadaScroll.jornada--scroll .etapas-scroll { grid-column: 2; grid-row: 2; } #jornadaScroll.jornada--scroll .etapa-scroll h3 { font-size: 1.5rem; margin: 4px 0 6px; } #jornadaScroll.jornada--scroll .etapa-scroll p { font-size: .8rem; line-height: 1.4; } #jornadaScroll.jornada--scroll .tags { margin-top: 8px; gap: 4px; } #jornadaScroll.jornada--scroll .tags li { font-size: .75rem; padding: 3px 6px; } #jornadaScroll.jornada--scroll .indicador-etapas { grid-row: 3; } } /* Um único gradiente percorre as duas linhas, como no título do topo. */ #cta-banda-titulo .cta-banda__titulo-gradiente { display: inline-block; } @media (prefers-reduced-motion: reduce) { #jornadaScroll.jornada--scroll .etapa-scroll, #jornadaScroll.jornada--scroll .simbolo__traco, #jornadaScroll.jornada--scroll .indicador-etapas span { transition: none; } } /* ===== estilo: solucoes-quatro-cards-design ===== */ /* Quatro soluções completas; dois cards no tablet e um no celular. */ #solucoes .grade-solucoes { --solucoes-visiveis: 4; --solucoes-gap: 20px; --solucoes-largura: calc((100% - 60px) / 4); grid-auto-columns: var(--solucoes-largura); gap: var(--solucoes-gap); padding: 12px 0 24px; scroll-padding-inline: 0; } #solucoes.solucoes--scroll .card-solucao { flex: 0 0 var(--solucoes-largura); } #solucoes .card-solucao, #solucoes.solucoes--scroll .card-solucao { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; min-height: 0; gap: 12px; padding: 20px; scroll-snap-align: start; } #solucoes .card-solucao__topo { grid-column: 1; grid-row: 1; margin: 0; } #solucoes .card-solucao__icone { width: 32px; height: 32px; padding: 7px; } #solucoes .card-solucao__etapa { font-size: .75rem; } #solucoes .card-solucao .solucao-mockup, #solucoes.solucoes--scroll .card-solucao .solucao-mockup { grid-column: 1; grid-row: 2; height: 110px; min-height: 110px; padding: 10px; } #solucoes .solucao-mockup svg { width: auto; max-width: 100%; height: 100%; } #solucoes .card-solucao h3, #solucoes.solucoes--scroll .card-solucao h3 { grid-column: 1; grid-row: 3; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; } #solucoes .card-solucao p, #solucoes.solucoes--scroll .card-solucao p { grid-column: 1; grid-row: 4; font-size: .875rem; line-height: 1.65; color: var(--texto); } #solucoes .card-solucao__link { grid-column: 1; grid-row: 5; font-size: .75rem; margin: 4px 0 0; } #solucoes .carrossel-solucoes[data-featured-ready] .card-solucao { opacity: 1; transform: none; } #solucoes .carrossel-solucoes__total { min-width: 112px; font-size: .9rem; } #solucoes.solucoes--scroll .titulo-secao { font-size: clamp(1.35rem, 2vw, 1.75rem); } @media (max-width: 960px) { #solucoes .grade-solucoes { --solucoes-visiveis: 2; --solucoes-gap: 16px; --solucoes-largura: calc((100% - 16px) / 2); } } @media (max-width: 640px) { #solucoes .grade-solucoes { --solucoes-visiveis: 1; --solucoes-gap: 12px; --solucoes-largura: 100%; } #solucoes .card-solucao, #solucoes.solucoes--scroll .card-solucao { padding: 18px; } #solucoes .card-solucao h3, #solucoes.solucoes--scroll .card-solucao h3 { font-size: 1.4rem; } #solucoes .carrossel-solucoes__controles { gap: 10px; flex-wrap: wrap; } } /* Máscara de fade lateral removida do carrossel. */ /* ===== estilo: topo-entrada-barra-lateral-design ===== */ /* Indicador flutuante, curto e afastado da lateral. */ .progresso-pagina { inset: 50% auto auto max(12px, env(safe-area-inset-left, 0px)); transform: translateY(-50%); width: 8px; height: clamp(120px, 26vh, 210px); padding: 2px; overflow: hidden; border: 1px solid rgba(181, 122, 196, .28); border-radius: 999px; background: rgba(34, 25, 44, .8); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); } .progresso-pagina span { transform-origin: 50% 0%; transform: scaleY(var(--progresso, 0)); background: linear-gradient(180deg, var(--cor-roxo-claro) 0%, var(--cor-vermelho) 45%, var(--cor-laranja) 72%, var(--cor-amarelo) 100%); border-radius: 999px; } #topo .inicio__opcao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } #topo .inicio__icone { width: 20px; height: 20px; flex: none; color: var(--cor-laranja-claro); } @media (max-width: 640px) { .progresso-pagina { display: none; } #topo .inicio__opcao { gap: 7px; padding-inline: 10px; } #topo .inicio__icone { width: 18px; height: 18px; } } /* ===== estilo: como-funciona-textos-esquerda-design ===== */ /* Alinhamento dos textos das quatro etapas em todas as telas. */ #como-funciona .infografico-etapas__texto, #como-funciona .infografico-etapas__texto h3, #como-funciona .infografico-etapas__texto p { text-align: left; } #como-funciona .infografico-etapas__texto p { margin-inline: 0; } #como-funciona .infografico-etapas__texto { width: 100%; max-width: 210px; justify-self: center; margin-inline: auto; } @media (max-width: 960px) { #como-funciona .infografico-etapas__texto { max-width: 260px; } } /* ===== estilo: como-funciona-entrada-design ===== */ /* A entrada dos passos é controlada separadamente das revelações genéricas. */ #como-funciona .revelar { opacity: 1; transform: none; transition: none; } /* Conectores crescem na direção do próximo passo; a seta aparece ao final. */ #como-funciona .infografico-etapas__etapa:not(:last-child)::before { transform: scaleX(var(--imm-linha, 1)); transform-origin: left center; } #como-funciona .infografico-etapas__etapa:not(:last-child)::after { opacity: var(--imm-seta, 1); transform: rotate(45deg) scale(var(--imm-seta, 1)); } #como-funciona .como-conector-entrando::before { --imm-conector-inicio-x: 0; --imm-conector-inicio-y: 1; animation: imm-conector-crescer .6s ease-in-out var(--imm-conector-atraso, 0ms) backwards; } #como-funciona .como-conector-entrando::after { animation: imm-conector-seta .25s ease-out calc(var(--imm-conector-atraso, 0ms) + 470ms) backwards; } @media (max-width: 960px) { #como-funciona .infografico-etapas__etapa:not(:last-child)::before { transform: scaleY(var(--imm-linha, 1)); transform-origin: center top; } #como-funciona .infografico-etapas__etapa:not(:last-child)::after { transform: rotate(135deg) scale(var(--imm-seta, 1)); } #como-funciona .como-conector-entrando::before { --imm-conector-inicio-x: 1; --imm-conector-inicio-y: 0; } } @keyframes imm-conector-crescer { from { transform: scale(var(--imm-conector-inicio-x, 0), var(--imm-conector-inicio-y, 1)); } to { transform: scale(1, 1); } } @keyframes imm-conector-seta { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #como-funciona .como-conector-entrando::before, #como-funciona .como-conector-entrando::after { animation: none; } } /* ===== estilo: solucoes-background-ondas-design ===== */ /* Ondas com o mesmo desenho de Como funciona, ocupando toda a seção. */ #solucoes { position: relative; isolation: isolate; } #solucoes .solucoes__fundo { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; z-index: 0; overflow: hidden; overflow: clip; background: radial-gradient(ellipse at 8% 72%, rgba(117, 60, 132, .14), transparent 60%), radial-gradient(ellipse at 94% 64%, rgba(223, 99, 17, .09), transparent 56%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); } #solucoes .solucoes__fundo canvas, #solucoes .solucoes__ondas-reserva { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .65; } #solucoes.solucoes--ondas-prontas .solucoes__ondas-reserva { display: none; } #solucoes > .solucoes__topo, #solucoes > .carrossel-solucoes { position: relative; z-index: 1; } @media (max-width: 640px) { #solucoes .solucoes__fundo canvas, #solucoes .solucoes__ondas-reserva { opacity: .45; } } @media (prefers-reduced-motion: no-preference) { #solucoes .solucoes__ondas-reserva { animation: imm-ondas-reserva 12s ease-in-out infinite alternate paused; } #solucoes.solucoes--ondas-visivel .solucoes__ondas-reserva { animation-play-state: running; } } @keyframes imm-ondas-reserva { from { transform: translate3d(-10px, -8px, 0) scale(1.03); } to { transform: translate3d(10px, 8px, 0) scale(1.03); } } /* ===== estilo: jornada-titulos-coloridos-design ===== */ /* Os títulos acompanham as quatro cores do símbolo da jornada. */ #jornadaScroll .etapa-scroll h3 { color: var(--cor); } #jornadaScroll .etapa-scroll[data-etapa="0"] h3 { color: var(--cor-roxo-claro); } /* ===== estilo: simbolo-background-fixo-design ===== */ /* Marca d'água fixa, atrás do conteúdo e sem bloquear interações. */ body { isolation: isolate; } .marca-fixa { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; overflow: clip; color: #fff; opacity: .065; clip-path: inset(var(--marca-fixa-inicio, 100vh) 0 0 0); } .marca-fixa__simbolo { position: absolute; top: 50%; left: 50%; right: auto; width: 100vw; max-width: none; height: auto; transform: translate(-50%, -50%); display: block; } .marca-fixa__simbolo path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #conteudo, .rodape { position: relative; z-index: 1; } @media (max-width: 640px) { .marca-fixa { opacity: .05; } } /* ===== estilo: planejamento-ajustes-design ===== */ /* Comunicação e estados do fluxo de planejamento de mídia. */ #topo .inicio__cta { margin-bottom: 8px; } #como-funciona .secao__acao { margin-top: 28px; } #solucoes .solucoes__topo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; } #solucoes .solucoes__topo > div:first-child { grid-column: 1 / -1; } #solucoes .solucoes__intro { grid-column: 1; } #solucoes .solucoes__acao { grid-column: 2; grid-row: 2; } #solucoes .card-solucao__topo { min-height: 32px; } #solucoes .card-solucao__link { white-space: normal; line-height: 1.45; } /* A rede continua de ponta a ponta, por trás de toda a seção. */ #solucoes .solucoes__fundo { top: 0; bottom: 0; width: 100vw; } #briefing .icone-check { display: block; width: 14px; height: 14px; flex: none; } #briefing .resumo__marca { position: relative; width: 22px; height: 22px; color: var(--texto-3); } #briefing .resumo__marca .icone-check { display: none; } #briefing .resumo__marca::after { content: attr(data-numero); width: auto; height: auto; border: 0; transform: none; font-size: .75rem; font-weight: 600; line-height: 1; } #briefing .resumo__lista li.feito .resumo__marca { color: var(--cor-dark-purple); } #briefing .resumo__lista li.feito .resumo__marca::after { content: none; } #briefing .resumo__lista li.feito .resumo__marca .icone-check { display: block; } #briefing .resumo__lista li.atual .resumo__marca { border-width: 2px; color: var(--cor-roxo-claro); } #briefing .resumo__lista li.pulado .resumo__marca { color: var(--texto-2); border-style: dashed; background: transparent; } #briefing .resumo__lista li.pulado .resumo__marca::after { content: '–'; font-size: .95rem; } #briefing .resumo__lista li.preenchido .resumo__marca { border-color: var(--cor-roxo-claro); color: var(--cor-roxo-claro); } #briefing .resumo__status { display: block; margin-top: 3px; font-size: .75rem; color: var(--texto-3); line-height: 1.4; } #briefing .resumo__lista li.atual .resumo__status { color: var(--cor-roxo-claro); } #briefing .resumo__lista li.feito .resumo__status { color: var(--cor-amarelo); } #briefing .segmentos { gap: 6px; } #briefing .segmentos i { height: 22px; border: 1px solid var(--linha-forte); background: transparent; display: grid; place-items: center; color: var(--texto-3); font-size: .75rem; font-style: normal; } #briefing .segmentos i.feito { border-color: var(--cor-roxo-claro); background: var(--cor-roxo); color: #fff; } #briefing .segmentos i.atual { border-color: var(--cor-amarelo); background: var(--cor-amarelo); color: var(--cor-dark-purple); font-weight: 700; } #briefing .segmentos i.pulado { border-style: dashed; color: var(--texto-2); background: transparent; } #briefing .segmentos i.preenchido { border-color: var(--cor-roxo-claro); color: var(--cor-roxo-claro); } #briefing .segmentos .icone-check { width: 12px; height: 12px; } #briefing .opcao__marca { width: 22px; height: 22px; color: var(--cor-dark-purple); } #briefing .opcao__marca::after { content: none; } #briefing .opcao__marca .icone-check { opacity: 0; } #briefing .opcao[aria-pressed='true'] .opcao__marca::after { content: none; border: 0; } #briefing .opcao[aria-pressed='true'] .opcao__marca .icone-check { opacity: 1; } #briefing #btnAvancar, #briefing #btnLead { white-space: normal; text-align: center; line-height: 1.35; padding-block: 10px; min-height: 48px; } #briefing .fluxo__acoes .imm-btn__texto { min-width: 0; } .rodape__grupo { gap: 10px; line-height: 1.25; } .rodape__grupo > span { font-size: .85rem; font-weight: 500; } .rodape__grupo img { display: block; object-fit: contain; flex: none; } @media (max-width: 760px) { #solucoes .solucoes__topo { grid-template-columns: minmax(0, 1fr); } #solucoes .solucoes__acao { grid-column: 1; grid-row: auto; } #briefing #btnAvancar { min-width: 0; } } /* ===== estilo: topo-fades-transparentes-design ===== */ /* A foto perde opacidade na base; texto e botões ficam em outra camada. */ #topo { background-image: none; background-color: transparent; } #topo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .12) 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .12) 84%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Fade na origem esquerda das linhas, preservando a máscara junto ao homem. */ #topo .hero__onda { z-index: 1; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .25) 4%, #000 15%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .25) 4%, #000 15%, #000 100%); } #topo .hero__inner { position: relative; z-index: 2; } /* ===== estilo: revisao-21-layout-design ===== */ /* Ajustes aprovados em 21/10. */ #como-funciona .secao__acao { display: flex; justify-content: center; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-rows: auto auto auto; align-content: start; } #jornadaScroll.jornada--scroll .indicador-etapas { align-self: start; justify-self: center; justify-content: center; width: max-content; max-width: 100%; margin: 12px auto 0; gap: 6px; } #solucoes .solucoes__topo > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; } #solucoes .solucoes__intro { grid-column: 1; grid-row: 2; } #solucoes .solucoes__acao { grid-column: 2; grid-row: 2; } #solucoes .solucoes__topo > .carrossel-solucoes__controles { grid-column: 2; grid-row: 1; align-self: end; justify-content: flex-end; gap: 16px; padding: 0; margin: 0; } #solucoes .carrossel-solucoes__pular { display: inline-block; font-size: .75rem; } #solucoes .grade-solucoes > .card-solucao { scroll-snap-align: none; } #solucoes .grade-solucoes > .card-solucao[data-bloco-inicio] { scroll-snap-align: start; scroll-snap-stop: always; } #solucoes.solucoes--scroll .grade-solucoes { will-change: transform, opacity; } /* Brilho que percorre os contornos da marca de fundo. */ .marca-fixa__simbolo .marca-fixa__fluxo { stroke-width: 2.6; stroke-dasharray: 14 86; animation: imm-contorno-21 16s linear infinite paused; animation-delay: calc(var(--traco-i, 0) * -4s); } .marca-fixa.simbolo--movimento .marca-fixa__fluxo { animation-play-state: running; } .faixa .faixa__trilho { animation-play-state: paused; } .faixa.faixa--movimento .faixa__trilho { animation-play-state: running; } .faixa:hover .faixa__trilho { animation-play-state: paused; } @keyframes imm-contorno-21 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } } @media (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-rows: auto auto auto auto; } #jornadaScroll.jornada--scroll .indicador-etapas { margin-top: 16px; } } @media (max-width: 760px) { #solucoes .solucoes__topo { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } #solucoes .solucoes__topo > div:first-child { grid-column: 1 / -1; grid-row: 1; } #solucoes .solucoes__intro { grid-column: 1 / -1; grid-row: 2; } #solucoes .solucoes__acao { grid-column: 1; grid-row: 3; } #solucoes .solucoes__topo > .carrossel-solucoes__controles { grid-column: 2; grid-row: 3; align-self: center; } #solucoes .carrossel-solucoes__pular:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-height: 540px) and (min-width: 600px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-rows: auto auto auto; } #jornadaScroll.jornada--scroll .indicador-etapas { margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { .marca-fixa__simbolo .marca-fixa__fluxo { display: none; animation: none; } .faixa .faixa__trilho { animation: none; } } /* ===== estilo: maker-lab-ajustes-design ===== */ /* Maker Lab: cabeçalho, perfis, espaçamentos e contornos. */ .topbar__marca { display: flex; align-items: center; gap: 18px; min-width: 0; } .topbar__marca .redes-sociais { gap: 4px; flex-wrap: nowrap; } .topbar__marca .redes-sociais a { width: 32px; height: 32px; } #topo { padding-top: max(120px, calc(var(--maker-headerh, 68px) + 32px)); } #topo .inicio__opcoes { gap: 12px; } #como-funciona .secao__acao { margin-top: 56px; } #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { margin-bottom: 32px; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { padding-top: max(100px, calc(var(--maker-headerh, 68px) + 24px)); } .marca-fixa { opacity: .16; } .marca-fixa__simbolo path:not(.marca-fixa__fluxo) { opacity: .4; } .marca-fixa__simbolo .marca-fixa__fluxo { stroke-width: 3.2; stroke-dasharray: 22 78; animation-duration: 10s; animation-delay: calc(var(--traco-i, 0) * -2s); } /* Chamada final: conteúdo acima do fundo. */ #comece-agora .cta-banda { position: relative; isolation: isolate; overflow: hidden; min-height: 360px; background-color: #150F1E; background-image: none; } #comece-agora .cta-banda::before { z-index: 3; } #comece-agora .cta-banda__texto, #comece-agora .cta-banda > .imm-btn { position: relative; z-index: 2; } #comece-agora .cta-banda .titulo-secao { color: var(--texto); text-shadow: 0 2px 18px rgba(0, 0, 0, .65); } @media (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { margin-bottom: 24px; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { padding-top: max(88px, calc(var(--maker-headerh, 68px) + 20px)); } } @media (max-width: 640px) { .topbar__inner { height: auto; min-height: 68px; padding-block: 12px; flex-wrap: wrap; gap: 10px; } .topbar__marca { gap: 8px; } .topbar__marca .redes-sociais a { width: 28px; height: 28px; } .topbar__inner > .imm-btn { margin-left: auto; } #topo { padding-top: max(100px, calc(var(--maker-headerh, 68px) + 24px)); } #como-funciona .secao__acao { margin-top: 40px; } .marca-fixa { opacity: .13; } #comece-agora .cta-banda { min-height: 380px; padding-bottom: 76px; } } @media (prefers-reduced-motion: reduce) { .marca-fixa { opacity: .09; } .marca-fixa__simbolo path:not(.marca-fixa__fluxo) { opacity: .7; } } /* Layout FlexCarousel substituído pelo carrossel de blocos. */ /* ===== estilo: reversoes-banner-carrossel-design ===== */ /* Cabeçalho com uma única marca e banner nas cores do design system. */ .topbar__inner { height: 68px; min-height: 68px; padding-block: 0; flex-wrap: nowrap; } #topo { background-color: #0E0915; background-image: linear-gradient(90deg, rgba(14, 9, 21, .97) 0%, rgba(14, 9, 21, .84) 42%, rgba(14, 9, 21, .45) 100%), linear-gradient(125deg, #753C84 0%, #D62D4D 44%, #DF6311 78%, #F2BD00 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } #topo::before { content: none; background: none; -webkit-mask-image: none; mask-image: none; } #topo .inicio__cta { margin-bottom: 8px; } /* Carrossel restaurado: nenhuma máscara de fade nas laterais. */ #solucoes .carrossel-solucoes__viewport { -webkit-mask-image: none; mask-image: none; } /* O CTA fica centralizado após o conteúdo e o indicador da jornada. */ #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-rows: auto auto auto auto; } #jornadaScroll.jornada--scroll .jornada-scroll__acao { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: center; align-self: start; margin-top: 16px; } #comece-agora .cta-banda { padding-bottom: 48px; } @media (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-rows: auto auto auto auto auto; } #jornadaScroll.jornada--scroll .jornada-scroll__acao { grid-row: 5; } } @media (max-width: 640px) { #comece-agora .cta-banda { padding-bottom: 32px; } } @media (max-height: 740px) and (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { padding-top: max(80px, calc(var(--maker-headerh, 68px) + 12px)); padding-bottom: 12px; row-gap: 6px; } #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { margin-bottom: 12px; } #jornadaScroll.jornada--scroll .rotulo-secao { margin-bottom: 4px; } #jornadaScroll.jornada--scroll .titulo-secao { font-size: 1.15rem; } #jornadaScroll.jornada--scroll .simbolo--jornada { max-width: 90px; } #jornadaScroll.jornada--scroll .etapa-scroll h3 { font-size: 1.45rem; margin: 4px 0 8px; } #jornadaScroll.jornada--scroll .etapa-scroll p { font-size: .82rem; line-height: 1.4; } #jornadaScroll.jornada--scroll .indicador-etapas { margin-top: 6px; } #jornadaScroll.jornada--scroll .jornada-scroll__acao { margin-top: 10px; } #jornadaScroll .jornada-scroll__acao .imm-btn { min-height: 44px; padding-block: 6px; font-size: .8rem; } } @media (max-height: 540px) and (min-width: 600px) { #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-rows: auto auto auto auto; } #jornadaScroll.jornada--scroll .indicador-etapas { grid-row: 3; } #jornadaScroll.jornada--scroll .jornada-scroll__acao { grid-row: 4; margin-top: 4px; } } /* ===== estilo: banner-preenchido-ctas-design ===== */ /* CTA do banner com as mesmas dimensões dos demais botões principais. */ #topo .inicio__cta { justify-self: start; width: max-content; max-width: 100%; min-height: 50px; } /* Apenas a camada do gradiente se dissolve na base do banner. */ #topo { background-image: none; background-color: var(--fundo, #0E0915); } #topo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(14, 9, 21, .97) 0%, rgba(14, 9, 21, .84) 42%, rgba(14, 9, 21, .45) 100%), linear-gradient(125deg, #753C84 0%, #D62D4D 44%, #DF6311 78%, #F2BD00 100%); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, .82) 64%, rgba(0, 0, 0, .35) 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, .82) 64%, rgba(0, 0, 0, .35) 82%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } #topo .hero__onda { -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 8%, rgba(0, 0, 0, .12) 18%, rgba(0, 0, 0, .5) 30%, #000 44%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, transparent 8%, rgba(0, 0, 0, .12) 18%, rgba(0, 0, 0, .5) 30%, #000 44%, #000 100%); } /* Mais respiro entre a jornada e o CTA, sem alterar o conteúdo das etapas. */ #jornadaScroll.jornada--scroll .jornada-scroll__acao { margin-top: 40px; } /* A ação das soluções encerra o carrossel, centralizada. */ #solucoes .solucoes__intro { grid-column: 1 / -1; } #solucoes .solucoes__acao--inferior { display: flex; justify-content: center; margin-top: 40px; } #solucoes.solucoes--scroll .solucoes__acao--inferior { margin-top: 24px; } @media (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__acao { margin-top: 32px; } } @media (max-width: 760px) { #solucoes .solucoes__topo > .carrossel-solucoes__controles { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; } #solucoes .solucoes__acao--inferior { margin-top: 32px; } #solucoes.solucoes--scroll .solucoes__acao--inferior { margin-top: 18px; } } @media (max-height: 740px) and (max-width: 960px) { #jornadaScroll.jornada--scroll .jornada-scroll__acao { margin-top: 24px; } } @media (max-height: 540px) and (min-width: 600px) { #jornadaScroll.jornada--scroll .jornada-scroll__acao { margin-top: 14px; } } /* ===== estilo: header-scroll-botoes-texto-design ===== */ /* O cabeçalho desaparece depois dos primeiros 24px e retorna no topo. */ .topbar { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 300ms var(--suave), opacity 240ms ease, visibility 0s, background-color 300ms, border-color 300ms; } .topbar.rolado { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 300ms var(--suave), opacity 240ms ease, visibility 0s 300ms; } /* Botões de texto, sem o círculo e a seta decorativa. */ .imm-btn { gap: 0; } .imm-btn:not(:has(.imm-btn__icone)) { padding-inline: 24px; } .imm-btn--sm:not(:has(.imm-btn__icone)) { padding-inline: 18px; } #solucoes .card-solucao__link { gap: 0; } #solucoes .carrossel-solucoes__seta, #solucoes.solucoes--scroll .carrossel-solucoes__seta { width: auto; min-width: 112px; height: 48px; padding-inline: 20px; border-color: var(--cor-roxo-claro); background: var(--s3); color: var(--texto); border-radius: var(--r-pill); font-family: inherit; font-size: .8rem; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .topbar, .topbar.rolado { transition: none; } } /* ===== estilo: revisao-maker-lab-22-10-design ===== */ /* Revisão aprovada em 22/10/2026. Escopo: apresentação; integração real preservada. */ /* Faixa de soluções sem linhas de separação superior e inferior. */ .faixa { border-block: 0; } /* Fade na parte superior do desenho, independente do recorte de entrada da seção. */ #marcaFixaBackground .marca-fixa__simbolo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 16%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.4) 46%, #000 66%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 16%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.4) 46%, #000 66%, #000 100%); } /* Mesmo desenho de ondas de Nossas soluções, agora no banner. */ #topo { background-color: transparent; } #topo .hero-ondas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.25) 20%, #000 58%), linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.6) 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.25) 20%, #000 58%), linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.6) 80%, transparent 100%); mask-composite: intersect; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #topo .hero-ondas canvas, #topo .hero-ondas svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; } #topo.hero--ondas-prontas .hero-ondas svg { display: none; } /* O gradiente e as ondas desaparecem sobre o mesmo fundo contínuo da página. */ #topo::after { content: none; background: none; } #topo .hero__inner { position: relative; z-index: 2; } #topo .hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px; } #topo .hero__texto { position: relative; z-index: 2; } /* Três faixas de telas retas, com fade apenas no topo e na base. */ .hero-mural { position: relative; justify-self: center; width: 100%; max-width: 560px; margin-inline: auto; height: clamp(380px, 58svh, 560px); overflow: hidden; isolation: isolate; background: transparent; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 5%, #000 12%, #000 88%, rgba(0,0,0,.5) 95%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 5%, #000 12%, #000 88%, rgba(0,0,0,.5) 95%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .hero-mural__container, .hero-mural__grade, .hero-mural__coluna, .hero-mural__trilho, .hero-mural__lista { background: transparent; } .hero-mural__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transform: none; height: 100%; } .hero-mural__coluna { min-width: 0; } .hero-mural__trilho { display: flex; flex-direction: column; width: 100%; will-change: transform; } .hero-mural__lista { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; flex: none; } /* Vidro em cada peça: fundo do conjunto permanece transparente. */ .hero-mural__tela { display: block; width: 100%; height: auto; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 46%, rgba(181,122,196,.075) 100%); border: 1px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.32); -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.14); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-mural__tela { background-color: rgba(34,25,44,.28); } } .hero-mural:not(.hero-mural--gsap) .hero-mural__trilho { animation: imm-mural-coluna var(--mural-duracao, 36s) linear infinite paused; } .hero-mural:not(.hero-mural--gsap).hero-mural--movimento .hero-mural__trilho { animation-play-state: running; } .hero-mural:not(.hero-mural--gsap) .hero-mural__coluna:nth-child(2) .hero-mural__trilho { animation-direction: reverse; } @keyframes imm-mural-coluna { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* O símbolo da jornada mantém as cores cheias em todas as etapas. */ #jornadaScroll #simboloJornada .simbolo__traco, #jornadaScroll.jornada--scroll #simboloJornada .simbolo__traco { opacity: 1; filter: none; } #jornadaScroll #simboloJornada .simbolo__traco.atual { --e: 1.04; } /* Cards informativos, sem link individual nem indicação visual de clique. */ #solucoes .card-solucao { cursor: default; border-top: 2px solid var(--card-accent); } #solucoes .card-solucao:hover { background: var(--s1); border-color: var(--linha); border-top-color: var(--card-accent); } #solucoes .card-solucao .solucao-mockup svg { color: var(--card-accent); } #solucoes .card-solucao h3 { color: var(--card-accent); } #solucoes .card-solucao, #solucoes.solucoes--scroll .card-solucao { grid-template-rows: auto auto auto 1fr; } /* Navegação após os cards, centralizada em todas as larguras. */ #solucoes .carrossel-solucoes__controles--inferiores, #solucoes.solucoes--scroll .carrossel-solucoes__controles--inferiores { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; width: 100%; margin: 24px auto 0; padding: 0; } #solucoes .carrossel-solucoes__controles--inferiores[hidden] { display: none; } #solucoes .carrossel-solucoes__controles--inferiores .carrossel-solucoes__pular, #solucoes .carrossel-solucoes__controles--inferiores .carrossel-solucoes__pular:not(:focus-visible) { position: static; display: inline-block; width: auto; height: auto; min-height: 44px; min-width: 44px; margin: 0; padding: 10px 18px; border: 1px solid var(--linha-forte); border-radius: var(--r-pill); background: var(--s1); color: var(--texto); text-decoration: none; font-size: .875rem; line-height: 24px; overflow: visible; clip-path: none; white-space: nowrap; } #solucoes .carrossel-solucoes__controles--inferiores .carrossel-solucoes__setas { justify-content: center; } #solucoes .carrossel-solucoes__controles--inferiores + .solucoes__acao--inferior { margin-top: 24px; } /* Resultado: briefing legível, leitura, mix, mensuração e próximo passo. */ /* Marca branca decorativa no box do formulário, atrás dos campos e botões. */ #briefing #fluxo > .fluxo__marca { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none; } #briefing #fluxo .fluxo__marca-svg { position: absolute; right: 2%; bottom: 2%; display: block; width: min(76%, 520px); height: auto; color: #fff; opacity: .06; } #briefing #fluxo > :not(.fluxo__marca) { position: relative; z-index: 2; } @media (max-width: 640px) { #briefing #fluxo .fluxo__marca-svg { width: 90%; right: 0; bottom: 3%; opacity: .045; } } #resultado { scroll-margin-top: 32px; } #resultado .resultado__cabecalho { justify-content: space-between; margin-bottom: 20px; } #resultado .resultado__cabecalho .rotulo-secao { margin: 0; color: var(--cor-roxo-claro); } #resultado .resultado__titulo { font-size: clamp(2rem, 4.6vw, 3.8rem); max-width: 22ch; line-height: 1.08; margin-bottom: 18px; } #resultado .resultado__introducao { max-width: 68ch; color: var(--texto-2); margin-bottom: 32px; } #resultado .resultado__resumo { margin-bottom: 28px; background: rgba(27,20,38,.85); } #resultado .resultado__resumo h3 { margin-bottom: 24px; } #resultado .resultado__briefing { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 28px; margin: 0; } #resultado .resultado__briefing > div { min-width: 0; } #resultado .resultado__briefing dt { font-size: .75rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; } #resultado .resultado__briefing dd { font-size: .9rem; color: var(--texto); overflow-wrap: anywhere; line-height: 1.6; } #resultado .resultado__briefing .resultado__campo--longo { grid-column: span 2; } #resultado .bento-resultado { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; } #resultado .card { min-width: 0; border-color: var(--linha-forte); } #resultado .leitura { border-top: 2px solid var(--cor-roxo-claro); padding: 32px; } #resultado .leitura p { font-size: 1.1rem; line-height: 1.8; } #resultado .mapa { border-top: 2px solid var(--cor-amarelo); padding: 32px; } #resultado .rotulo { color: var(--texto-2); line-height: 1.6; } .resultado__numero { display: block; color: var(--cor-roxo-claro); font-size: .75rem; letter-spacing: .15em; margin-bottom: 8px; } #resultado .jornada-card { padding: 0; background: transparent; border: 0; } #resultado .resultado__bloco-titulo { font-size: clamp(1.4rem,2.7vw,2rem); font-weight: 600; margin-bottom: 24px; } #resultado .jornada { display: grid; gap: 20px; } #resultado .etapa { border: 1px solid var(--linha-forte); border-top: 2px solid var(--cor); border-radius: 20px; background: rgba(21,15,30,.92); padding: 28px; gap: 24px; grid-template-columns: minmax(160px,.32fr) minmax(0,1fr); } #resultado .etapa__info { border: 0; padding-left: 0; gap: 10px; } #resultado .etapa__nome { color: var(--cor); } #resultado .etapa__descricao { color: var(--texto-2); line-height: 1.7; } #resultado .etapa__solucoes { grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 16px; } #resultado .solucao { background: var(--s2); padding: 24px; gap: 12px; } #resultado .solucao h4 { font-size: 1.12rem; } #resultado .solucao p { line-height: 1.7; } #resultado .solucao__disponibilidade { color: var(--texto-3); font-size: .75rem; } #resultado .solucao__detalhes { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha-forte); } #resultado .solucao__detalhes summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--cor); padding-block: 6px; } #resultado .solucao__detalhes p, #resultado .solucao__detalhes li { font-size: .83rem; line-height: 1.7; margin-top: 10px; } #resultado .solucao__detalhes ul { padding-left: 18px; color: var(--texto-2); } #resultado #detalhesV6 { grid-column: 1 / -1; padding: 32px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; border-top: 2px solid var(--cor-vermelho); } #resultado #detalhesV6.hidden { display: none; } #resultado #detalhesV6 > h3, #resultado #detalhesV6 > .resultado-v6__fonte { grid-column: 1 / -1; margin: 0; } #resultado .resultado-v6__bloco { margin: 0; padding: 0; min-width: 0; } #resultado .resultado-v6__bloco h4 { color: var(--texto); font-size: 1rem; margin-bottom: 12px; } #resultado .resultado-v6__bloco ul { padding-left: 18px; } #resultado .resultado-v6__bloco li { color: var(--texto-2); font-size: .9rem; line-height: 1.75; margin-bottom: 8px; overflow-wrap: anywhere; } #resultado .resultado-v6__fonte { color: var(--texto-3); font-size: .75rem; line-height: 1.7; } #resultado .lacunas { padding: 32px; border-top: 2px solid var(--cor-amarelo); } #resultado .lacunas__lista li { line-height: 1.75; } #resultado .cta-final { border: 1px solid var(--linha-forte); background: linear-gradient(120deg,rgba(117,60,132,.16),rgba(223,99,17,.12)); padding: 36px; } #resultado .cta-final .resultado__numero { color: var(--cor-laranja-claro); } #resultado .cta-final p { line-height: 1.75; } /* Vídeo original, decorativo e sem áudio. O poster é a alternativa estática. */ #comece-agora .cta-banda { background: #0E0915; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px; } #comece-agora .cta-banda__texto { grid-column: 1; grid-row: 1; } #comece-agora .cta-banda__texto .imm-btn { margin-top: 28px; } #comece-agora { padding-top: 40px; padding-bottom: 40px; } #comece-agora .cta-banda > .cta-solucoes__midia { position: relative; inset: auto; z-index: 1; grid-column: 2; grid-row: 1; width: 100%; min-width: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; opacity: 1; -webkit-mask-image: none; mask-image: none; pointer-events: auto; } .cta-solucoes__poster, .cta-solucoes__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .cta-solucoes__video { opacity: 0; transition: opacity .5s ease; } .cta-solucoes__video--pronto { opacity: 1; } #comece-agora .cta-banda > .cta-banda__texto, #comece-agora .cta-banda > .imm-btn { position: relative; z-index: 2; } .cta-solucoes__pausar { position: absolute; right: 12px; bottom: 12px; z-index: 3; min-height: 44px; border: 1px solid var(--linha-forte); background: rgba(14,9,21,.85); color: var(--texto-2); border-radius: 24px; padding: 8px 14px; font-family: inherit; font-size: .75rem; font-weight: 500; line-height: 1.5; cursor: pointer; } .hero-mural__pausar { position: absolute; right: 0; bottom: 0; z-index: 3; min-height: 44px; padding: 10px 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-pill); background: var(--s1); color: var(--texto); font: inherit; font-size: .875rem; cursor: pointer; } .hero-mural__container { position: relative; min-width: 0; } @media (max-width: 960px) { #topo .hero__inner { grid-template-columns: minmax(0,1fr); gap: 32px; } .hero-mural__container { order: 0; width: 100%; max-width: 620px; justify-self: center; } .hero-mural { width: 90%; height: 360px; max-width: none; } .hero-mural__grade { gap: 12px; transform: none; } #resultado .resultado__briefing { grid-template-columns: repeat(2,minmax(0,1fr)); } #resultado .etapa { grid-template-columns: minmax(0,1fr); } } @media (max-width: 640px) { #topo { padding-bottom: 48px; } .hero-mural { height: 290px; } .hero-mural__grade { gap: 9px; width: 100%; margin-left: 0; } #resultado .bento-resultado { grid-template-columns: minmax(0,1fr); gap: 18px; } #resultado .resultado__briefing { grid-template-columns: minmax(0,1fr); gap: 18px; } #resultado .resultado__briefing .resultado__campo--longo { grid-column: auto; } #resultado .leitura, #resultado .mapa, #resultado .lacunas, #resultado #detalhesV6, #resultado .cta-final { padding: 24px; } #resultado #detalhesV6 { grid-template-columns: minmax(0,1fr); } #resultado .etapa { padding: 22px; } #resultado .lacunas { grid-template-columns: minmax(0,1fr); } #resultado .lacunas__lista { grid-template-columns: minmax(0,1fr); } #resultado .lacunas__mais { grid-column: 1; } #comece-agora .cta-banda { min-height: 0; padding: 24px; grid-template-columns: minmax(0, 1fr); gap: 24px; } #comece-agora .cta-banda > .cta-solucoes__midia { grid-column: 1; grid-row: 1; } #comece-agora .cta-banda__texto { grid-column: 1; grid-row: 2; } .cta-solucoes__midia { opacity: 1; } .cta-solucoes__video, .cta-solucoes__poster { object-position: center; } .imm-btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 12px; } } @media (prefers-reduced-motion: reduce) { .hero-mural__trilho, .hero-mural:not(.hero-mural--gsap) .hero-mural__trilho { animation: none; will-change: auto; } .hero-mural__pausar, .cta-solucoes__pausar { display: none; } .cta-solucoes__video { display: none; transition: none; } } /* ===== estilo: nielsen-design ===== */ /* Heurísticas de Nielsen: hierarquia, ajuda, foco, prevenção e recuperação de erros. */ #briefing .nielsen-ajuda { margin: 20px 0 28px; max-width: 78ch; color: var(--texto-2); } #briefing .nielsen-ajuda summary, #briefing .nielsen-resposta-completa summary { cursor: pointer; min-height: 44px; padding-block: 10px; color: var(--texto); font-size: .85rem; font-weight: 600; } #briefing .nielsen-ajuda ol { padding-left: 20px; display: grid; gap: 10px; font-size: .88rem; } #briefing .nielsen-ajuda p { margin-top: 12px; font-size: .85rem; } #briefing .nielsen-obrigatorio { color: var(--texto-2); font-size: .8rem; margin: 8px 0 20px; } #briefing .resumo__status, #briefing .campo__ajuda, #briefing .dica-teclado, #briefing .pergunta__ajuda { color: var(--texto-2); } #briefing .nielsen-editar, #resultado .nielsen-editar { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linha-forte); border-radius: 12px; background: transparent; color: var(--texto); font: inherit; font-size: .8rem; cursor: pointer; } #briefing .nielsen-editar:hover, #resultado .nielsen-editar:hover { border-color: var(--cor-roxo-claro); background: rgba(181,122,196,.08); } #briefing .resumo__item > .nielsen-editar { align-self: flex-start; margin-top: 8px; } #briefing .resumo__resposta { white-space: normal; overflow-wrap: anywhere; } #briefing .nielsen-resposta-completa { min-width: 0; } #briefing .nielsen-resposta-completa p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; color: var(--texto-2); } #briefing .nielsen-erro-campo, #briefing .erro { color: #FF9CB4; font-size: .85rem; line-height: 1.6; } #briefing .nielsen-erro-campo { margin: 6px 0 14px; grid-column: 1 / -1; } #briefing [aria-invalid="true"] { border-color: #FF9CB4; outline: 1px solid #FF9CB4; outline-offset: 2px; border-radius: 10px; } #briefing .opcoes[aria-invalid="true"] { padding: 6px; } #briefing .nielsen-revisao { display: flex; flex-direction: column; flex: 1; gap: 18px; } #briefing .nielsen-revisao > p { color: var(--texto-2); font-size: .9rem; } #briefing .nielsen-revisao__lista { list-style: none; display: grid; gap: 0; } #briefing .nielsen-revisao__lista li { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linha); } #briefing .nielsen-revisao__lista li > div { min-width: 0; } #briefing .nielsen-revisao__lista strong { display: block; font-size: .8rem; color: var(--texto-2); font-weight: 500; margin-bottom: 6px; } #briefing .nielsen-revisao__lista p { font-size: .95rem; color: var(--texto); overflow-wrap: anywhere; white-space: pre-wrap; } #briefing .nielsen-revisao__lista button { flex: none; } #briefing .nielsen-revisao__pendente p { color: var(--cor-amarelo); } #briefing .nielsen-envio-incerto { padding: 14px 16px; border-left: 3px solid var(--cor-amarelo); color: var(--texto-2); font-size: .85rem; line-height: 1.7; } #briefing .nielsen-envio-ajuda { font-size: .85rem; line-height: 1.7; font-weight: 400; text-align: center; max-width: 50ch; } #briefing .nielsen-erro-acoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: .85rem; } #briefing .nielsen-erro-acoes a { text-underline-offset: 4px; } #briefing .nielsen-lead-aviso { margin-bottom: 16px; font-size: .85rem; color: var(--texto-2); } #briefing .nielsen-conclusao { display: grid; align-content: center; justify-items: start; gap: 20px; flex: 1; padding-block: 32px; } #briefing .nielsen-conclusao > p { color: var(--texto-2); max-width: 54ch; line-height: 1.8; } #briefing .nielsen-conclusao__acoes { display: flex; flex-wrap: wrap; gap: 12px; } #briefing .nielsen-resumo-revisavel > summary { cursor: pointer; min-height: 44px; padding-block: 8px; font-size: .85rem; font-weight: 600; color: var(--texto); } #resultado .nielsen-resultado-anterior { border-left: 3px solid var(--cor-amarelo); padding: 16px 20px; margin: 0 0 24px; background: rgba(242,189,0,.06); color: var(--texto-2); font-size: .9rem; line-height: 1.7; } #resultado .nielsen-resultado-acoes { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 24px; } #resultado .nielsen-termos { color: var(--texto-2); font-size: .85rem; line-height: 1.7; margin: 0 0 24px; max-width: 70ch; } #briefing button:disabled { cursor: not-allowed; } @media (max-width: 960px) { #briefing .resumo { display: flex; } } @media (max-width: 640px) { #briefing .nielsen-revisao__lista li { gap: 12px; } #briefing .nielsen-revisao__lista .nielsen-editar { padding-inline: 10px; } #briefing .fluxo__acoes { gap: 12px; } #resultado .nielsen-resultado-acoes .imm-btn { width: 100%; } } /* ===== estilo: viewport-fluido-design ===== */ /* Layout fluido: viewport completo, sem limitar o conteúdo a 1.200 px. */ :root { --espaco-lateral: clamp(20px, 3.2vw, 88px); --espaco-grade: clamp(16px, 2.4vw, 48px); } *, *::before, *::after { box-sizing: border-box; } html { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } body { width: 100%; min-width: 0; min-height: 100%; min-height: 100vh; margin: 0; padding: 0; overflow-x: hidden; } @supports (min-height: 100dvh) { body { min-height: 100dvh; } } @supports (overflow: clip) { html, body { overflow-x: clip; } } main, header, footer { min-width: 0; } main { width: 100%; } .container { width: 100%; max-width: none; min-width: 0; margin-inline: 0; padding-left: max(var(--espaco-lateral), env(safe-area-inset-left, 0px)); padding-right: max(var(--espaco-lateral), env(safe-area-inset-right, 0px)); } #conteudo > section, .faixa, .rodape { min-width: 0; max-width: 100%; } fieldset { min-inline-size: 0; max-inline-size: 100%; } input, textarea, select { min-width: 0; max-width: 100%; } img, video, canvas { max-width: 100%; } .card, .hero__texto, .hero-mural__container, .etapas-scroll, .briefing-bento > *, .campos-duplos > *, .nielsen-revisao__lista li > div, .bento-resultado > *, .etapa__solucoes > *, .rodape__inner > * { min-width: 0; } .campo, .consentimento, .privacidade-formulario { min-width: 0; } .campo label, .consentimento > span, .privacidade-formulario p, .hero__sub, .rodape__copyright, .card-solucao p { overflow-wrap: anywhere; } .campos-duplos { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* O banner acompanha o conteúdo; a faixa seguinte não ganha uma área vazia. */ #topo { width: 100%; height: auto; min-height: 0; padding-top: max(88px, calc(var(--maker-headerh, 68px) + clamp(24px, 5vh, 72px))); padding-bottom: 24px; } @supports (min-height: 100dvh) { #topo { min-height: 0; } } #topo .hero__inner { width: 100%; gap: var(--espaco-grade); } #topo .hero__titulo, #topo .hero__titulo .linha { min-width: 0; max-width: 100%; overflow-wrap: break-word; } #topo .hero__sub { max-width: 58ch; } .hero-mural { height: clamp(260px, 58vh, 560px); } @supports (height: 1dvh) { .hero-mural { height: clamp(260px, 58dvh, 560px); } } /* Coluna lateral flexível, sem impor uma largura mínima ao formulário. */ .briefing-bento { grid-template-columns: clamp(240px, 22vw, 360px) minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); } /* Largura do bloco disponível, sem o acréscimo da barra vertical de 100vw. */ #solucoes .solucoes__fundo { left: 0; right: 0; width: 100%; transform: none; } #marcaFixaBackground .marca-fixa__simbolo { width: 100%; } .aviso-privacidade { width: min(760px, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100vh - 32px); } @supports (height: 1dvh) { .aviso-privacidade { max-height: calc(100dvh - 32px); } #jornadaScroll.jornada--scroll .jornada-scroll__fixo { height: 100dvh; } } @media (max-width: 960px) { :root { --espaco-lateral: clamp(20px, 3.2vw, 32px); } .briefing-bento { grid-template-columns: minmax(0, 1fr); } #topo .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero-mural { height: clamp(260px, 45vh, 360px); } @supports (height: 1dvh) { .hero-mural { height: clamp(260px, 45dvh, 360px); } } } @media (max-width: 640px) { .campos-duplos { grid-template-columns: minmax(0, 1fr); } #topo { padding-bottom: 40px; } .hero-mural { height: clamp(300px, 52vh, 440px); width: 100%; } @supports (height: 1dvh) { .hero-mural { height: clamp(300px, 52dvh, 440px); } } .imm-btn { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } } @media (min-width: 961px) and (max-height: 650px) { #topo { padding-top: max(88px, calc(var(--maker-headerh, 68px) + 20px)); padding-bottom: 32px; } #topo .hero__titulo { font-size: clamp(2.15rem, 4vw, 3.6rem); } #topo .inicio { margin-top: 24px; } } /* Escala comum, leitura e composição responsiva, 23/10/2026. */ .secao, .secao-briefing { padding-block: var(--espaco-secao); } #briefing .resumo__resposta, #briefing .resumo__rodape p, #briefing .campo__ajuda, #briefing .pergunta__ajuda, #briefing .privacidade-formulario p, #briefing .consentimento, .rodape__copyright, .rodape__privacidade { font-size: var(--fs-leitura); } #briefing p:not(.rotulo-secao), #resultado p { font-size: var(--fs-leitura); } #briefing .resumo__status { font-size: var(--fs-rotulo); } #briefing .resumo { align-self: start; } #briefing #fluxo { align-self: start; min-height: 0; } #briefing #formBriefing, #briefing #formLead { flex: none; } #briefing .fluxo__acoes { justify-content: flex-start; margin-top: 24px; } #briefing .fluxo__acoes #btnAvancar { margin-left: 0; } #solucoes .carrossel-solucoes__posicao { color: var(--texto); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; } #solucoes .carrossel-solucoes__controles--inferiores { flex-direction: row; gap: 12px 20px; } #solucoes .carrossel-solucoes__controles--inferiores .carrossel-solucoes__setas { flex-wrap: wrap; } #solucoes .carrossel-solucoes__pular:hover { border-color: var(--cor-roxo-claro); background: var(--s3); } #solucoes.solucoes--scroll { padding-block: 32px; } #jornadaScroll.jornada--scroll .jornada-scroll__fixo { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { width: 100%; max-width: none; height: auto; min-height: 0; margin-inline: auto; padding-block: 40px; grid-template-columns: minmax(0, 1fr) minmax(240px, 420px) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; align-content: center; align-items: center; gap: 24px; } #jornadaScroll.jornada--scroll .jornada-scroll__cabeca { margin: 0 0 8px; } #jornadaScroll.jornada--scroll .simbolo--jornada { grid-column: 2; grid-row: 2 / 4; max-width: min(420px, 44svh); justify-self: center; } #jornadaScroll.jornada--scroll .etapas-scroll { display: contents; } #jornadaScroll.jornada--scroll .etapa-scroll, #jornadaScroll.jornada--scroll .etapa-scroll.passada, #jornadaScroll.jornada--scroll .etapa-scroll.atual { grid-area: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: none; min-width: 0; padding: 16px 20px; border-bottom: 2px solid var(--linha-forte); transition: border-color 400ms var(--suave), background-color 400ms var(--suave); } #jornadaScroll.jornada--scroll .etapa-scroll:nth-child(1) { grid-column: 1; grid-row: 2; text-align: right; } #jornadaScroll.jornada--scroll .etapa-scroll:nth-child(2) { grid-column: 1; grid-row: 3; text-align: right; } #jornadaScroll.jornada--scroll .etapa-scroll:nth-child(3) { grid-column: 3; grid-row: 2; } #jornadaScroll.jornada--scroll .etapa-scroll:nth-child(4) { grid-column: 3; grid-row: 3; } #jornadaScroll.jornada--scroll .etapa-scroll.atual { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 9%, transparent); } #jornadaScroll.jornada--scroll .etapa-scroll h3 { margin: 8px 0 12px; font-size: clamp(1.4rem, 2.3vw, 2.4rem); line-height: 1.15; } #jornadaScroll.jornada--scroll .etapa-scroll p { max-width: none; font-size: clamp(.875rem, 1.15vw, 1rem); line-height: 1.65; } #jornadaScroll.jornada--scroll .indicador-etapas { grid-row: 4; align-self: center; margin: 0 auto; } #jornadaScroll.jornada--scroll .jornada-scroll__acao { grid-row: 5; margin-top: 0; align-self: center; } @media (max-width: 960px) { :root { --espaco-secao: 64px; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; gap: 20px; padding-block: 32px; } #jornadaScroll.jornada--scroll .simbolo--jornada { grid-column: 1; grid-row: 2; justify-self: center; max-width: min(180px, 22svh); } #jornadaScroll.jornada--scroll .etapas-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-column: 1; grid-row: 3; justify-self: center; width: 100%; max-width: none; } #jornadaScroll.jornada--scroll .etapa-scroll:nth-child(n) { grid-area: auto; text-align: left; } #jornadaScroll.jornada--scroll .jornada-scroll__acao { grid-row: 5; } #jornadaScroll.jornada--scroll .indicador-etapas { grid-row: 4; } #comece-agora .cta-banda { grid-template-columns: minmax(0, 1fr); } #comece-agora .cta-banda > .cta-solucoes__midia { grid-column: 1; grid-row: 1; } #comece-agora .cta-banda__texto { grid-column: 1; grid-row: 2; } } @media (max-width: 640px) { :root { --espaco-secao: 40px; } #topo { padding-bottom: 16px; } #solucoes .carrossel-solucoes__posicao { width: 100%; text-align: center; } #jornadaScroll.jornada--scroll .jornada-scroll__grade { gap: 16px; padding-block: 24px; } #comece-agora .cta-banda .titulo-secao { font-size: clamp(1.6rem, 6vw, 2rem); } #comece-agora .cta-banda__texto .imm-btn { margin-top: 24px; } } /* Em janelas baixas a jornada vira uma sequência natural, sem prender conteúdo fora da tela. */ #jornadaScroll.jornada--linear { height: auto; padding-block: var(--espaco-secao); } #jornadaScroll.jornada--linear .jornada-scroll__fixo { position: static; height: auto; min-height: 0; } #jornadaScroll.jornada--linear .jornada-scroll__grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); } #jornadaScroll.jornada--linear .simbolo--jornada { grid-column: 1; grid-row: 2; justify-self: center; max-width: 220px; } #jornadaScroll.jornada--linear .etapas-scroll { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; justify-self: center; width: 100%; } #jornadaScroll.jornada--linear .etapa-scroll, #jornadaScroll.jornada--linear .etapa-scroll.passada, #jornadaScroll.jornada--linear .etapa-scroll.atual, #jornadaScroll.jornada--linear .etapa-scroll:nth-child(n) { grid-area: auto; text-align: left; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } #jornadaScroll.jornada--linear .indicador-etapas { display: none; } #jornadaScroll.jornada--linear .jornada-scroll__acao { grid-column: 1; grid-row: 5; } @media (max-width: 480px) { #jornadaScroll.jornada--scroll .etapa-scroll { padding: 12px; } #jornadaScroll.jornada--scroll .etapa-scroll h3 { font-size: 1.15rem; } } @media (prefers-reduced-motion: reduce) { #jornadaScroll.jornada--scroll .etapa-scroll { transition: none; } } /* ===== estilo: banner-secoes-22-design ===== */ /* Banner e títulos revisados em 22/10/2026. */ #topo .hero-mural__container { --maker-faixa: clamp(40px, 5vw, 76px); position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-bottom: 52px; padding-left: calc(var(--maker-faixa) + 16px); } #topo .hero-mural { position: relative; z-index: 1; } #topo .hero__texto { position: relative; z-index: 2; } .hero-mural__marca { position: absolute; top: 0; bottom: 52px; left: 0; width: var(--maker-faixa); z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); color: #fff; opacity: .1; font-size: clamp(2rem, 4vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; user-select: none; } .hero-mural__marca span { display: block; white-space: nowrap; } .hero-mural__marca span + span { margin-top: .1em; } .hero-mural__trilho { transform: translateY(var(--mural-inicio, 0%)); } .hero-mural--estatico .hero-mural__grade { opacity: 1 !important; visibility: visible !important; transform: none !important; } .hero-mural--estatico .hero-mural__trilho { animation: none !important; } .hero-mural__container--estatico .hero-mural__marca { opacity: .07 !important; visibility: visible !important; } .hero-mural__container--estatico .hero-mural__marca span { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Símbolo do formulário mais discreto; entrada continua a ler a opacidade CSS. */ #briefing #fluxo .fluxo__marca-svg { opacity: .012; } /* Etapas da jornada voltam a iluminar os quatro traços na rolagem. */ #jornadaScroll { position: relative; isolation: isolate; z-index: 1; } #jornadaScroll #simboloJornada { position: relative; isolation: isolate; z-index: 2; } #jornadaScroll #simboloJornada .simbolo__traco, #jornadaScroll.jornada--scroll #simboloJornada .simbolo__traco { opacity: .32; filter: grayscale(1) brightness(1.8); --e: 1; } #jornadaScroll #simboloJornada .simbolo__traco.aceso, #jornadaScroll.jornada--scroll #simboloJornada .simbolo__traco.aceso { opacity: .45; filter: none; } #jornadaScroll #simboloJornada .simbolo__traco.atual, #jornadaScroll.jornada--scroll #simboloJornada .simbolo__traco.atual { opacity: 1; filter: none; --e: 1.03; } /* Cabeçalhos alinhados com a tipografia das demais seções. */ #jornadaScroll .jornada-scroll__cabeca { text-align: center; width: 100%; } #jornadaScroll #jornada-titulo, #solucoes #solucoes-titulo { width: 100%; max-width: none; margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; } #como-funciona #como-titulo, #briefing #briefing-titulo { text-align: center; } #briefing p.secao-briefing__sub { text-align: center; font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.65; } @media (min-width: 961px) { #jornadaScroll #jornada-titulo { white-space: nowrap; font-size: clamp(1.7rem, 3.05vw, 2.9rem); } } #solucoes .solucoes__topo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 20px; } #solucoes .solucoes__topo > div:first-child { grid-column: 1 / -1; grid-row: 1; width: 100%; } #solucoes .solucoes__topo .solucoes__intro { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 70ch; margin: 0 auto; text-align: center; font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.65; } @media (max-width: 640px) { #briefing #fluxo .fluxo__marca-svg { opacity: .008; } .hero-mural__marca { display: none; } #topo .hero-mural__container { padding-left: 0; } .hero-mural__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-mural__coluna:nth-child(3) { display: none; } #jornadaScroll #jornada-titulo, #solucoes #solucoes-titulo { font-size: clamp(1.6rem, 5.6vw, 2rem); } #solucoes .solucoes__topo .solucoes__intro { font-size: 1rem; } } @media (max-height: 650px) { #jornadaScroll #jornada-titulo, #solucoes.solucoes--scroll #solucoes-titulo { font-size: clamp(1.4rem, 3.2vw, 2rem); } } @media (prefers-reduced-motion: reduce) { .hero-mural__grade { opacity: 1 !important; visibility: visible !important; transform: none !important; } .hero-mural__marca { opacity: .07 !important; visibility: visible !important; } .hero-mural__marca span { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* Verificação anti-robô (Turnstile): discreta, sem espaço quando ainda não carregou. */ .turnstile-caixa { display: flex; justify-content: flex-start; margin-top: 12px; } .turnstile-caixa:empty { display: none; }