/* ========================================================================== AREA 4 ENGENHARIA - STYLES | funil CONSTRUCAO FINANCIADA Base estrutural: LP da Romualdo Engenharia (mesmas dobras), via LMPR. Identidade: kit de marca da Area 4 (marca/kit) - vermelho do "4" e navy do "A", medidos no arquivo da logo. Trocar a marca = trocar o :root. Camada visual: vocabulario da LP da E3C casa-para-venda (degrade animado no CTA, destaque do titulo em degrade, varredura de brilho, glow no numero). ========================================================================== */ :root { /* Marca - do kit (marca.json), nao extrair de novo */ --color-primary: #B51312; /* o vermelho do "4": ACENTO, nunca superficie */ --color-primary-strong: #8E0F0E; /* hover/contraste */ --color-primary-soft: #FBEDED; /* tint claro */ --color-primary-light: #C4CDD4; /* aco claro do kit: texto pequeno sobre escuro. NAO e' derivado do vermelho (viraria rosa e poria uma segunda cor quente na marca). Sai do navy. */ /* Institucional / superficies (ink do kit, com o matiz do navy dentro) */ --color-ink: #111518; --color-ink-2: #1A2026; --color-ink-3: #242C32; /* o navy do "A" e do lettering */ --color-graphite: #2B3238; --color-slate: #55606A; /* Neutras */ --color-bg: #FFFFFF; --color-bg-soft: #F7F6F5; --color-bg-mute: #EDEBEA; --color-line: #E6E2E1; --color-text: #111518; --color-text-mute: #55606A; --color-on-dark: #F4F2F1; --color-on-dark-mute: #C4CDD4; /* o aco claro do kit */ /* Acento = a propria marca (nada de cor de fora) */ --color-gold: #B51312; /* Verde = pontos de conversao (form, popup, CTA fixo) */ --color-green: #1FA858; --color-green-deep: #148244; --color-green-light: #2BD46E; /* -------------------------------------------------------------------- Degrades da marca (camada E3C). A rampa e' vermelho -> navy, as DUAS cores do arquivo da logo: degrade nao pode introduzir cor de fora (playbook 13.20). O `-flow` tem os pontos espelhados porque ele e' animado por background-position e precisa fechar o ciclo sem salto. -------------------------------------------------------------------- */ --grad-cta: linear-gradient(110deg, #D6201E 0%, #B51312 48%, #242C32 100%); --grad-cta-flow: linear-gradient(110deg, #242C32 0%, #8E0F0E 20%, #B51312 40%, #D6201E 50%, #B51312 60%, #8E0F0E 80%, #242C32 100%); --grad-text: linear-gradient(120deg, #D6201E 0%, #B51312 55%, #8E0F0E 100%); --grad-rule: linear-gradient(90deg, #B51312 0%, #D6201E 50%, #242C32 100%); /* Header fixo */ --header-h: 92px; /* Tipografia - do kit. A display e' a serif do lettering (o desenho original e' Trajan-like e nao tem versao web; a Cormorant e' a mais proxima). */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Layout - radius 0 medido no traco da logo (geometria.radius_px = 0). A sonda automatica leu 38%, mas estava medindo a DIAGONAL do A. */ --container: 1200px; --container-pad: clamp(20px, 4vw, 40px); --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --cut: 18px; /* Motivos da marca, INLINE em data URI: funcionam em file://, print e PDF */ --mark-full: url('data:image/png;base64,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'); --mark-band: url('data:image/png;base64,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'); /* Sombras */ --shadow-sm: 0 4px 14px rgba(17, 21, 24, 0.06); --shadow: 0 12px 40px rgba(17, 21, 24, 0.06); --shadow-lg: 0 24px 60px rgba(17, 21, 24, 0.18); --shadow-accent: 0 16px 40px rgba(181, 19, 18, 0.30); /* Transicoes */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: .2s var(--ease); --t: .35s var(--ease); --t-slow: .6s var(--ease); } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { /* o header e o carrossel passam 1-2px da viewport em 393px; sem isto o documento ganha scroll horizontal, que o playbook proibe. CLIP, nao hidden: `overflow:hidden` num ancestral cria contexto de scroll e QUEBRA o position:sticky do hero (a casa parava de ser construida e o texto subia junto com a rolagem). `clip` corta igual e nao cria o contexto. */ overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* clip, nao hidden: hidden quebraria o sticky do hero */ } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } ul, ol { list-style: none; } /* ========================================================================== GEOMETRIA ANGULAR (13.1) — a marca da Área 4 é de CANTOS VIVOS: serif de alto contraste (Trajan-like) mais o triângulo do A. Nada de arredondado. O marcador de tamanho pequeno é o ÁPICE do A, não o monograma reduzido: o A4 inteiro tem hastes de 12px num desenho de 504px e vira borrão abaixo de ~60px. Os marcadores usam clip-path (não dependem de border-radius). Exceção: o FAB do WhatsApp continua redondo (botão de marca reconhecível). ========================================================================== */ *, *::before, *::after { border-radius: 0 !important; } /* Marcador da marca = ápice do A (o traço real, recortado do monograma) */ .hex { clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); } ::selection { background: var(--color-primary); color: var(--color-ink); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } /* ========================================================================== TIPOGRAFIA UTILITÁRIA ========================================================================== */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 18px; } .eyebrow--dark { color: var(--color-ink); } .eyebrow--light { color: var(--color-primary); } /* Tarja de destaque (alto contraste sobre a foto do hero) */ .eyebrow--badge { color: #fff; background: rgba(17, 21, 24, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 10px 18px; margin-bottom: 22px; clip-path: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); max-width: 100%; } .eyebrow--badge .eyebrow__dot { background: var(--color-primary); } @media (max-width: 600px) { .eyebrow--badge { white-space: normal; line-height: 1.5; padding: 12px 20px; clip-path: none; } } /* Marcador de TODO eyebrow = ápice do A (não uma bolinha genérica) */ .eyebrow::before { content: ""; width: 11px; height: 12px; background: var(--color-primary); clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); flex: 0 0 auto; } .eyebrow__dot { display: none; } .section-title { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); font-size: clamp(28px, 4vw, 48px); line-height: 1.14; letter-spacing: -0.01em; margin-bottom: 18px; max-width: 22ch; text-wrap: balance; } .section-title--light { color: #fff; } .section-lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--color-text-mute); max-width: 60ch; margin-bottom: 44px; } .section-lead--light { color: var(--color-on-dark-mute); } .section-lead--short { max-width: 50ch; } .accent { color: var(--color-primary); position: relative; /* nowrap só em telas grandes — em mobile pode quebrar */ } @media (min-width: 900px) { .accent { white-space: nowrap; } } /* Régua sob o acento = barra chanfrada nas pontas (traço do hexágono), não uma linha arredondada genérica. */ .hero__headline .accent::after, .section-title .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px; background: var(--color-primary); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); opacity: .85; } /* ========================================================================== BOTÕES ========================================================================== */ /* TODOS os botões têm pontas HEXAGONAIS (identidade da marca) */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; padding: 14px 26px; clip-path: none; transition: transform var(--t-fast), background var(--t), color var(--t), filter var(--t); cursor: pointer; text-align: center; white-space: nowrap; will-change: transform; } .btn svg { width: 18px; height: 18px; position: relative; z-index: 2; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px); } /* Brilho que atravessa o botão secundário (sheen) */ .btn--ghost-light::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-18deg); animation: btnShine 4.2s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes btnShine { 0% { left: -130%; } 55%, 100% { left: 140%; } } .btn--lg { padding: 18px 34px; font-size: 16px; } .btn--sm { padding: 10px 20px; font-size: 14px; } .btn--block { width: 100%; } /* ===================================================================== Botões preenchidos = corpo hexagonal (::before) + ANEL DE PULSO que expande e some (::after), igual ao ctaPulse do Militão/Moura. Como o clip-path apaga box-shadow, o anel é um pseudo hexagonal que cresce (inset negativo) por trás do corpo e desaparece. ===================================================================== */ .btn--accent, .btn--green { background: transparent; /* o corpo colorido vem do ::before */ clip-path: none; /* remove o clip do .btn base p/ o anel escapar */ overflow: visible; isolation: isolate; } .btn--accent { color: var(--color-ink); } .btn--green { color: #fff; } .btn--accent:hover, .btn--green:hover { color: #fff; } .btn--accent::before, .btn--green::before, .btn--accent::after, .btn--green::after { content: ""; position: absolute; inset: 0; clip-path: none; pointer-events: none; } /* corpo (fica na frente do anel, atrás do texto) */ .btn--accent::before { display: none; } /* o corpo agora e' o degrade do proprio elemento */ .btn--green::before { z-index: -1; background: linear-gradient(115deg, var(--color-green-light) 0%, var(--color-green) 55%, var(--color-green-deep) 100%); transition: filter var(--t); } /* ANEL que pulsa: cresce ~13px pra fora e some */ .btn--accent::after { z-index: -2; background: var(--color-primary); animation: ringPulse 1.7s ease-out infinite; } .btn--green::after { z-index: -2; background: var(--color-green-light); animation: ringPulse 1.7s ease-out infinite; } @keyframes ringPulse { 0% { inset: 0; opacity: .55; } 70% { inset: -13px; opacity: 0; } 100% { inset: -13px; opacity: 0; } } /* :hover::before saiu junto com o ::before */ .btn--green:hover::before { filter: brightness(1.08); } .btn--ghost { background: var(--color-bg-mute); color: var(--color-ink); } .btn--ghost:hover { background: var(--color-bg-mute); } /* Secundário sobre imagem = hexágono fosco translúcido */ .btn--ghost-light { background: rgba(255, 255, 255, 0.14); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.24); } .btn--compact { padding: 12px 22px; font-size: 14px; animation: none; } /* folga do texto para as pontas anguladas nos botões grandes */ .btn--lg { padding-left: 36px; padding-right: 36px; } /* ================================================================= READ PROGRESS BAR */ .read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft)); z-index: 1000; transition: width 0.1s linear; pointer-events: none; } /* ================================================================= SITE HEADER — fundo sólido da marca + faixa de nav deslizante */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--header-h); display: flex; align-items: center; /* degrade das cores da marca, correndo devagar (o dourado passa e volta) */ background: linear-gradient(115deg, #111518 0%, #1A2026 16%, #242C32 32%, #3A454E 46%, #242C32 60%, #1A2026 78%, #111518 100%); background-size: 320% 100%; animation: brandFlow 18s linear infinite; border-bottom: 1px solid rgba(255,255,255,0.08); transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease); } .site-header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary) 30%, var(--color-primary-light) 50%, var(--color-primary) 70%, transparent); opacity: 0.8; } .site-header.is-solid { background: linear-gradient(115deg, rgba(36, 44, 50,0.92) 0%, rgba(17, 21, 24,0.94) 60%, rgba(17, 21, 24,0.95) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 34px -14px rgba(0,0,0,0.7); } .site-header__inner { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; height: 100%; } .site-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; } .site-header__brand img { height: 62px; width: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); } /* faixa de nav: acompanha a rolagem, desliza até a seção atual (todas as telas) */ .site-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; -webkit-mask: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%); } .site-nav::-webkit-scrollbar { display: none; } .site-nav a[data-section] { flex: 0 0 auto; padding: 8px 17px; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.82); white-space: nowrap; clip-path: none; transition: color 0.2s var(--ease), background 0.25s var(--ease); } .site-nav a[data-section]:hover { color: #fff; background: rgba(255,255,255,0.16); } /* seção atual: chip BRANCO hexagonal (cor diferente do botão turquesa do header) */ .site-nav a[data-section].current { color: var(--color-ink); background: #fff; font-weight: 700; } .site-header__cta { flex-shrink: 0; margin-left: 4px; } @media (max-width: 900px) { :root { --header-h: 74px; } .site-header__cta { display: none; } .site-header__brand img { height: 46px; } /* SEM hambúrguer: os nomes continuam sempre visíveis, deslizando pro lado */ .site-nav { margin-left: 12px; gap: 8px; } .site-nav a[data-section] { padding: 6px 14px; font-size: 13px; color: #fff; background: rgba(255,255,255,0.12); } .site-nav a[data-section].current { background: #fff; color: var(--color-ink); } } /* ========================================================================== HERO (sem navbar — logo embutida no início do conteúdo) ========================================================================== */ .hero { position: relative; background: var(--color-ink); isolation: isolate; color: #fff; } .hero__brand { display: block; /* força quebra após a logo */ width: fit-content; /* o anchor envolve só a imagem */ margin-bottom: 32px; transition: opacity var(--t-fast); line-height: 0; } .hero__brand:hover { opacity: 0.85; } .hero__brand img { /* Proporção real após o crop (2696x1750 ≈ 1.54:1). Definimos width pelo viewport e deixamos a height seguir o aspect-ratio dos atributos width/height do . */ width: clamp(180px, 20vw, 280px); height: auto; max-width: 100%; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); display: block; } .eyebrow--light { /* Quando dentro do hero, garante alinhamento à esquerda */ align-self: flex-start; } @media (max-width: 600px) { /* No mobile a logo fica centralizada acima do conteúdo */ .hero__brand { margin-left: auto; margin-right: auto; margin-bottom: 24px; } .hero__brand img { width: clamp(180px, 50vw, 240px); } /* Botões do hero ocupam a largura toda (mais fáceis de tocar) */ .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; justify-content: center; } } /* ---- HERO SCROLL-DRIVEN: a casa sendo construida conforme o lead rola ---- O track alto e' o "tempo" da animacao (~6s de rolagem tranquila); o sticky segura a cena em tela. A casa PRONTA e' revelada de baixo para cima sobre a casa EM TRACO, e a linha de obra dourada marca a frente de servico. Sem JS o --obra fica em 0%: o lead ve a casa pronta, nunca o esqueleto. */ .hero__scroll-track { position: relative; height: 200vh; } .hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 34px) 0 84px; overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -1; } /* video de fundo com o tempo controlado pelo SCROLL (mesma mecanica da Moura): sem autoplay, sem loop, sem som. O poster e' a casa pronta. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .hero__video--desktop { display: block; } .hero__video--mobile { display: none; } @media (max-width: 760px) { .hero__video--desktop { display: none; } .hero__video--mobile { display: block; } } .hero__overlay { position: absolute; inset: 0; /* escuro à esquerda (texto) e mais leve à direita (casa aparece mais) */ background: linear-gradient(90deg, rgba(17, 21, 24, 0.96) 0%, rgba(17, 21, 24, 0.88) 38%, rgba(17, 21, 24, 0.58) 68%, rgba(17, 21, 24, 0.34) 100%), linear-gradient(180deg, rgba(17, 21, 24, 0.55) 0%, transparent 38%, rgba(17, 21, 24, 0.60) 100%); } @media (max-width: 760px) { /* Celular: escuro atrás do texto (topo) e mais leve embaixo para a casa aparecer; leve reforço no rodapé da dobra para contraste. */ .hero__overlay { background: linear-gradient(180deg, rgba(17, 21, 24, 0.88) 0%, rgba(17, 21, 24, 0.74) 34%, rgba(17, 21, 24, 0.30) 60%, rgba(17, 21, 24, 0.20) 78%, rgba(17, 21, 24, 0.55) 100%); } /* menos rolagem para erguer a casa no celular */ .hero__scroll-track { height: 175vh; } } /* o zoom infinito do fundo saiu: a animacao do hero agora e' a obra subindo */ .hero__content { position: relative; /* usa a largura do container (alinha o texto com a logo e as outras dobras) */ text-align: left; } .hero__headline { font-family: var(--font-display); font-weight: 700; /* menor que antes: em 4 linhas o H1 competia com a cena e empurrava os CTAs */ font-size: clamp(30px, 3.5vw, 46px); line-height: 1.12; letter-spacing: -0.018em; color: #fff; margin-bottom: 20px; max-width: 17ch; text-wrap: balance; /* contraste sobre a foto: a sombra segura a leitura mesmo na parte clara */ text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45); } /* no hero o acento pode quebrar naturalmente (evita linha gigante e desalinhada) */ .hero__headline .accent { color: var(--color-primary); white-space: normal; } .hero__headline .accent::after { height: 4px; bottom: -3px; } .hero__sub { /* proporcao: ~40% do H1, e nao quase do mesmo tamanho */ font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; color: var(--color-on-dark); max-width: 48ch; margin-bottom: 30px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } /* Chamada "Conheça a Área 4" — em FLUXO (nunca sobre os botões), todas as telas */ .hero__cue { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 4vh, 44px); padding-top: clamp(18px, 2.6vh, 26px); border-top: 1px solid rgba(255,255,255,0.16); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.9); } .hero__cue:hover { color: var(--color-primary); } /* Chevron dentro de um selo HEXAGONAL (borda hexagonal, não quadrada) */ .hero__cue-chevron { display: inline-grid; place-items: center; width: 32px; height: 35px; clip-path: none; background: rgba(181, 19, 18, 0.22); color: #fff; animation: cueBounce 1.8s ease-in-out infinite; } .hero__cue:hover .hero__cue-chevron { background: var(--color-primary); color: var(--color-ink); } .hero__cue-chevron svg { width: 16px; height: 16px; } @keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (max-width: 900px) { .hero { padding-bottom: 72px; } } /* ========================================================================== PROOF ========================================================================== */ .proof { background: var(--color-ink); color: #fff; padding: 36px 0; position: relative; z-index: 2; } .proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: center; } .proof__grid--3 { grid-template-columns: repeat(3, 1fr); } /* Autoridade em foco único: +15 anos bem destacado */ .proof--single { padding: clamp(40px, 6vw, 64px) 0; } .proof__solo { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap; } .proof__seal { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .proof__seal img { width: clamp(58px, 6vw, 76px); height: auto; display: block; filter: drop-shadow(0 6px 22px rgba(181, 19, 18, 0.42)); animation: sealPulse 3.6s var(--ease) infinite alternate; } @keyframes sealPulse { from { filter: drop-shadow(0 6px 18px rgba(181, 19, 18, 0.30)); } to { filter: drop-shadow(0 6px 30px rgba(181, 19, 18, 0.60)); } } @media (max-width: 640px) { .proof__seal { padding-bottom: 4px; } } .proof__solo-num { flex: 0 0 auto; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 7vw, 78px); color: var(--color-primary); line-height: 0.9; letter-spacing: -0.03em; text-shadow: 0 8px 40px rgba(181, 19, 18,0.30); } .proof__solo-num small { display: block; margin-top: 7px; font-size: 0.22em; color: var(--color-on-dark-mute); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .proof__solo-label { flex: 1 1 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px); color: var(--color-on-dark); line-height: 1.55; border-left: 3px solid var(--color-primary); padding-left: 26px; } .proof__solo-label strong { color: #fff; font-weight: 600; } /* ⚠ o grifo da prova é TEXTO PEQUENO sobre o ink. O vermelho da marca faz 2,68:1 ali e reprova (AA pede 4,5:1 em texto pequeno). Quem grifa é o peso mais a régua vermelha embaixo; a cor do texto continua branca. */ .proof__solo-label .proof__hl { color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-primary); } @media (max-width: 640px) { .proof__solo { flex-direction: column; text-align: center; gap: 18px; } .proof__solo-label { border-left: 0; border-top: 3px solid var(--color-primary); padding-left: 0; padding-top: 16px; } } .proof__num--word { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary); font-size: clamp(22px, 2.6vw, 32px); } .proof__arrow { color: var(--color-on-dark-mute); font-weight: 400; } .proof__item { text-align: center; border-left: 1px solid rgba(255,255,255,0.08); padding: 6px 14px; } .proof__item:first-child { border-left: 0; } .proof__num { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; color: var(--color-primary); line-height: 1; letter-spacing: -0.01em; } .proof__num small { font-size: 0.45em; color: var(--color-on-dark-mute); font-weight: 500; margin-left: 4px; } .proof__label { font-size: 13px; color: var(--color-on-dark-mute); margin-top: 8px; line-height: 1.4; } @media (max-width: 720px) { .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .proof__grid--3 { grid-template-columns: 1fr; } .proof__item { border-left: 0; } } /* ========================================================================== OFFER (DARK) ========================================================================== */ /* A textura desta dobra vem da classe .hex-texture no HTML, que usa o V REAL da marca em data URI. O favo hexagonal daqui era o simbolo do outro cliente. */ .offer { background: var(--color-ink); color: #fff; padding: clamp(70px, 9vw, 120px) 0; position: relative; overflow: hidden; } .offer::before { content: ""; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(181, 19, 18, 0.18) 0%, transparent 70%); pointer-events: none; } .offer::after { content: ""; position: absolute; bottom: -160px; left: -120px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(181, 19, 18, 0.08) 0%, transparent 70%); pointer-events: none; } .offer__head { max-width: 700px; margin-bottom: 50px; position: relative; } .offer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; position: relative; } .offer__card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg); padding: 40px; position: relative; transition: transform var(--t), border-color var(--t), background var(--t); } .offer__card:hover { transform: translateY(-4px); border-color: rgba(181, 19, 18, 0.4); background: rgba(181, 19, 18, 0.06); } .offer__card--featured { background: linear-gradient(160deg, rgba(181, 19, 18, 0.12), rgba(181, 19, 18, 0.02)); border-color: rgba(181, 19, 18, 0.35); } .offer__badge { display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--color-on-dark); margin-bottom: 20px; } .offer__badge--accent { background: var(--color-primary); color: var(--color-ink); } .offer__title { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); color: #fff; margin-bottom: 8px; } .offer__lead { color: var(--color-on-dark-mute); margin-bottom: 24px; font-size: 15.5px; } .offer__list { display: flex; flex-direction: column; gap: 12px; } .offer__list li { position: relative; padding-left: 28px; color: var(--color-on-dark); font-size: 15px; line-height: 1.6; } .offer__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 17px; height: 18px; clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); background: var(--color-primary); } .offer__list li::after { content: ""; position: absolute; left: 4.5px; top: 11px; width: 8px; height: 4px; border-left: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: rotate(-45deg); } .offer__list strong { color: #fff; font-weight: 600; } .offer__note { margin-top: 32px; padding-top: 24px; border-top: 1px dashed rgba(255,255,255,0.12); font-size: 13.5px; color: var(--color-on-dark-mute); text-align: center; } @media (max-width: 760px) { .offer__grid { grid-template-columns: 1fr; } .offer__card { padding: 28px; } } /* ===== Exemplos de financiamento (cards) ===== */ .financing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; position: relative; } .financing__card { display: flex; flex-direction: column; /* superficie PROPRIA, nao um branco translucido: sobre o ink da dobra o branco a 4% nao separava o card do fundo e o texto ficava boiando. */ background: var(--color-ink); border: 1px solid rgba(196, 205, 212, 0.22); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); overflow: hidden; transition: transform var(--t), border-color var(--t), background var(--t); } .financing__card:hover { border-color: rgba(196, 205, 212, 0.45); } .financing__card--featured { background: #1A2026; } .financing__card:hover { transform: translateY(-5px); border-color: rgba(181, 19, 18,0.45); background: rgba(181, 19, 18,0.06); } .financing__card--featured { border-color: rgba(181, 19, 18,0.4); background: linear-gradient(180deg, rgba(181, 19, 18,0.10), rgba(255,255,255,0.02)); } .financing__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-ink-2); } .financing__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .financing__card:hover .financing__img img { transform: scale(1.05); } .financing__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .financing__tier { display: inline-block; align-self: flex-start; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 12px; margin-bottom: 16px; background: rgba(196, 205, 212, 0.16); color: var(--color-on-dark); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } .financing__tier--accent { background: var(--color-primary); color: #fff; } .financing__type { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 14px; } .financing__type span { color: #D6201E; } .financing__specs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.10); } .financing__specs li { color: var(--color-on-dark); font-size: 14px; padding-left: 18px; position: relative; line-height: 1.5; } .financing__specs li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 10px; background: #D6201E; clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); } .financing__price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } .financing__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-on-dark-mute); } .financing__value { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #FFFFFF; } .financing__installment { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 2px; } .financing__inst-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primary-light); } .financing__inst-value { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; } .financing__inst-value small { font-size: 0.5em; font-weight: 500; color: var(--color-on-dark-mute); margin-left: 2px; } .financing__cta { text-align: center; margin-top: 40px; position: relative; } @media (max-width: 860px) { .financing__grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } } /* ========================================================================== EXPERTS / RESPONSÁVEL ========================================================================== */ .experts { padding: clamp(70px, 9vw, 120px) 0; background: var(--color-bg-soft); position: relative; } .experts__inner { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .experts__photo { /* Hexágono: chanfro no canto superior-esquerdo e inferior-direito (retângulo com 2 cantos opostos cortados = 6 lados). A borda turquesa aparece pelo padding + fundo em degradê. */ --hex-cut: 34px; position: relative; border-radius: 0; padding: 3px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); clip-path: polygon(var(--hex-cut) 0, 100% 0, 100% calc(100% - var(--hex-cut)), calc(100% - var(--hex-cut)) 100%, 0 100%, 0 var(--hex-cut)); filter: drop-shadow(0 24px 46px rgba(17, 21, 24, 0.24)); } .experts__photo img { width: 100%; height: auto; display: block; position: relative; z-index: 1; aspect-ratio: 3/4; object-fit: cover; object-position: center top; clip-path: polygon(calc(var(--hex-cut) - 3px) 0, 100% 0, 100% calc(100% - (var(--hex-cut) - 3px)), calc(100% - (var(--hex-cut) - 3px)) 100%, 0 100%, 0 calc(var(--hex-cut) - 3px)); } .experts__caption { position: absolute; left: 18px; right: 18px; bottom: 20px; z-index: 2; background: rgba(17, 21, 24, 0.88); backdrop-filter: blur(8px); color: #fff; padding: 15px 30px; border-radius: 0; /* Pontas hexagonais nas laterais (igual aos botões da marca) */ clip-path: none; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 14px; } .experts__caption strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; } .experts__caption span { color: var(--color-on-dark-mute); font-size: 13px; margin-top: 4px; } .experts__copy { max-width: 600px; } /* título da dobra ocupa a coluna toda (evita quebra em 3 linhas com "com quem" solto) */ .experts__copy .section-title { max-width: none; margin-bottom: 22px; } .experts__copy .section-title .accent { white-space: normal; } .experts__lead { font-size: 16.5px; color: var(--color-text-mute); margin-bottom: 18px; } .experts__cta { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--color-line); } .experts__points { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 32px; padding-top: 24px; border-top: 1px solid var(--color-line); } .experts__points li { display: flex; align-items: center; gap: 18px; } .experts__points-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--color-primary-strong); min-width: 60px; line-height: 1; } .experts__points-text { color: var(--color-ink); font-weight: 500; font-size: 15.5px; } @media (max-width: 860px) { .experts__inner { grid-template-columns: 1fr; } .experts__photo { max-width: 420px; margin: 0 auto; } } /* ========================================================================== GALLERY (carrossel infinito automático — “marquee”) ========================================================================== */ .gallery { padding: clamp(70px, 9vw, 120px) 0; background: var(--color-bg); overflow: hidden; position: relative; } .gallery__head { margin-bottom: 48px; } .gallery__cta { text-align: center; margin-top: 56px; } .marquee-wrap { position: relative; } /* Setas hexagonais para controlar a galeria */ .marquee__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 50px; height: 56px; display: grid; place-items: center; background: var(--color-primary); color: var(--color-ink); clip-path: none; cursor: pointer; filter: drop-shadow(0 8px 18px rgba(181, 19, 18,0.4)); transition: transform var(--t), background var(--t); } .marquee__nav:hover { background: var(--color-primary-strong); transform: translateY(-50%) scale(1.08); } .marquee__nav:active { transform: translateY(-50%) scale(0.96); } .marquee__nav svg { width: 22px; height: 22px; } .marquee__nav--prev { left: clamp(8px, 3vw, 32px); } .marquee__nav--next { right: clamp(8px, 3vw, 32px); } @media (max-width: 600px) { .marquee__nav { width: 42px; height: 48px; } .marquee__nav svg { width: 18px; height: 18px; } } .marquee { position: relative; width: 100%; overflow: hidden; /* Máscara nas bordas para fade-in/out elegante */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); padding: 8px 0; cursor: grab; /* Permite scroll vertical da página, captura swipe horizontal */ touch-action: pan-y; user-select: none; -webkit-user-select: none; } .marquee.is-dragging { cursor: grabbing; } .marquee__track { display: flex; gap: 22px; width: max-content; will-change: transform; } .marquee__item img { -webkit-user-drag: none; user-drag: none; pointer-events: none; /* impede que o browser inicie o drag-to-save da imagem */ } .marquee__item { position: relative; flex: 0 0 auto; width: clamp(260px, 32vw, 400px); height: clamp(320px, 42vw, 520px); border-radius: var(--radius); overflow: hidden; background: var(--color-bg-soft); box-shadow: 0 10px 30px rgba(17, 21, 24, 0.10); isolation: isolate; } .marquee__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .marquee__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17, 21, 24, 0.85) 100%); z-index: 1; pointer-events: none; } .marquee__item figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; font-family: var(--font-display); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; } .marquee__item figcaption::before { content: ""; width: 11px; height: 12px; clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); background: var(--color-primary); flex: 0 0 auto; } .marquee__item:hover img { transform: scale(1.06); } @media (max-width: 600px) { .marquee__track { gap: 14px; } .marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); } } /* ========================================================================== PROCESS / COMO FUNCIONA ========================================================================== */ .process { padding: clamp(70px, 9vw, 120px) 0; background: var(--color-bg-soft); position: relative; overflow: hidden; } .process::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(181, 19, 18,0.08), transparent 55%); pointer-events: none; } .process .container { position: relative; z-index: 1; } /* ===== PASSOS em grade 2×2 (visual + reveal dinâmico) ===== */ .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 920px; margin: 48px auto 0; } .step { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--color-line); padding: 30px 30px 28px; opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .step.on { opacity: 1; transform: translateY(0); } .step:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(17, 21, 24,0.11); border-color: rgba(181, 19, 18,0.45); } /* barra de acento no topo que "desenha" ao revelar */ .step::before { content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .18s; } .step.on::before { transform: scaleX(1); } /* número-fantasma gigante ao fundo */ .step__ghost { position: absolute; top: -26px; right: 4px; font-family: var(--font-display); font-weight: 700; font-size: 172px; line-height: 1; color: var(--color-primary); opacity: 0.22; pointer-events: none; user-select: none; transition: opacity .35s var(--ease), transform .5s var(--ease); } .step:hover .step__ghost { opacity: 0.32; transform: translateY(4px); } /* ícone hexagonal em degradê — "pop" ao entrar */ .step__icon { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 60px; height: 66px; margin-bottom: 14px; background: linear-gradient(150deg, var(--color-primary), var(--color-primary-strong)); color: #fff; clip-path: none; box-shadow: 0 10px 24px rgba(181, 19, 18,0.38); transform: scale(0.4) rotate(-18deg); opacity: 0; transition: transform .55s cubic-bezier(.2,1.35,.4,1) .16s, opacity .4s .16s, box-shadow .35s var(--ease); } .step__icon svg { width: 27px; height: 27px; } .step.on .step__icon { transform: scale(1) rotate(0); opacity: 1; } .step:hover .step__icon { box-shadow: 0 14px 32px rgba(181, 19, 18,0.58); transform: translateY(-3px); } .step__kicker { position: relative; z-index: 1; display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; } .step__title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 21px); color: var(--color-ink); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; } .step__text { position: relative; z-index: 1; font-size: 15px; color: var(--color-text-mute); line-height: 1.6; } @media (max-width: 620px) { .steps { grid-template-columns: 1fr; } } /* ===== TIMELINE (vitrine do processo — trilho que preenche + nós que acendem) ===== */ .timeline { position: relative; max-width: 760px; margin: 46px auto 0; } .timeline__track, .timeline__fill { position: absolute; left: 30px; width: 3px; z-index: 0; } .timeline__track { top: 34px; bottom: 34px; background: var(--color-line); } .timeline__fill { top: 34px; height: 0; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong)); box-shadow: 0 0 14px rgba(181, 19, 18,0.5); transition: height .7s var(--ease); z-index: 1; } .timeline__step { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; padding-bottom: 24px; } .timeline__step:last-child { padding-bottom: 0; } .timeline__marker { position: relative; z-index: 2; width: 60px; height: 66px; display: grid; place-items: center; clip-path: none; background: var(--color-ink); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; box-shadow: inset 0 0 0 2px rgba(181, 19, 18,0.28); transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } .timeline__step.on .timeline__marker { background: var(--color-primary-strong); color: #fff; box-shadow: inset 0 0 0 2px var(--color-primary), 0 10px 24px rgba(181, 19, 18,0.5); transform: scale(1.06); } .timeline__card { position: relative; background: #fff; border: 1px solid var(--color-line); padding: 20px 24px; box-shadow: 0 6px 20px rgba(17, 21, 24,0.05); transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } /* passo aceso ganha destaque (o texto NUNCA some, mesmo sem JS) */ .timeline__step.on .timeline__card { border-color: rgba(181, 19, 18,0.4); box-shadow: 0 14px 32px rgba(17, 21, 24,0.10); transform: translateX(3px); } /* seta (losango angular) apontando do card para o nó */ .timeline__card::before { content: ""; position: absolute; left: -8px; top: 24px; width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); transform: rotate(45deg); transition: border-color .4s var(--ease); } .timeline__step.on .timeline__card::before { border-color: rgba(181,19,18,0.35); } .timeline__card h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 22px); color: var(--color-ink); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; } .timeline__card p { font-size: 15px; color: var(--color-text-mute); line-height: 1.6; } @media (max-width: 560px) { .timeline__step { grid-template-columns: 50px 1fr; gap: 16px; } .timeline__track, .timeline__fill { left: 24px; } .timeline__marker { width: 48px; height: 54px; font-size: 18px; } .timeline__card { padding: 16px 18px; } } /* ===== Dobra "Não arrisque / empreiteiro solto" ===== ⚠ DECISÃO DE PROJETO: nesta LP o risco NÃO é vermelho. A marca da Área 4 já é vermelha (#B51312), e um segundo vermelho de risco a poucos graus de distância lê como sujeira, além de pintar o inimigo com a cor do cliente. Aqui quem diz risco é o ✗ em aço claro mais o traço que risca o texto. O vermelho da marca não entra nesta dobra. ===== */ .risk-band { position: relative; color: var(--color-text); padding: clamp(56px, 7vw, 92px) 0; background: var(--color-bg); border-top: 1px solid var(--color-line); } /* 2 colunas: frase (+CTA) à esquerda, lista de riscos à frente */ .risk-band__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .risk-band__aside .section-title--light { color: var(--color-ink); max-width: 13ch; margin-bottom: 26px; } /* .eyebrow--onred saiu junto com o comparativo morto. ⚠ Aqui mora a DECISÃO da dobra de risco. Na base, o nome do inimigo era vermelho. Nesta LP o vermelho é a MARCA, então pintar o inimigo de vermelho faz duas coisas erradas ao mesmo tempo: cria um segundo vermelho a poucos graus do da marca, e dá a cor do cliente para o vilão. A primeira tentativa foi jogar o nome no aço claro do kit. Errou: esta dobra é CLARA (fundo branco), e o aço claro faz 1,61:1 sobre o branco, ou seja, o nome do inimigo sumia. Quem diz risco aqui é o cinza-ardósia mais o traço que risca o nome, a mesma gramática dos itens riscados da lista ao lado. */ .accent-red { color: var(--color-slate); font-weight: inherit; /* line-through de verdade, e não uma barra absoluta: a barra exigia `white-space:nowrap` para saber a própria largura, e aí o nome do inimigo estourava a coluna estreita do aside. O text-decoration acompanha a quebra de linha sozinho, e a cor dele é animável. */ text-decoration: line-through; text-decoration-thickness: 2px; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: text-decoration-color .6s var(--ease) .25s, -webkit-text-decoration-color .6s var(--ease) .25s; } .risk-band__aside.is-revealed .accent-red { -webkit-text-decoration-color: var(--color-slate); text-decoration-color: var(--color-slate); } @media (prefers-reduced-motion: reduce) { .accent-red { transition: none; -webkit-text-decoration-color: var(--color-slate); text-decoration-color: var(--color-slate); } } .risk-band__list { margin: 0; display: flex; flex-direction: column; } .rb { display: flex; align-items: center; gap: 15px; padding: 15px 4px; border-bottom: 1px solid var(--color-line); } .rb:last-child { border-bottom: 0; } .rb__ic { flex: 0 0 auto; width: 26px; height: 29px; display: grid; place-items: center; background: var(--color-slate); color: #fff; clip-path: none; } .rb__ic svg { width: 13px; height: 13px; } .rb__txt { position: relative; font-size: clamp(15px, 1.5vw, 16px); line-height: 1.4; color: var(--color-text); padding-bottom: 3px; transition: color .4s var(--ease); } /* linha vermelha do "risco" SEMPRE abaixo da frase */ .rb__txt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-on-dark-mute); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .rb.is-struck .rb__txt::after { transform: scaleX(1); } .rb.is-struck .rb__txt { color: var(--color-text-mute); } .risk-band__cta { margin-top: 0; } @media (max-width: 760px) { /* Ordem no celular: título, lista de riscos e, por último, o botão. display:contents no aside faz o título e o CTA virarem itens do flex. */ .risk-band__inner { display: flex; flex-direction: column; gap: 26px; } .risk-band__aside { display: contents; } .risk-band__aside .section-title--light { max-width: none; order: 1; margin: 0; } .risk-band__list { order: 2; } .risk-band__cta { order: 3; } } /* ========================================================================== OBJECTIONS / FAQ ========================================================================== */ .objections { padding: clamp(70px, 9vw, 120px) 0; background: var(--color-bg); } .objections__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; } /* item ímpar sozinho na última linha ocupa a largura toda (evita buraco) */ .objections__grid .objection:last-child:nth-child(odd) { grid-column: 1 / -1; } .objection { background: var(--color-bg-soft); border: 1px solid transparent; border-radius: var(--radius); padding: 20px 24px; transition: background var(--t), border-color var(--t), box-shadow var(--t); } .objection[open] { background: #fff; border-color: rgba(181, 19, 18, 0.4); box-shadow: var(--shadow-sm); } .objection summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--color-ink); line-height: 1.4; } .objection summary::-webkit-details-marker { display: none; } .objection__icon { position: relative; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--color-primary-soft); border: 1px solid rgba(181, 19, 18, 0.4); transition: transform var(--t), background var(--t); } .objection__icon::before, .objection__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: var(--color-primary-strong); transform: translate(-50%, -50%); border-radius: 2px; transition: transform var(--t); } .objection__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .objection[open] .objection__icon { background: var(--color-primary); border-color: var(--color-primary); } .objection[open] .objection__icon::before { background: var(--color-ink); } .objection[open] .objection__icon::after { transform: translate(-50%, -50%) rotate(0); background: var(--color-ink); } .objection p { margin-top: 14px; color: var(--color-text-mute); font-size: 15px; line-height: 1.7; } @media (max-width: 760px) { .objections__grid { grid-template-columns: 1fr; } } /* ========================================================================== VIABILITY / FORM ========================================================================== */ .viability { padding: clamp(70px, 9vw, 120px) 0; background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%); position: relative; overflow: hidden; color: #fff; } .viability::before { content: ""; position: absolute; top: -200px; right: -200px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(181, 19, 18, 0.18) 0%, transparent 70%); pointer-events: none; } .viability__inner { display: grid; grid-template-columns: 1fr 480px; gap: clamp(40px, 6vw, 80px); align-items: start; position: relative; } .viability__copy { padding-top: 12px; } .viability__note { margin-top: 28px; font-size: 13.5px; color: var(--color-on-dark-mute); border-left: 3px solid var(--color-primary); padding-left: 14px; line-height: 1.6; } .viability__note strong { color: #fff; } /* FORM */ .form { background: #fff; color: var(--color-text); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-lg); position: relative; } .form::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; height: 6px; background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .form__title { font-family: var(--font-display); font-size: 22px; color: var(--color-ink); margin-bottom: 6px; } .form__subtitle { font-size: 14px; color: var(--color-text-mute); margin-bottom: 22px; } .form__field { margin-bottom: 14px; display: flex; flex-direction: column; } .form__field label { font-size: 13px; font-weight: 500; color: var(--color-ink); margin-bottom: 6px; } .form__field input, .form__field select { padding: 13px 14px; border: 1.5px solid var(--color-line); border-radius: 10px; font: inherit; font-size: 15px; color: var(--color-ink); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; } .form__field input::placeholder { color: #8B939A; } .form__field input:focus, .form__field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(181, 19, 18, 0.18); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form__consent { margin-top: 14px; font-size: 12.5px; color: var(--color-text-mute); line-height: 1.55; text-align: center; } .form__feedback { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; text-align: center; } .form__feedback.is-success { background: rgba(181, 19, 18, 0.12); color: var(--color-ink); border: 1px solid rgba(181, 19, 18, 0.4); } .form__feedback.is-error { background: var(--color-primary-soft); color: var(--color-primary-strong); border: 1px solid rgba(181, 19, 18, 0.30); } button[type="submit"].btn { margin-top: 6px; } @media (max-width: 960px) { .viability__inner { grid-template-columns: 1fr; } .form { padding: 28px; } } @media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } } /* ========================================================================== FORMULÁRIO 2 ETAPAS (padrão construção financiada — 13.7) ========================================================================== */ .form-head { max-width: 640px; margin: 0 auto 26px; text-align: center; } .form-head .eyebrow { justify-content: center; } .form-head .section-title { max-width: none; margin-left: auto; margin-right: auto; } .form-head .section-lead { margin-left: auto; margin-right: auto; margin-bottom: 0; } .steps-indicator { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 460px; margin: 0 auto 24px; position: relative; z-index: 1; } .step-item { display: flex; align-items: center; gap: 10px; } .step-circle { width: 34px; height: 34px; flex: 0 0 34px; clip-path: none; display: grid; place-items: center; background: rgba(255,255,255,0.14); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; transition: background var(--t), color var(--t); } .step-circle.active { background: var(--color-primary); color: var(--color-ink); } .step-circle.complete { background: var(--color-green); color: #fff; } .step-label { font-size: 13.5px; color: var(--color-on-dark-mute); font-weight: 500; } .step-item.active .step-label { color: #fff; } .step-connector { flex: 1 1 auto; height: 2px; background: rgba(255,255,255,0.16); margin: 0 14px; position: relative; overflow: hidden; } .step-connector-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-primary); transition: width .4s var(--ease); } .form-card { background: #fff; color: var(--color-text); max-width: 560px; margin: 0 auto; padding: 34px; box-shadow: var(--shadow-lg); position: relative; } .form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--color-primary); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); } .form-step { display: none; } .form-step.active { display: block; animation: formFade 0.35s var(--ease); } @keyframes formFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .form-step-title { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); margin-bottom: 18px; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-group label { font-size: 13px; font-weight: 500; color: var(--color-ink); } .form-group input, .form-group select { padding: 13px 14px; border: 1.5px solid var(--color-line); font: inherit; font-size: 15px; color: var(--color-ink); background: #fff; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .form-group input::placeholder { color: #8B939A; } .form-group input:focus, .form-group select:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(181, 19, 18,0.18); } .form-group input.error, .form-group select.error { border-color: var(--color-primary); background: var(--color-primary-soft); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-actions { display: flex; gap: 12px; margin-top: 6px; align-items: stretch; } .form-actions .btn--back { flex: 0 0 auto; } .btn--back { background: var(--color-bg-mute); color: var(--color-ink); } .btn--back:hover { background: var(--color-bg-mute); color: var(--color-ink); } .form-success { display: none; text-align: center; padding: 22px 10px; } .form-success.show { display: block; animation: formFade 0.4s var(--ease); } .form-success h3 { font-family: var(--font-display); font-size: 21px; color: var(--color-ink); margin-bottom: 8px; } .form-success p { color: var(--color-text-mute); font-size: 15px; line-height: 1.6; max-width: 44ch; margin: 0 auto; } .form-prereq { text-align: center; font-size: 13px; color: var(--color-on-dark-mute); margin: 20px auto 0; max-width: 560px; } .trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; max-width: 640px; margin: 20px auto 0; position: relative; z-index: 1; } .trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-on-dark-mute); } .trust-item svg { width: 17px; height: 17px; color: var(--color-primary); } @media (max-width: 480px) { .form-card { padding: 26px 20px; } .form-row { grid-template-columns: 1fr; } .step-label { display: none; } } /* ========================================================================== FOOTER ========================================================================== */ /* ================================================================= DIVISORIA DA MARCA — o M e a serra do V separando as dobras */ .hex-divider { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0; background: var(--color-bg); } .hex-divider--dark { background: var(--color-ink); } .hex-divider::before, .hex-divider::after { content: ""; height: 22px; width: clamp(60px, 16vw, 180px); background: var(--color-primary); opacity: .45; -webkit-mask: var(--mark-band) left center/auto 100% repeat-x; mask: var(--mark-band) left center/auto 100% repeat-x; } .hex-divider::after { transform: scaleX(-1); } .hex-divider__mark { width: 26px; height: 22px; background: var(--color-primary); -webkit-mask: var(--mark-full) center/contain no-repeat; mask: var(--mark-full) center/contain no-repeat; clip-path: none; flex: 0 0 auto; } .hex-divider__mark--sm { width: 15px; height: 13px; opacity: 0.45; } /* Estamparia do V nas dobras escuras: cobre a dobra INTEIRA (inset 0 + repeat nos dois eixos) e agora com presenca, nao no limiar do invisivel. ⚠️ Esta regra divide o ::after com .offer/.viability, que ja' usavam o pseudo para um brilho radial. A cascata resolve porque ela vem depois, mas as props do brilho sao zeradas aqui de proposito: sem isso, mexer no CSS acima faz a textura sumir de uma dobra so' e o motivo da errado. */ .hex-texture { position: relative; isolation: isolate; } .hex-texture > .container, .hex-texture > * { position: relative; z-index: 1; } .hex-texture::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; /* anula o quadrado do brilho radial */ border-radius: 0; z-index: 0; pointer-events: none; /* discreta de proposito: alem da opacidade baixa, a tinta e' o bronze escuro (nao o dourado cheio), entao o contraste contra o ink cai junto e a serra fica textura de fundo, sem disputar leitura com o titulo por cima. */ opacity: 0.055; background: #3A454E; background-image: none; -webkit-mask: var(--mark-band) left top/150px auto repeat; mask: var(--mark-band) left top/150px auto repeat; } /* no claro a mesma serra precisa de menos tinta para nao virar mancha */ .hex-texture--light::after { opacity: .04; } /* Rodapé enxuto: sem navegação e sem contato direto (o caminho é o funil) */ .site-footer { background: #111518; color: var(--color-on-dark); padding: 64px 0 40px; text-align: center; } .site-footer .container { display: flex; flex-direction: column; align-items: center; } .site-footer__logo { display: inline-block; line-height: 0; margin-bottom: 24px; } .site-footer__logo img { width: clamp(150px, 16vw, 190px); height: auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); } .site-footer__divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; } .site-footer__divider::before, .site-footer__divider::after { content: ""; height: 1px; width: 56px; background: linear-gradient(90deg, transparent, rgba(181, 19, 18,0.5)); } .site-footer__divider::after { transform: scaleX(-1); } .site-footer__tagline { color: var(--color-on-dark-mute); font-size: 14.5px; line-height: 1.65; max-width: 60ch; margin-bottom: 30px; } .site-footer__info { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin-bottom: 34px; } .site-footer__info-item { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--color-on-dark-mute); } .site-footer__info-item svg { width: 18px; height: 18px; color: var(--color-primary); flex: 0 0 18px; } .site-footer__copy { font-size: 12.5px; color: var(--color-on-dark-mute); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; width: 100%; max-width: 720px; } .site-footer__dev { font-size: 12.5px; color: var(--color-on-dark-mute); margin-top: 8px; } .site-footer__dev { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } /* Selo M² BLACK = botão chanfrado vazado (a gramática reta da Área 4) */ .dev-badge { position: relative; display: inline-flex; align-items: center; padding: 8px 18px; background: var(--color-primary); clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.10em; transition: transform var(--t-fast); } .dev-badge::before { content: ""; position: absolute; inset: 1.6px; background: #111518; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); z-index: 0; transition: background var(--t); } .dev-badge span { position: relative; z-index: 1; color: var(--color-primary); transition: color var(--t); } .dev-badge:hover { transform: translateY(-2px); } .dev-badge:hover::before { background: var(--color-primary); } .dev-badge:hover span { color: var(--color-ink); } /* ================================================================= CTA FIXO (barra full-width, todas as versões) */ .mobile-cta { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 850; display: flex; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(17, 21, 24, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.1); transform: translateY(120%); transition: transform 0.35s var(--ease); } .mobile-cta.is-visible { transform: translateY(0); } .mobile-cta .btn { width: 100%; max-width: 560px; } .mobile-cta .btn--green::after { animation: none; opacity: 0; } /* barra fixa não pulsa */ /* ================================================================= FAB WhatsApp — sempre redondo */ .wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 95; width: 58px; height: 58px; border: 0; cursor: pointer; border-radius: 50% !important; /* exceção proposital à identidade angular */ display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), bottom 0.3s var(--ease); animation: waPulse 2.6s var(--ease) infinite; } .wa-fab svg { width: 32px; height: 32px; } .wa-fab:hover { transform: scale(1.06); box-shadow: 0 18px 36px -8px rgba(37,211,102,0.75); } @keyframes waPulse { 0%, 100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6), 0 0 0 0 rgba(37,211,102,0.5); } 50% { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6), 0 0 0 12px rgba(37,211,102,0); } } .wa-fab.lifted { bottom: calc(94px + env(safe-area-inset-bottom)); } @media (max-width: 767px) { .wa-fab { width: 52px; height: 52px; } .wa-fab.lifted { bottom: calc(90px + env(safe-area-inset-bottom)); } .wa-fab svg { width: 28px; height: 28px; } } /* ================================================================= LEAD POPUP (40s) */ .lead-popup { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; } .lead-popup[hidden] { display: none; } .lead-popup__backdrop { position: absolute; inset: 0; background: rgba(17, 21, 24,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: popupFade 0.3s var(--ease); } /* O popup carrega o formulario completo em 2 passos e nao cabe em tela baixa. O overlay centraliza por grid (place-items:center): card maior que a tela transborda pros DOIS lados e o topo fica inalcancavel, sem scroll pra recuperar. 40px = os 20px de padding do overlay, dos dois lados. */ .lead-popup__card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: var(--radius-lg); padding: 40px 32px 34px; box-shadow: var(--shadow-lg); animation: popupRise 0.4s var(--ease); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; } @keyframes popupFade { from { opacity: 0; } to { opacity: 1; } } @keyframes popupRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .lead-popup__close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; color: #8B939A; cursor: pointer; transition: color 0.2s var(--ease); } .lead-popup__close:hover { color: var(--color-ink); } .lead-popup__title { font-family: var(--font-display); font-size: 24px; color: var(--color-ink); margin-bottom: 8px; line-height: 1.2; } .lead-popup__sub { font-size: 14.5px; color: var(--color-text-mute); margin-bottom: 22px; line-height: 1.6; } .lead-popup__form .btn { margin-top: 4px; } .lead-popup__success { display: none; text-align: center; padding: 10px 0; } .lead-popup__success.show { display: block; animation: popupFade 0.4s var(--ease); } .lead-popup__success h3 { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); margin-bottom: 6px; } .lead-popup__success p { color: var(--color-text-mute); font-size: 14.5px; line-height: 1.6; } .success-icon { width: 58px; height: 62px; clip-path: none; display: grid; place-items: center; margin: 0 auto 14px; background: rgba(31,168,88,0.16); color: var(--color-green); } .success-icon svg { width: 28px; height: 28px; } .error-msg { display: none; font-size: 12.5px; color: var(--color-primary); font-weight: 500; margin-top: 4px; } .error-msg.show { display: block; } .form__field input.error { border-color: var(--color-primary); background: var(--color-primary-soft); } /* ========================================================================== REVEAL ON SCROLL ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Stagger sutil para grids */ [data-reveal]:nth-child(2) { transition-delay: .06s; } [data-reveal]:nth-child(3) { transition-delay: .12s; } [data-reveal]:nth-child(4) { transition-delay: .18s; } [data-reveal]:nth-child(5) { transition-delay: .24s; } [data-reveal]:nth-child(6) { transition-delay: .30s; } /* Reveal genérico (aplicado via JS a títulos, cards, provas, form etc.) */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* Cascata nos grids (itens entram em sequência) */ .offer__grid .offer__card:nth-child(2) { transition-delay: .12s; } .proof__grid .proof__item:nth-child(2) { transition-delay: .09s; } .proof__grid .proof__item:nth-child(3) { transition-delay: .18s; } .objections__grid .objection:nth-child(2) { transition-delay: .06s; } .objections__grid .objection:nth-child(3) { transition-delay: .12s; } .objections__grid .objection:nth-child(4) { transition-delay: .18s; } /* Sheen que atravessa o card em destaque da oferta (vida na dobra) */ .offer__card--featured { overflow: hidden; } .offer__card--featured::after { content: ""; position: absolute; top: -60%; left: -40%; width: 40%; height: 220%; background: linear-gradient(100deg, transparent, rgba(181, 19, 18,0.14), transparent); transform: rotate(12deg); animation: cardSheen 5.5s ease-in-out infinite; pointer-events: none; } @keyframes cardSheen { 0% { left: -40%; } 60%, 100% { left: 130%; } } /* Microinteração: cards de objeção e provas sobem no hover */ .objection:hover { transform: translateY(-3px); } .proof__item { transition: transform var(--t); } .proof__item:hover { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal], .reveal, .timeline__card, .step { opacity: 1; transform: none; } .step__icon { opacity: 1; transform: none; } .step::before { transform: scaleX(1); } /* sem movimento: o video nao roda e fica o poster, a casa pronta */ .hero__video { display: none; } .hero__bg { background: url('../img/hero-casa.webp?v=3') center/cover no-repeat; } } /* ================================================================= HERO EM TELA BAIXA (notebook 13") — o conteudo tem que caber nos 100vh: em 1366x680 o H1 de 4 linhas empurrava os CTAs para fora da primeira dobra. Sem isso o lead rola sem ver botao nenhum. */ @media (min-width: 761px) and (max-height: 780px) { .hero__sticky { padding: calc(var(--header-h) + 22px) 0 48px; } .hero__headline { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 18px; } .hero__sub { font-size: 15px; margin-bottom: 22px; max-width: 52ch; } .hero__cue { margin-top: 16px; } .eyebrow--badge { margin-bottom: 16px; padding: 8px 15px; font-size: 12px; } } /* ================================================================= MOVIMENTO DA MARCA (pedido do Gabriel, 31/07) O degrade e' sempre da paleta do kit: dourado, dourado claro e o bronze escuro. Nada de cor de fora, nem no brilho que passa. */ @keyframes brandFlow { 0% { background-position: 0% 50%; } 100% { background-position: 320% 50%; } } @keyframes ctaPulse { 0%, 100% { transform: translateY(0); box-shadow: 0 10px 26px rgba(181, 19, 18,0.30); } 50% { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(181, 19, 18,0.55); } } @keyframes ctaPulseGreen { 0%, 100% { transform: translateY(0); box-shadow: 0 10px 26px rgba(31,168,88,0.28); } 50% { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(31,168,88,0.50); } } /* CTA da marca: degrade correndo + pulso. O brilho que atravessa e' o mesmo movimento do header, para a pagina inteira ler como um sistema. */ .btn--accent { background: var(--grad-cta-flow) !important; background-size: 280% 100% !important; color: #fff !important; animation: brandFlow 9s linear infinite, ctaPulse 2.8s var(--ease) infinite; will-change: background-position, transform; } .btn--accent:hover { animation-duration: 4.5s, 1.6s; } .btn--green { background: linear-gradient(110deg, var(--color-green-deep) 0%, var(--color-green) 30%, var(--color-green-light) 50%, var(--color-green) 70%, var(--color-green-deep) 100%) !important; background-size: 280% 100% !important; animation: brandFlow 9s linear infinite, ctaPulseGreen 2.8s var(--ease) infinite; will-change: background-position, transform; } .btn--green:hover { animation-duration: 4.5s, 1.6s; } /* Acessibilidade: quem pediu menos movimento nao recebe pulso nem degrade correndo (a cor cheia continua la', o botao nao muda de lugar). */ @media (prefers-reduced-motion: reduce) { .site-header, .btn--accent, .btn--green { animation: none !important; } .btn--accent { background: var(--color-primary) !important; } .btn--green { background: var(--color-green) !important; } } /* ========================================================================== CAMADA E3C — o vocabulário visual da LP da E3C casa-para-venda, aplicado com a paleta da Área 4. Entra DEPOIS de tudo, de propósito: sobrescreve por cascata sem tocar na base clonada (13.21.0, não editar regra da base). O que vem de lá: degradê que corre no CTA, destaque do título em degradê, varredura de brilho no hover, glow pulsando no número, e o hero com a mídia ao lado em vez do vídeo scroll-driven. A rampa dos degradês é vermelho para navy, as DUAS cores do arquivo da logo. Degradê não é licença para inventar cor (13.20). ========================================================================== */ /* ---- 1. CTA com degradê que corre + varredura de brilho ------------------ */ /* O CTA com degradê correndo já existe na BASE (brandFlow + ctaPulse), e a base põe `overflow:visible` nele de propósito para o anel de pulso escapar. Recriar aqui um segundo mecanismo com varredura de brilho jogava a varredura para FORA do botão (borrão branco na borda esquerda da tela). O que a camada E3C acrescenta ao CTA é só a rampa vermelho -> navy e o texto branco, e isso foi corrigido na própria regra da base, não aqui. */ .btn--accent { box-shadow: var(--shadow-accent); } .btn--accent:hover { box-shadow: 0 20px 52px rgba(181, 19, 18, 0.46); } /* ---- 2. Destaque do título em degradê ------------------------------------ Só na palavra-âncora. background-clip:text precisa de cor de fallback: navegador que não suporta mostra o vermelho cheio, nunca texto invisível. */ .section-title .accent, .lead-popup__title .accent { color: var(--color-primary); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* em superfície escura a rampa inverte: começa no branco e cai no vermelho, senão o vermelho cheio sobre o ink faz 2,68:1 e some */ .section-title--light .accent, .hero__headline .accent, .form-head .accent { color: #D6201E; background: none; -webkit-text-fill-color: #D6201E; } /* a régua sob o acento não pode herdar o clip do texto */ .section-title .accent::after { -webkit-text-fill-color: initial; background: var(--grad-rule); } .section-title--light .accent::after, .hero__headline .accent::after { -webkit-text-fill-color: initial; background: #D6201E; } /* ---- 3. Barra de leitura com o degradê e brilho -------------------------- */ .read-progress { height: 3px; background: var(--grad-rule); box-shadow: 0 0 12px rgba(181, 19, 18, 0.55); } /* ---- 4. Número da prova com glow pulsando ------------------------------- */ .proof__solo-num span { color: #fff; animation: brilhoNumero 3.2s ease-in-out infinite; } .proof__solo-num small { -webkit-text-fill-color: initial; background: none; animation: none; } @keyframes brilhoNumero { 0%, 100% { filter: drop-shadow(0 0 16px rgba(181, 19, 18, .40)); } 50% { filter: drop-shadow(0 0 30px rgba(181, 19, 18, .85)); } } /* ---- 5. Cards: fio de degradê no topo, que cresce no hover --------------- */ .step, .financing__card, .objection { position: relative; } .step::after, .financing__card::after, .objection::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-rule); transition: width .5s var(--ease); z-index: 2; } .step:hover::after, .financing__card:hover::after, .objection[open]::after { width: 100%; } .financing__card--featured::after { width: 100%; } /* ---- 6. Hero: mídia ao lado (formato Nobre) ------------------------------ A Área 4 NÃO tem vídeo de obra (acervo do Drive vazio), então o hero scroll-driven da base sai. Sem vídeo, o certo é o hero deixar de ser sticky de altura fixa e crescer com o conteúdo: sticky com overflow:hidden e copy mais longa clipa os CTAs em silêncio (o bug da Meninea). -------------- */ .hero__scroll-track { height: auto; } .hero__sticky { position: static; height: auto; min-height: 0; overflow: visible; padding: calc(var(--header-h) + 56px) 0 76px; display: block; } .hero__bg::before { /* o motivo que tileia do kit sobre o ink: textura de marca, não gradiente solto */ content: ""; position: absolute; inset: 0; background: var(--mark-band) left top / 132px auto repeat; opacity: .07; } .hero__overlay { background: radial-gradient(120% 90% at 82% 18%, rgba(181, 19, 18, 0.20) 0%, transparent 58%), linear-gradient(180deg, rgba(17,21,24,0.30) 0%, rgba(17,21,24,0.74) 100%); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 4vw, 60px); align-items: center; } .hero__headline { max-width: 20ch; } .hero__sub { max-width: 46ch; } /* slideshow do hero (E3C): troca sozinho, com a barra marcando o tempo */ .hero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(196, 205, 212, 0.20); box-shadow: var(--shadow-lg); background: var(--color-ink-2); } .hero__slideshow { position: absolute; inset: 0; } .hero__slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 6s linear; } .hero__slideshow img.is-active { opacity: 1; transform: scale(1); } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(17,21,24,0.86) 100%); pointer-events: none; } .hero__media-tag { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(17, 21, 24, 0.82); backdrop-filter: blur(8px); border: 1px solid rgba(181, 19, 18, 0.38); } .hero__media-tag::before { content: ""; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50% !important; animation: pontoPulsa 2.4s ease-in-out infinite; } @keyframes pontoPulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(181, 19, 18, 0.75); } 50% { box-shadow: 0 0 0 8px rgba(181, 19, 18, 0); } } .hero__media-caption { position: absolute; left: 16px; right: 16px; bottom: 20px; z-index: 3; color: #fff; } .hero__media-caption strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.01em; text-shadow: 0 2px 10px rgba(0,0,0,0.65); } .hero__media-caption span { font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-on-dark-mute); } .hero__media-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: rgba(255,255,255,0.16); } .hero__media-bar i { display: block; height: 100%; width: 0; background: var(--grad-rule); } .hero__media-bar i.run { animation: barraHero 5s linear forwards; } @keyframes barraHero { from { width: 0 } to { width: 100% } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 30px; } .hero__media { aspect-ratio: 16 / 11; } .hero__headline, .hero__sub { max-width: none; } } /* ---- 7. Aviso de foto de exemplo (honestidade da galeria) ---------------- */ .gallery__aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px auto 0; padding: 12px 16px; max-width: 780px; background: var(--color-bg-soft); border-left: 3px solid var(--color-primary); font-size: 13.5px; color: var(--color-text-mute); line-height: 1.5; } .gallery__aviso-tag { flex: 0 0 auto; padding: 4px 10px; background: var(--color-ink-3); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* ---- 8. Dobra do orçamento-estimativa (a zona de ganho da Área 4) -------- */ .ganho { background: var(--color-bg-soft); padding: clamp(56px, 8vw, 96px) 0; } .ganho__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 38px; } .ganho__card { position: relative; background: var(--color-bg); border: 1px solid var(--color-line); padding: 30px 26px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .ganho__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(181, 19, 18, 0.35); } .ganho__card::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-rule); transition: width .5s var(--ease); } .ganho__card:hover::after { width: 100%; } .ganho__mark { display: block; width: 26px; height: 28px; background: var(--color-primary); clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); margin-bottom: 18px; } .ganho__card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; color: var(--color-ink); } .ganho__card p { font-size: 15px; line-height: 1.62; color: var(--color-text-mute); } .ganho__nota { margin-top: 26px; font-size: 13px; color: var(--color-text-mute); text-align: center; } /* ---- 9. Reduzir movimento: tudo que corre, pulsa ou varre para ----------- */ @media (prefers-reduced-motion: reduce) { .btn--accent { animation: none; background: var(--grad-cta); } .btn--accent::after, .hero__media-bar i.run, .hero__media-tag::before, .proof__solo-num span { animation: none !important; } .hero__slideshow img { transition: opacity .01s linear; transform: none; } .step::after, .financing__card::after, .objection::after, .ganho__card::after { transition: none; } } /* ---- 10. Dobra "quem assina" sem foto ----------------------------------- ⚠ Provisório e por falta de insumo: o acervo da Área 4 no Drive está vazio (0 objetos, conferido em 17/08/2026) e não existe retrato do Rhandall. O playbook proíbe placeholder, então a dobra roda em coluna única, com o motivo da marca fazendo o trabalho visual. Quando a foto chegar, tirar a classe `experts--sem-foto` do
e devolver o
. --------- */ .experts--sem-foto .experts__inner { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; text-align: center; position: relative; } .experts--sem-foto .experts__inner::before { content: ""; display: block; width: 54px; height: 58px; margin: 0 auto 26px; background: var(--color-primary); clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); } .experts--sem-foto .eyebrow { justify-content: center; } .experts--sem-foto .experts__lead { margin-inline: auto; max-width: 62ch; } .experts--sem-foto .experts__cta { justify-content: center; display: flex; } /* ---- 11. Algarismos: a Cormorant Garamond entrega figuras OLDSTYLE por padrão, e o "1" dela é um traço com serifa que lê como "I" maiúsculo. No número fantasma do passo 1 isso virava um "I" romano ao lado de um "2", um "3" e um "4" arábicos. Onde o dígito é informação (passo, contador, preço, metragem), forçar figuras de caixa alta. ------------------------------- */ .section-title, .hero__headline, .lead-popup__title, .offer__note, .ganho__nota, .step__ghost, .step__kicker, .proof__solo-num, .financing__value, .financing__inst-value, .financing__type span, .step-circle { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; } /* ---- 12. Cartão da galeria: as referências são LANDSCAPE (1200x900) e o cartão da base é retrato (400x520, herdado das fotos verticais de obra da LMPR). Nessa proporção o crop comia metade da composição. Cartão mais largo e mais baixo, perto do 4:3 do arquivo. ------------------------------- */ .marquee__item { width: clamp(280px, 34vw, 440px); height: clamp(240px, 26vw, 340px); } /* ---- 13. Contraste do que fica sobre superfície escura ------------------ Medido com o auditor em _build/audita-contraste.py, não no olho. O vermelho da marca faz 2,68:1 sobre o ink: serve como MARCADOR (forma), nunca como cor de texto pequeno ali. Três casos reprovaram e são corrigidos aqui. 1 e 2. Eyebrow de dobra escura (Exemplos e Formulário): o texto vai para o aço claro (11,39:1). O ápice do A continua vermelho, porque ele é forma, e forma não tem piso de contraste. 3. A metragem do card ("300 m²") é #D6201E a 22px, mas com peso 600 ela conta como texto PEQUENO (o piso de 3:1 só vale de 18,66px para cima em peso >=700). Sobe para 700 e passa a valer o piso de texto grande, que ela cumpre com 3,57:1. -------------------------------------- */ .offer .eyebrow, .viability .eyebrow--light { color: var(--color-on-dark-mute); } .offer .eyebrow::before, .viability .eyebrow--light::before { background: var(--color-primary); } .financing__type span { font-weight: 700; } /* ========================================================================== RODADA 2 — pedidos do Gabriel em 20/08/2026. Entra depois de tudo e sobrescreve por cascata. ========================================================================== */ /* ---- 14. Respiro entre dobras: o site estava longo demais --------------- Todas as dobras vinham de clamp(70px, 9vw, 120px). Cai para clamp(50px, 6vw, 84px), ~30% a menos, sem colar uma dobra na outra. */ .process, .offer, .gallery, .experts, .objections, .viability, .versus { padding-top: clamp(50px, 6vw, 84px); padding-bottom: clamp(50px, 6vw, 84px); } .section-lead { margin-bottom: 30px; } .steps { margin-top: 34px; } .hex-divider { padding: 26px 0; } /* ---- 15. HERO com foto de fundo em sangria e baixo contraste ----------- O slideshow lateral saiu: o formato é o da LP da Romualdo, foto atrás do texto inteiro. O véu é forte à esquerda (onde o texto mora) e abre à direita, para a casa continuar legível como imagem. */ .hero--foto .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero--foto .hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; /* baixo contraste pedido: a foto perde punch para o texto ganhar */ filter: saturate(.72) contrast(.88) brightness(.92); } .hero--foto .hero__bg::before { /* a textura do kit continua, agora POR CIMA da foto e bem discreta */ content: ""; position: absolute; inset: 0; background: var(--mark-band) left top / 132px auto repeat; opacity: .05; z-index: 1; } .hero--foto .hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(17,21,24,0.95) 0%, rgba(17,21,24,0.88) 34%, rgba(17,21,24,0.55) 64%, rgba(17,21,24,0.34) 100%), linear-gradient(180deg, rgba(17,21,24,0.72) 0%, rgba(17,21,24,0.10) 34%, rgba(17,21,24,0.62) 100%); } .hero--foto .hero__sticky { padding: calc(var(--header-h) + 76px) 0 92px; } .hero--foto .hero__grid { display: block; } .hero--foto .hero__headline { max-width: 17ch; } .hero--foto .hero__sub { max-width: 54ch; } @media (max-width: 760px) { .hero--foto .hero__overlay { background: linear-gradient(180deg, rgba(17,21,24,0.90) 0%, rgba(17,21,24,0.76) 42%, rgba(17,21,24,0.72) 100%); } .hero--foto .hero__sticky { padding: calc(var(--header-h) + 46px) 0 60px; } } /* tarja de autoridade acima do H1 (mesma peça da Romualdo) */ .hero__tarja { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 9px 18px; background: rgba(17, 21, 24, 0.72); border: 1px solid rgba(196, 205, 212, 0.26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; } .hero__tarja-dot { width: 7px; height: 7px; border-radius: 50% !important; background: #D6201E; box-shadow: 0 0 0 0 rgba(214, 32, 30, .7); animation: pontoPulsa 2.4s ease-in-out infinite; } /* ---- 16. Régua de autoridade: quatro números ---------------------------- */ .proof { padding: clamp(34px, 4vw, 52px) 0; } .statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .stat { position: relative; text-align: center; padding: 6px 18px; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; width: 1px; height: 76%; background: rgba(196, 205, 212, 0.20); } .stat__num { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-family: var(--font-body); font-weight: 800; font-size: clamp(30px, 3.6vw, 50px); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: lining-nums tabular-nums; } .stat__num i { font-style: normal; color: #D6201E; } .stat__num small { font-size: .42em; font-weight: 700; margin-left: 4px; color: var(--color-on-dark-mute); } .stat__label { display: block; margin-top: 9px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-dark-mute); } @media (max-width: 700px) { .statbar { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } .stat:nth-child(3)::before { display: none; } } /* ---- 17. Número do passo: pesado e à esquerda -------------------------- Estava em Cormorant (serif fina) e no canto direito. Vira Montserrat 800, que é a tipografia "grosseira" da marca, e encosta na MESMA linha em que começa o texto do card, alinhado com o resto da dobra. */ .step { padding-top: 26px; } .step__ghost { position: absolute; top: 6px; left: 30px; /* = padding lateral do .step: alinha com o texto */ right: auto; font-family: var(--font-body); font-weight: 800; font-size: clamp(96px, 9vw, 138px); line-height: .86; letter-spacing: -0.05em; color: var(--color-primary); opacity: .13; font-variant-numeric: lining-nums; } .step:hover .step__ghost { opacity: .2; } .step__icon, .step__kicker, .step__title, .step__text { position: relative; z-index: 1; } .step__icon { margin-top: 46px; } /* Degradê animado + pulso em cada card do passo. O ::before da base já é a barra de acento que se desenha ao revelar: em vez de criar uma segunda borda, ela vira a rampa animada. O gatilho é `.on`, que é a classe que a base coloca neste card (`.is-revealed` nunca chega aqui). */ .step::before { height: 3px; background: var(--grad-cta-flow); background-size: 280% 100%; } .step.on::before { animation: bordaCorre 6s linear infinite; } @keyframes bordaCorre { 0% { background-position: 0% 50%; } 100% { background-position: 280% 50%; } } .step::after { display: none; } /* o fio de hover virou a própria barra do topo */ .step.on { animation: cardPulsa 3.4s var(--ease) infinite; } .steps .step:nth-child(2).on { animation-delay: .4s; } .steps .step:nth-child(3).on { animation-delay: .8s; } .steps .step:nth-child(4).on { animation-delay: 1.2s; } @keyframes cardPulsa { 0%, 100% { box-shadow: 0 6px 20px rgba(17,21,24,.06); } 50% { box-shadow: 0 14px 38px rgba(181,19,18,.20); } } /* ---- 18. Comparativo "antes de assinar" -------------------------------- */ .versus { background: var(--color-bg-soft); } .versus__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; align-items: stretch; } .versus__col { position: relative; padding: 30px 28px 32px; background: var(--color-bg); border: 1px solid var(--color-line); } .versus__col--bom { border-color: rgba(181, 19, 18, 0.34); box-shadow: 0 16px 44px rgba(17, 21, 24, 0.10); } .versus__col--bom::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-rule); } .versus__col--ruim { background: var(--color-bg-mute); } .versus__mark { position: absolute; top: 22px; right: 24px; width: 26px; height: 28px; background: var(--color-primary); clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); } .versus__tag { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-mute); margin-bottom: 8px; } .versus__col--bom .versus__tag { color: var(--color-primary); } .versus__title { font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.15; color: var(--color-ink); margin-bottom: 22px; } .versus__list { display: flex; flex-direction: column; gap: 16px; } .vs { display: flex; align-items: flex-start; gap: 13px; } .vs__ic { flex: 0 0 auto; width: 24px; height: 26px; display: grid; place-items: center; color: #fff; } .vs__ic svg { width: 12px; height: 12px; } .vs__ic--ok { background: var(--color-primary); } .vs__ic--x { background: var(--color-slate); } .vs__txt { font-size: 15px; line-height: 1.55; color: var(--color-text-mute); } .vs__txt strong { color: var(--color-ink); font-weight: 700; } /* o item ruim ganha o traço quando a coluna entra na tela */ .vs[data-strike] .vs__txt { text-decoration: line-through; text-decoration-thickness: 1.5px; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: text-decoration-color .5s var(--ease), -webkit-text-decoration-color .5s var(--ease); } .versus__col--ruim.is-revealed .vs[data-strike] .vs__txt { -webkit-text-decoration-color: var(--color-slate); text-decoration-color: var(--color-slate); } .versus__col--ruim.is-revealed .vs:nth-child(2) .vs__txt { transition-delay: .12s; } .versus__col--ruim.is-revealed .vs:nth-child(3) .vs__txt { transition-delay: .24s; } .versus__col--ruim.is-revealed .vs:nth-child(4) .vs__txt { transition-delay: .36s; } .versus__cta { margin-top: 32px; display: flex; justify-content: center; } @media (max-width: 760px) { .versus__grid { grid-template-columns: 1fr; } } /* ---- 19. Cards de exemplo: opacos, cinza, e a moldura que se desenha ---- */ .financing__card { /* eram do tom do ink e a estamparia da dobra vazava por trás. Agora é uma superfície própria, opaca e mais clara que o fundo. */ background: #232B31; border-color: rgba(196, 205, 212, 0.16); box-shadow: 0 20px 46px rgba(0, 0, 0, 0.52); } .financing__card--featured { background: #2C353C; } .financing__card::after { display: none; } /* substituído pela moldura */ .moldura { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .moldura i { position: absolute; background: var(--color-primary); display: block; } /* esquerda: sobe */ .moldura i:nth-child(1) { left: 0; bottom: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: bottom; } /* topo: da esquerda para a direita */ .moldura i:nth-child(2) { top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; } /* direita: desce */ .moldura i:nth-child(3) { right: 0; top: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; } /* base: da direita para a esquerda, fechando o quadrado */ .moldura i:nth-child(4) { bottom: 0; right: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: right; } /* Os três cards animam JUNTOS: o gatilho é o grid, não cada card, senão o IntersectionObserver dispara em tempos diferentes e a moldura sai desencontrada. */ .financing__grid.is-revealed .moldura i { transition: transform .5s linear; } .financing__grid.is-revealed .moldura i:nth-child(1) { transform: scaleY(1); transition-delay: 0s; } .financing__grid.is-revealed .moldura i:nth-child(2) { transform: scaleX(1); transition-delay: .5s; } .financing__grid.is-revealed .moldura i:nth-child(3) { transform: scaleY(1); transition-delay: 1s; } .financing__grid.is-revealed .moldura i:nth-child(4) { transform: scaleX(1); transition-delay: 1.5s; } /* ---- 20. Quem assina: moldura de foto pendente -------------------------- */ .experts__vazio { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 3 / 4; background: repeating-linear-gradient(-45deg, rgba(17,21,24,.035) 0 10px, transparent 10px 20px), var(--color-bg-mute); border: 2px dashed rgba(17, 21, 24, 0.20); color: rgba(17, 21, 24, 0.22); text-align: center; padding: 24px; } .experts__silhueta { width: clamp(74px, 14vw, 104px); height: auto; } .experts__vazio-tag { padding: 5px 12px; background: var(--color-ink-3); color: #fff; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .experts__vazio-txt { font-size: 13px; line-height: 1.45; color: var(--color-text-mute); max-width: 22ch; } /* ---- 21. Cidade em múltipla escolha ------------------------------------- */ .checkgroup { border: 0; padding: 0; margin: 0; } .checkgroup legend { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-on-dark); margin-bottom: 4px; padding: 0; } .checkgroup__dica { font-size: 12px; color: var(--color-on-dark-mute); margin-bottom: 10px; } .checkgroup__opcoes { display: flex; flex-direction: column; gap: 8px; } .checkopt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(196, 205, 212, 0.22); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .checkopt:hover { border-color: rgba(181, 19, 18, 0.55); } .checkopt input { position: absolute; opacity: 0; width: 0; height: 0; } .checkopt__box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid rgba(196, 205, 212, 0.55); display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast); } .checkopt__box::after { content: ""; width: 9px; height: 10px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 34%, 26% 100%, 0 100%); transform: scale(0); transition: transform var(--t-fast); } .checkopt input:checked ~ .checkopt__box { background: var(--color-primary); border-color: var(--color-primary); } .checkopt input:checked ~ .checkopt__box::after { transform: scale(1); } .checkopt input:focus-visible ~ .checkopt__box { outline: 2px solid #D6201E; outline-offset: 2px; } .checkopt__txt { font-size: 14px; line-height: 1.4; color: var(--color-on-dark); } .checkopt input:checked ~ .checkopt__txt { color: #fff; } .checkgroup.error .checkopt { border-color: rgba(181, 19, 18, 0.75); } /* ---- 22. Reduzir movimento ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .step, .step.on, .step.on::before { animation: none; } .hero__tarja-dot { animation: none; } .moldura i { transition: none !important; transform: none !important; } .vs[data-strike] .vs__txt { transition: none; -webkit-text-decoration-color: var(--color-slate); text-decoration-color: var(--color-slate); } } /* ---- 23. Passo: o ícone saiu de cima do número ------------------------- O número virou marca d'água no canto superior ESQUERDO, que é onde o texto do card começa. O ícone da base nascia exatamente ali e caía em cima dele. O ícone vai para o canto superior direito: o número mantém o alinhamento com o texto e os dois param de disputar o mesmo pixel. */ .step { padding-top: 30px; } .step__ghost { top: 10px; font-size: clamp(84px, 7.6vw, 116px); opacity: .12; } .step__icon { position: absolute; top: 26px; right: 26px; margin: 0; width: 52px; height: 57px; z-index: 2; } .step__icon svg { width: 23px; height: 23px; } .step__kicker { margin-top: 78px; } @media (max-width: 620px) { .step__icon { width: 46px; height: 50px; top: 22px; right: 20px; } .step__kicker { margin-top: 66px; } } /* ---- 24. Hero: a foto estava escura demais para ler como casa ---------- */ .hero--foto .hero__foto { filter: saturate(.78) contrast(.92) brightness(1.04); } .hero--foto .hero__overlay { background: linear-gradient(90deg, rgba(17,21,24,0.94) 0%, rgba(17,21,24,0.84) 36%, rgba(17,21,24,0.44) 66%, rgba(17,21,24,0.24) 100%), linear-gradient(180deg, rgba(17,21,24,0.68) 0%, rgba(17,21,24,0.06) 36%, rgba(17,21,24,0.55) 100%); } /* ---- 25. Grade dos passos alinhada com o texto da dobra ---------------- A base centraliza a grade num max-width de 920px, então os cards nasciam ~100px à direita do H2 e o número ficava fora da linha do texto de "Como funciona". Tirando a centralização, o número do passo 1 cai exatamente na mesma vertical do eyebrow, do H2 e do lead. */ .steps { max-width: 100%; margin-left: 0; margin-right: 0; } /* ---- 26. O grupo de cidades vive em DUAS superfícies ------------------- O formulário da dobra fica sobre o ink; o popup é um card BRANCO. A primeira versão usou as cores de fundo escuro nos dois, e no popup o rótulo, a dica e os nomes das cidades ficavam brancos sobre branco, ou seja, invisíveis. É o mesmo erro que já tinha acontecido na dobra de risco. Agora o componente lê a cor de um token local, e cada superfície define o seu. O padrão é a superfície CLARA, que é a mais fácil de esquecer. */ .checkgroup { --ck-txt: var(--color-text); --ck-mute: var(--color-text-mute); --ck-forte: var(--color-ink); --ck-fundo: rgba(17, 21, 24, 0.03); --ck-borda: var(--color-line); --ck-borda2: rgba(17, 21, 24, 0.34); } /* ⚠ NÃO existe variante escura deste componente. A dobra `.viability` é escura, mas o `.form-card` dentro dela tem `background:#fff`, igual ao card do popup. Os dois lugares onde o grupo aparece são CLAROS. Escrevi um override escuro achando o contrário e o rótulo sumiu nos dois. Se algum dia o grupo for para uma superfície escura, redefina os tokens `--ck-*` no contêiner daquela superfície, e não aqui. */ .checkgroup legend { color: var(--ck-txt); } .checkgroup__dica { color: var(--ck-mute); } .checkopt { background: var(--ck-fundo); border-color: var(--ck-borda); } .checkopt__box { border-color: var(--ck-borda2); } .checkopt__txt { color: var(--ck-txt); } .checkopt input:checked ~ .checkopt__txt { color: var(--ck-forte); } /* ========================================================================== RODADA 3 — pedidos do Gabriel em 21/08/2026. ========================================================================== */ /* ---- 27. TIPOGRAFIA: legibilidade ------------------------------------- ⚠ DESVIO DO KIT, consciente. O kit fixou a display em Cormorant Garamond porque o lettering da logo é Trajan-like e "a Cormorant é a mais próxima disponível na web". Ela é uma garamond de ALTO CONTRASTE: hastes finas, x-height baixo. Em título grande passa; em botão, rótulo, título de card e texto sobre fundo escuro ela apaga. Duas trocas: 1. Display -> SPECTRAL. Serifada igual, desenhada para tela: contraste de traço menor e x-height maior. Continua lendo como marca clássica. 2. Tudo que é INTERFACE (botão, nav, rótulo, kicker, título de card, legenda, rodapé) -> Montserrat, que já é a fonte de texto do kit. Registrar no marca.json se a troca for adotada nas outras peças. */ :root { --font-display: "Spectral", "Georgia", serif; --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* texto de apoio mais escuro: #55606A sobre o off faz 6,0:1, e sobre card branco a leitura de parágrafo longo ainda ficava leve */ --color-text-mute: #454F58; } body { font-size: 16.5px; line-height: 1.68; } /* a interface inteira sai da serifada */ .btn, .site-nav a, .site-header__cta, .eyebrow, .step__kicker, .step__title, .versus__tag, .versus__title, .financing__type, .financing__tier, .financing__label, .financing__inst-label, .objection summary span, .form-step-title, .form-group label, .form__field label, .checkgroup legend, .experts__caption strong, .marquee__item figcaption, .site-footer__tagline, .site-footer__info-item span, .site-footer__copy, .trust-item, .stat__label, .hero__cue, .hero__tarja { font-family: var(--font-ui); } /* títulos de card ganham peso: eram serifada 600, viram sans 700 */ .step__title, .versus__title, .financing__type, .objection summary span { font-weight: 700; letter-spacing: -0.01em; } .step__title { font-size: 17px; line-height: 1.32; } .versus__title { font-size: clamp(20px, 2vw, 26px); } /* o display fica só onde é grande de verdade */ .hero__headline, .section-title, .lead-popup__title, .experts__lead { font-family: var(--font-display); } .hero__headline, .section-title, .lead-popup__title { font-weight: 600; letter-spacing: -0.005em; } .experts__lead { font-family: var(--font-body); } /* corpo um pouco mais firme */ .section-lead, .step__text, .vs__txt, .objection p, .hero__sub { font-weight: 450; } /* ---- 28. BOTÕES mais chamativos --------------------------------------- Eram serifada em caixa baixa, do tamanho do corpo. Viram Montserrat 700 em caixa alta com entreletra, que é o que o olho lê como "botão", mais corpo maior, sombra mais funda e a seta que anda no hover. */ .btn { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 17px 30px; white-space: normal; } .btn--lg { font-size: 14.5px; padding: 20px 38px; letter-spacing: 0.08em; } .btn--compact { font-size: 12px; padding: 13px 22px; letter-spacing: 0.08em; } .btn svg { transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn--accent { box-shadow: 0 12px 30px rgba(181, 19, 18, 0.34), 0 0 0 1px rgba(255,255,255,0.10) inset; } .btn--accent:hover { box-shadow: 0 22px 56px rgba(181, 19, 18, 0.55), 0 0 0 1px rgba(255,255,255,0.18) inset; } .btn--green { box-shadow: 0 12px 30px rgba(31, 168, 88, 0.32), 0 0 0 1px rgba(255,255,255,0.10) inset; } .btn--green:hover { box-shadow: 0 22px 56px rgba(31, 168, 88, 0.52); } .btn--ghost-light { background: rgba(255, 255, 255, 0.10); border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff; } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.20); border-color: #fff; } /* ---- 29. Respiro: mais um corte ---------------------------------------- */ .process, .offer, .gallery, .experts, .objections, .viability, .versus { padding-top: clamp(40px, 4.6vw, 66px); padding-bottom: clamp(40px, 4.6vw, 66px); } .proof { padding: clamp(26px, 3vw, 40px) 0; } .section-lead { margin-bottom: 24px; } .steps { margin-top: 26px; } .versus__grid { margin-top: 26px; } .hex-divider { padding: 16px 0; } .gallery__head { margin-bottom: 6px; } .gallery__cta, .financing__cta, .versus__cta { margin-top: 26px; } .hero--foto .hero__sticky { padding: calc(var(--header-h) + 58px) 0 68px; } /* ---- 30. Régua com três números ---------------------------------------- */ .statbar { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .statbar { grid-template-columns: 1fr; row-gap: 22px; } .stat + .stat::before { display: none; } } /* ---- 31. Card das referências no hero ---------------------------------- */ .hero--foto .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 4vw, 64px); align-items: center; } .hero--foto .hero__headline { max-width: 15ch; } .hero--foto .hero__sub { max-width: 46ch; } .hero__card { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-ink-2); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62); } .hero__slideshow { position: absolute; inset: 0; } .hero__slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 5.5s linear; } .hero__slideshow img.is-active { opacity: 1; transform: scale(1); } .hero__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,21,24,.42) 0%, transparent 34%, rgba(17,21,24,.90) 100%); pointer-events: none; } .hero__card-tag { position: absolute; top: 13px; left: 13px; z-index: 3; padding: 6px 12px; background: rgba(17, 21, 24, 0.86); border: 1px solid rgba(181, 19, 18, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; } .hero__card-legenda { position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 3; } .hero__card-legenda strong { display: block; font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); } .hero__card-legenda span { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-dark-mute); } .hero__card-barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: rgba(255,255,255,0.18); } .hero__card-barra i { display: block; height: 100%; width: 0; background: var(--grad-rule); } .hero__card-barra i.run { animation: barraHero 4.2s linear forwards; } @keyframes barraHero { from { width: 0 } to { width: 100% } } @media (max-width: 900px) { .hero--foto .hero__grid { grid-template-columns: 1fr; gap: 26px; } .hero--foto .hero__headline, .hero--foto .hero__sub { max-width: none; } .hero__card { aspect-ratio: 16 / 11; } } /* ---- 32. Coluna "engenheiro qualquer": fio vermelho, sem texto riscado -- Pedido direto: nada de palavra cinza e cortada. O texto fica na cor normal, o ✗ vermelho abre cada item e um FIO VERMELHO FINO se desenha por baixo da frase quando a coluna entra na tela. É o mesmo tratamento das outras LPs da carteira (`.rb__txt::after` da base). */ .versus__col--ruim .vs__txt { position: relative; display: inline; color: var(--color-text); text-decoration: none !important; padding-bottom: 2px; background-image: linear-gradient(var(--color-primary), var(--color-primary)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; transition: background-size .6s var(--ease); } .versus__col--ruim.is-revealed .vs__txt { background-size: 100% 1.5px; } .versus__col--ruim.is-revealed .vs:nth-child(2) .vs__txt { transition-delay: .14s; } .versus__col--ruim.is-revealed .vs:nth-child(3) .vs__txt { transition-delay: .28s; } .versus__col--ruim.is-revealed .vs:nth-child(4) .vs__txt { transition-delay: .42s; } .vs__ic--x { background: var(--color-primary); } /* ---- 33. Contraste: o que ainda estava leve ---------------------------- */ .section-lead { color: var(--color-text-mute); } .step__text, .vs__txt, .objection p { color: var(--color-text-mute); } .checkgroup__dica { color: var(--color-text-mute); } /* sobre superfície escura, o apoio usa o aço do kit (11,39:1), nunca cinza médio */ .section-lead--light, .offer__note, .hero__sub { color: var(--color-on-dark); } .hero__cue { color: #fff; } .hero__cue-chevron { background: rgba(181, 19, 18, 0.55); color: #fff; } .marquee__item figcaption { color: #fff; font-weight: 600; } /* ---- 34. Reduzir movimento --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero__slideshow img { transition: opacity .01s linear; transform: none; } .hero__card-barra i.run { animation: none; } .versus__col--ruim .vs__txt { transition: none; background-size: 100% 1.5px; } .btn:hover svg { transform: none; } } /* ---- 35. Ajustes do hero e do header depois da troca de fonte ---------- O botão em caixa alta ficou mais largo e empurrou "Dúvidas" para fora da barra; e o H1 com max-width de 15ch quebrava em seis linhas na coluna estreita do grid de duas colunas, estourando a dobra. */ .site-nav a[data-section] { font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 8px 13px; letter-spacing: 0.01em; } .site-header__cta { font-size: 11.5px; padding: 12px 18px; letter-spacing: 0.07em; } .hero--foto .hero__headline { font-size: clamp(28px, 3vw, 41px); line-height: 1.14; max-width: 19ch; } .hero--foto .hero__sub { font-size: 16px; line-height: 1.62; max-width: 48ch; margin-bottom: 26px; } .hero__tarja { margin-bottom: 18px; padding: 8px 15px; font-size: 11px; } .hero__cue { margin-top: clamp(18px, 2.6vh, 30px); padding-top: clamp(14px, 2vh, 20px); } @media (max-width: 1180px) { .site-nav a[data-section] { font-size: 12px; padding: 8px 10px; } } /* ---- 36. A nav não cabia mais na barra -------------------------------- Medido: em 1440 o conteúdo da nav somava 670px numa caixa de 625, e o último item ("Dúvidas") ficava clipado E por baixo do botão do header. Não é impressão: `ultimo item direita 1099` contra `cta esquerda 1074`. Menos entreletra e menos respiro por item resolvem sem cortar nenhum. */ .site-nav a[data-section] { font-size: 12.5px; padding: 8px 9px; letter-spacing: 0; } .site-nav { margin-right: 14px; } @media (max-width: 1180px) { .site-nav a[data-section] { font-size: 11.5px; padding: 8px 7px; } .site-header__cta { font-size: 11px; padding: 11px 14px; } } /* ---- 37. A faixa 901px a 1100px não comportava nav + botão ------------- A base já esconde o botão do header abaixo de 900px e deixa a nav rolar como chips. Entre 901 e 1100 o botão ainda aparecia e a nav clipava "Dúvidas" por cima dele (medido: item a 853px, botão começando em 785px). O corte sobe para 1100px. Não custa conversão: o CTA fixo do rodapé está em TODAS as larguras, não só no celular. */ @media (max-width: 1100px) { .site-header__cta { display: none; } .site-nav { margin-right: 0; } .site-nav a[data-section] { font-size: 12.5px; padding: 8px 10px; } } /* ---- 38. O CTA vermelho apagava em parte do ciclo ----------------------- O `--grad-cta-flow` ia de navy a vermelho e de volta a navy. Com o degradê correndo, metade do tempo o botão mostrava a ponta NAVY e lia como um botão escuro qualquer, ao lado do verde de conversão que é sempre verde. Foi isso que apareceu como "botão pouco chamativo". A rampa do CTA passa a ser toda vermelha, com um brilho mais claro varrendo por dentro: o botão é vermelho o tempo inteiro e o movimento vira reflexo. O navy continua na régua e nos fios de degradê, onde ele não custa leitura. */ :root { --grad-cta-flow: linear-gradient(105deg, /* O brilho para em #DE2A27: medido, e' o vermelho mais claro em que o texto BRANCO de 13,5px ainda faz 4,70:1. O #E8322F que eu tinha posto primeiro fazia 4,26:1 e reprovava o piso de AA. */ #8E0F0E 0%, #B51312 16%, #D6201E 34%, #DE2A27 50%, #D6201E 66%, #B51312 84%, #8E0F0E 100%); --grad-cta: linear-gradient(105deg, #D6201E 0%, #B51312 60%, #8E0F0E 100%); } .btn--accent { background-size: 240% 100% !important; } /* ========================================================================== RODADA 4 — 21/08/2026. ========================================================================== */ /* ---- 39. Proporção das letras alinhada com a LP da Romualdo ------------ Medido nas duas páginas, em 1440, com o mesmo probe: | | Romualdo | Área 4 (antes) | |---------------|----------|----------------| | H1 | 58px | 41px | | sub do hero | 19px | 16px | | botão do hero | 16px | 14,5px | | título de card| 21px | 17px | | H2 de seção | 48px | 48px (já batia) | O H1 da Romualdo tem 749px de linha porque lá o hero é uma coluna só. Aqui tem o card ao lado, então ele sobe até 52px em vez de 58: acima disso a frase quebra em seis linhas na coluna estreita e estoura a dobra. */ .hero--foto .hero__headline { font-size: clamp(32px, 3.9vw, 52px); line-height: 1.10; letter-spacing: -0.015em; max-width: 14ch; } .hero--foto .hero__sub { font-size: 18.5px; line-height: 1.62; max-width: 40ch; margin-bottom: 30px; } .hero__cta .btn--lg { font-size: 16px; padding: 20px 34px; letter-spacing: 0.06em; } .step__title { font-size: 21px; line-height: 1.22; } .versus__title { font-size: clamp(21px, 2.1vw, 27px); } .financing__type { font-size: 24px; } /* o lead de seção estava com 720px de linha contra 582 da Romualdo */ .section-lead { max-width: 60ch; } /* ---- 40. O card das referências, maior --------------------------------- Era 16/10 e ficava bem menor que a área que o Gabriel marcou no print. Passa a 5/4 e a coluna cresce, então ele ganha altura e largura. */ .hero--foto .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(28px, 3vw, 44px); } .hero__card { aspect-ratio: 5 / 4; } .hero__card-tag { top: 16px; left: 16px; padding: 7px 14px; font-size: 10.5px; } .hero__card-legenda { left: 20px; right: 20px; bottom: 22px; } .hero__card-legenda strong { font-size: 17px; } .hero__card-legenda span { font-size: 11px; } @media (max-width: 900px) { .hero__card { aspect-ratio: 16 / 11; } .hero--foto .hero__headline { max-width: none; } .hero--foto .hero__sub { max-width: none; } } /* ---- 41. Régua: "anos" colado no número, igual ao "mil" ---------------- */ .stat__num small { font-size: .40em; font-weight: 700; margin-left: 5px; } /* ---- 42. O hero cresceu junto com as letras -------------------------- Medido: com H1 a 52px, sub a 18,5px e botões a 16px, a base do hero foi para y=1032 numa viewport de 900. Como este hero CRESCE com o conteúdo (não é sticky de altura fixa), isso não clipa nada, mas empurra os dois CTAs para fora da primeira tela, que é o que importa. Corte no vertical, sem mexer no tamanho das letras que acabaram de ser calibradas. */ .hero--foto .hero__sticky { padding: calc(var(--header-h) + 30px) 0 40px; } .hero--foto .hero__headline { line-height: 1.06; margin-bottom: 16px; } .hero--foto .hero__sub { margin-bottom: 22px; } .hero__tarja { margin-bottom: 14px; } .hero__cue { margin-top: 16px; padding-top: 13px; } /* ---- 43. Tela baixa: o hero entra em modo compacto --------------------- Medido em 1366x680 (notebook de 13"), que é onde o playbook manda olhar: os dois CTAs caíam para y=811 e y=896, ou seja, fora da primeira tela. O hero da Romualdo é 100vh e se comprime sozinho; este cresce com o conteúdo, então precisa de um modo compacto por ALTURA. Só abaixo de 820px de viewport, e só no desktop: no celular a página é de rolagem mesmo. */ @media (min-width: 901px) and (max-height: 820px) { .hero--foto .hero__sticky { padding: calc(var(--header-h) + 18px) 0 26px; } .hero--foto .hero__headline { font-size: clamp(30px, 2.9vw, 38px); margin-bottom: 12px; } .hero--foto .hero__sub { font-size: 16px; line-height: 1.55; margin-bottom: 18px; max-width: 46ch; } .hero__tarja { margin-bottom: 11px; padding: 6px 13px; font-size: 10.5px; } .hero__cta .btn--lg { font-size: 14px; padding: 15px 24px; } .hero__cta { gap: 10px; flex-wrap: nowrap; } .hero__cta .btn { white-space: nowrap; } .hero__cue { display: none; } /* decorativo: some antes do CTA sumir */ .hero__card { aspect-ratio: 16 / 11; } } /* ---- 44. Conserto do modo compacto ------------------------------------ Dois defeitos que EU introduzi na regra 43, os dois medidos: 1. `flex-wrap: nowrap` + `white-space: nowrap` nos CTAs. Os dois botões pedem 424px e ~330px numa coluna de 551px. Sem quebra, o flex ENCOLHEU o segundo para 117px e, como o texto não podia quebrar, ele vazou para fora da própria caixa e apareceu cortado ("NHECER A ÁRE"). Botão não cabe: empilha. Custa ~60px de altura, e o orçamento vertical comporta. 2. O `max-width: 14ch` do H1 continuou valendo com a fonte menor: 285px de linha, 7 linhas de texto. No compacto o H1 usa a largura da coluna. */ @media (min-width: 901px) and (max-height: 820px) { .hero__cta { flex-wrap: wrap; gap: 12px; } .hero__cta .btn { flex: 0 0 auto; white-space: normal; font-size: 13.5px; padding: 14px 22px; } .hero--foto .hero__headline { max-width: none; margin-bottom: 14px; } .hero--foto .hero__sub { max-width: 52ch; } } /* ---- 45. A medida do H1 estava estreita demais ------------------------- O `max-width: 14ch` foi calibrado quando o H1 tinha 41px. Com 52px ele virou 390px de linha e 7 linhas de texto, contra 4 linhas na Romualdo. O H1 passa a usar a largura da própria coluna, que é o que a Romualdo faz (lá a linha tem 749px porque o hero é de coluna única). */ .hero--foto .hero__headline { max-width: none; }