/* ========================================================================== Renupp - Premium conversion site (built fresh) Skill: ui-ux-pro-max (a11y ≥4.5:1, touch ≥48px, type scale, 1 primary CTA, performance, reduced-motion). Optimized for SEO / GEO / AIO. ========================================================================== */ :root { /* Brand */ --ink: #0a0f1e; --ink-soft: #121a2e; --blue: #1b6fff; --blue-bright: #4d8bff; --blue-700: #0c46ad; --cyan: #2fb6ff; --light: #ffc24b; /* "luz" warm - destaque da auditoria / NPS */ --light-soft: #ffe6ad; --grad: linear-gradient(105deg, #1b6fff 0%, #2fb6ff 100%); --grad-soft: linear-gradient(180deg, rgba(27,111,255,0.10), rgba(47,182,255,0.04)); /* Surfaces */ --white: #ffffff; --soft: #f5f8fd; /* premium off-white section */ --soft-2: #eaf1fb; --border: #e4eaf3; --border-strong: #cfd9e9; /* Text (≥4.5:1) */ --text: #0a0f1e; --text-2: #475069; --text-muted: #6b7488; --on-dark: #ffffff; --on-dark-2: rgba(255,255,255,0.76); --on-dark-muted: rgba(255,255,255,0.55); --success: #16a34a; /* Type */ --f-display: "Sora", ui-sans-serif, system-ui, sans-serif; --f-body: "Sora", ui-sans-serif, system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace; --fs-eyebrow: 0.8rem; --fs-sm: 0.9rem; --fs-body: 1.0625rem; --fs-lead: 1.25rem; --fs-h3: 1.4rem; --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3rem); --fs-h1: clamp(2.7rem, 1.5rem + 5vw, 4.75rem); --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; --r: 14px; --r-lg: 22px; --r-pill: 999px; --container: 1180px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow-sm: 0 1px 2px rgba(10,15,30,0.05); --shadow: 0 2px 6px rgba(10,15,30,0.05), 0 20px 48px -28px rgba(10,15,30,0.30); --shadow-lg: 0 40px 90px -50px rgba(10,15,30,0.50); } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; font-family:var(--f-body); font-size:var(--fs-body); line-height:1.65; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.06; margin:0; letter-spacing:-0.025em; } p{ margin:0; } ul,ol,dl,dd,dt,figure,blockquote{ margin:0; padding:0; } ul,ol{ list-style:none; } html,body{ overflow-x:clip; } :focus-visible{ outline:3px solid var(--blue-bright); outline-offset:3px; border-radius:6px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-9999px; top:8px; z-index:200; } .skip-link:focus{ left:8px; background:var(--blue); color:#fff; padding:10px 16px; border-radius:10px; } /* Layout */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-6); } .section{ padding-block:var(--sp-24); } .section--tight{ padding-block:var(--sp-16); } .bg-white{ background:var(--white); } .bg-soft{ background:var(--soft); border-block:1px solid var(--border); } .bg-ink{ background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden; } .eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--f-mono); font-size:var(--fs-eyebrow); letter-spacing:0.14em; text-transform:uppercase; color:var(--blue-700); margin:0 0 var(--sp-4); } .eyebrow::before{ content:""; width:20px; height:2px; border-radius:2px; background:var(--grad); } .bg-ink .eyebrow{ color:var(--blue-bright); } .head{ max-width:48rem; } .head--center{ margin-inline:auto; text-align:center; } /* Cabeçalho centralizado leva junto o eyebrow e os botões (mesmo eixo). */ .head--center .eyebrow{ justify-content:center; } .head--center .hero-actions{ justify-content:center; } .h2{ font-size:var(--fs-h2); } .lead{ margin-top:var(--sp-4); font-size:var(--fs-lead); line-height:1.55; color:var(--text-2); } .bg-ink .lead{ color:var(--on-dark-2); } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:52px; padding:14px 26px; border-radius:var(--r); font-weight:600; font-size:var(--fs-sm); border:1.5px solid transparent; white-space:nowrap; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--grad); color:#fff; box-shadow:0 8px 24px -8px rgba(27,111,255,0.6); } .btn-primary:hover{ box-shadow:0 12px 30px -8px rgba(27,111,255,0.7); } .btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); } .btn-ghost:hover{ border-color:var(--blue); color:var(--blue-700); } .btn-on-dark{ background:rgba(255,255,255,0.10); color:#fff; border-color:rgba(255,255,255,0.24); } .btn-on-dark:hover{ background:rgba(255,255,255,0.18); } .btn-lg{ min-height:58px; padding:16px 32px; font-size:var(--fs-body); } .btn .ic{ width:18px; height:18px; } /* Header */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.85); backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--border); } .nav{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:var(--sp-6); } .brand{ display:inline-flex; align-items:center; gap:10px; } .brand .wordmark{ font-family:var(--f-display); font-weight:800; font-size:1.35rem; letter-spacing:-0.03em; } .brand .wordmark b{ color:var(--blue); } .nav-links{ display:none; align-items:center; gap:var(--sp-1); } .nav-links a{ padding:9px 14px; border-radius:10px; font-size:var(--fs-sm); font-weight:500; color:var(--text-2); } .nav-links a:hover{ color:var(--blue-700); background:var(--soft); } .nav-cta{ display:none; align-items:center; gap:var(--sp-3); } .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid var(--border-strong); border-radius:12px; background:var(--white); } .mobile-menu{ display:none; border-top:1px solid var(--border); background:var(--white); } .mobile-menu.is-open{ display:block; } .mobile-menu a{ display:block; padding:15px var(--sp-6); font-weight:500; border-bottom:1px solid var(--border); } .mobile-menu .mm-cta{ padding:var(--sp-4) var(--sp-6); display:grid; gap:var(--sp-3); } @media(min-width:1024px){ .nav-links,.nav-cta{ display:flex; } .nav-toggle{ display:none; } } /* Hero */ .hero{ position:relative; overflow:hidden; background:var(--white); } .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 50% at 80% 0%, rgba(47,182,255,0.16), transparent 70%), radial-gradient(50% 45% at 12% 8%, rgba(27,111,255,0.12), transparent 70%); pointer-events:none; } .hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-16); padding-block:var(--sp-20) var(--sp-24); align-items:center; } @media(min-width:1024px){ .hero-grid{ grid-template-columns:1.02fr 0.98fr; } } .badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--blue-700); background:var(--white); border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:7px 14px; box-shadow:var(--shadow-sm); } .badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 rgba(27,111,255,0.5); animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(27,111,255,0.5);} 70%{ box-shadow:0 0 0 10px rgba(27,111,255,0);} 100%{ box-shadow:0 0 0 0 rgba(27,111,255,0);} } .hero h1{ font-size:var(--fs-h1); margin-top:var(--sp-6); } .hero h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Linha de apoio do hero: promessa concreta logo abaixo do H1. Escala entre o H1 e o lead para criar hierarquia sem competir com o título. */ .hero-subhead{ margin-top:var(--sp-4); font-family:var(--f-display); font-weight:700; letter-spacing:-0.015em; line-height:1.3; font-size:clamp(1.35rem, 1rem + 1.4vw, 1.9rem); color:var(--text); max-width:34rem; text-wrap:balance; } .hero-lead{ margin-top:var(--sp-6); font-size:var(--fs-lead); color:var(--text-2); max-width:36rem; } .hero-actions{ margin-top:var(--sp-8); display:flex; flex-wrap:wrap; gap:var(--sp-3); } .hero-sub{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:8px; } .hero-sub .ic{ width:16px; height:16px; color:var(--success); } /* Product mock (premium dashboard preview) */ .mock-wrap{ position:relative; } .mock-wrap::after{ content:""; position:absolute; inset:-8% -6% -12% -6%; background:var(--grad); filter:blur(60px); opacity:0.18; z-index:-1; border-radius:40px; } .mock{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; } .mock .bar{ display:flex; align-items:center; gap:6px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--soft); } .mock .bar i{ width:11px; height:11px; border-radius:50%; background:var(--border-strong); display:block; } .mock .bar .t{ margin-left:10px; font-family:var(--f-mono); font-size:12px; color:var(--text-muted); } .mock .body{ padding:var(--sp-6); } .mock .tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); } .mock .tile{ background:var(--soft); border:1px solid var(--border); border-radius:14px; padding:14px; } .mock .tile .v{ font-family:var(--f-mono); font-weight:600; font-size:1.3rem; color:var(--ink); } .mock .tile .k{ font-size:11px; color:var(--text-2); margin-top:3px; } .mock .rank{ margin-top:var(--sp-6); display:grid; gap:13px; } .mock .rank .rh{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); } .mock .row .top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:6px; } .mock .row .top b{ font-weight:600; } .mock .row .score{ font-family:var(--f-mono); font-weight:600; color:var(--blue-700); } .mock .track{ height:9px; border-radius:99px; background:var(--soft-2); overflow:hidden; } .mock .fill{ height:100%; border-radius:99px; background:var(--grad); } .mock-cap{ margin-top:var(--sp-3); font-size:0.72rem; color:var(--text-muted); text-align:center; } /* Stat band */ .stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-6); } @media(min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } } .stats-intro{ max-width:46rem; margin:0 auto var(--sp-12); text-align:center; font-size:var(--fs-lead); line-height:1.5; color:var(--on-dark-2); } .stats-intro strong{ color:#fff; font-weight:600; } /* Cada número vira um cartão: o contorno só aparece no hover, então em repouso a faixa continua limpa e, ao passar o mouse, o bloco responde. As divisórias verticais saíram porque cartão com divisória vira grade de tabela. */ .stat{ text-align:center; padding:var(--sp-6) var(--sp-4); border:1px solid transparent; border-radius:var(--r-lg); transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .stat:hover{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10); transform:translateY(-2px); } .bg-white .stat:hover{ background:var(--soft); border-color:var(--border); } /* Entrada em cascata: cada bloco entra um pouco depois do anterior, o que faz o olho ler a faixa da esquerda para a direita em vez de receber os quatro de uma vez. O atraso é do índice declarado no HTML (--i). */ .stats .stat{ opacity:0; transform:translateY(16px); } .stats.in .stat{ opacity:1; transform:translateY(0); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i, 0) * 110ms); } /* Brilho central: tira o aspecto de bloco escuro chapado sem pesar (é um gradiente pintado, não uma imagem nem um canvas). */ .stat-band{ position:relative; overflow:hidden; } .stat-band::before{ content:""; position:absolute; left:50%; top:50%; width:min(1100px,120%); aspect-ratio:2/1; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center, rgba(27,111,255,0.18), rgba(27,111,255,0.05) 45%, transparent 70%); pointer-events:none; } .stat-band > *{ position:relative; } .stat .v{ font-family:var(--f-mono); font-weight:600; font-size:clamp(2rem,1.4rem+2vw,2.8rem); letter-spacing:-0.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat .k{ margin-top:10px; font-size:var(--fs-sm); color:var(--on-dark-2); min-height:2.7em; display:flex; align-items:flex-start; justify-content:center; } .bg-white .stat .k{ color:var(--text-2); } /* Atalho do autoatendimento (contato). Ele precisa ganhar do formulário na hierarquia da página: hoje o caminho rápido É o produto, e o formulário é a exceção para quem tem operação grande. */ .fast-track{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--sp-6); align-items:flex-start; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:linear-gradient(135deg, var(--soft-2), var(--white)); padding:var(--sp-8); box-shadow:var(--shadow-sm); } @media(min-width:820px){ .fast-track{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--sp-12); } } .fast-track::before{ content:""; position:absolute; right:-10%; top:-60%; width:60%; aspect-ratio:1; background:radial-gradient(circle at center, rgba(27,111,255,0.16), transparent 65%); pointer-events:none; } .fast-track > *{ position:relative; } .fast-track-t{ margin-top:6px; font-family:var(--f-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:-0.02em; } .fast-track-p{ margin-top:8px; max-width:34rem; font-size:var(--fs-sm); color:var(--text-2); } .fast-track .btn{ flex:none; } /* Trust strip */ .trust{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); text-align:center; } .trust .label{ font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:0.04em; color:var(--text-muted); } .trust .chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); } .trust .chips span{ font-size:var(--fs-sm); font-weight:600; color:var(--text-2); background:var(--white); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 18px; box-shadow:var(--shadow-sm); } /* Grids / cards */ .grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); } .g2{ grid-template-columns:1fr; } .g3{ grid-template-columns:1fr; } @media(min-width:768px){ .g2{ grid-template-columns:1fr 1fr; } .g3{ grid-template-columns:repeat(3,1fr); } } .card{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-8); box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } a.card{ display:block; } a.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); } .bg-ink a.card:hover{ border-color:rgba(255,255,255,0.25); } .card h3{ font-size:var(--fs-h3); color:var(--text); } .card p{ margin-top:var(--sp-3); color:var(--text-2); } .ibadge{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--grad-soft); color:var(--blue-700); margin-bottom:var(--sp-4); border:1px solid var(--border); } .ibadge .ic{ width:26px; height:26px; } /* Cards de benefício com ícone (Segurança, pilares da home, Produto): conteúdo centralizado no bloco e ícone um pouco maior, em vez de encostado no canto. */ .card:has(.ibadge){ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .card:has(.ibadge) .ibadge{ width:60px; height:60px; } .card:has(.ibadge) .ibadge .ic{ width:30px; height:30px; } /* Cards de benefício SEM ícone (grade-problema da home): texto centralizado. */ .grid--center-cards .card{ text-align:center; } /* Feature rows (alternating) - top-alinhadas para evitar desalinhamento */ .frow{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-12); align-items:start; } @media(min-width:900px){ .frow{ grid-template-columns:1fr 1fr; } .frow.rev .ftext{ order:2; } } .frow .ftext .feat-list{ margin-top:var(--sp-6); display:grid; gap:12px; } .frow .ftext .feat-list li{ display:flex; gap:10px; color:var(--text-2); } .frow .ftext .feat-list .ic{ width:20px; height:20px; color:var(--blue); flex:none; margin-top:3px; } .fvisual{ background:var(--soft); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-8); box-shadow:var(--shadow); } /* Steps */ .steps{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); counter-reset:s; } @media(min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); } } .step{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-8); } .bg-ink .step{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.12); } .step .n{ font-family:var(--f-mono); font-weight:600; color:var(--blue-700); font-size:var(--fs-sm); } .bg-ink .step .n{ color:var(--blue-bright); } .step h3{ font-size:var(--fs-h3); margin-top:var(--sp-2); } .step p{ margin-top:var(--sp-3); color:var(--text-2); font-size:var(--fs-sm); } .bg-ink .step p{ color:var(--on-dark-2); } /* Testimonials */ .quote .stars{ color:#f5b301; letter-spacing:2px; } .quote blockquote{ margin:var(--sp-4) 0 0; font-size:var(--fs-body); } .quote figcaption{ margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-4); } .quote .who b{ display:block; } .quote .who span{ font-size:0.78rem; color:var(--text-muted); } .quote .metric{ text-align:right; } /* v e k em bloco: sem isso os spans inline colavam número na palavra ("+28%conversão"). */ .quote .metric .v{ display:block; font-family:var(--f-mono); font-weight:600; font-size:1.5rem; color:var(--blue-700); } .quote .metric .k{ display:block; margin-top:2px; font-size:0.72rem; color:var(--text-muted); } /* Pricing - cards de altura igual, CTA alinhado entre os planos */ .tiers{ display:grid; gap:var(--sp-6); grid-template-columns:minmax(0,1fr); align-items:stretch; } @media(min-width:900px){ .tiers{ grid-template-columns:repeat(3,1fr); } } .tier{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-8); box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .tier:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } .tier.feat{ background:var(--ink); color:var(--on-dark); border-color:var(--blue); position:relative; box-shadow:var(--shadow-lg); } .tier .tbadge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--grad); color:#fff; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; padding:6px 13px; border-radius:var(--r-pill); } .tier h3{ font-size:var(--fs-h3); } .tier .tg{ margin-top:6px; font-size:var(--fs-sm); color:var(--text-2); min-height:2.9em; } .tier.feat .tg{ color:var(--on-dark-2); } /* Preço: flex + gap controlado - mata o "buraco" do espaço em fonte mono (um espaço de IBM Plex Mono a 2.6rem tem ~26px e parecia erro de layout). */ .price{ font-family:var(--f-mono); font-weight:600; font-size:2.6rem; margin-top:var(--sp-6); letter-spacing:-0.02em; display:flex; align-items:baseline; gap:10px; } .price .cur{ font-size:1.1rem; font-weight:600; color:var(--text-muted); } .tier.feat .price .cur{ color:var(--on-dark-muted); } .price span:not(.cur){ font-size:var(--fs-sm); color:var(--text-muted); font-weight:400; } .tier.feat .price span:not(.cur){ color:var(--on-dark-muted); } .tier .aud{ font-size:0.78rem; color:var(--text-muted); margin-top:4px; min-height:2.4em; } .tier .btn{ width:100%; margin-top:var(--sp-6); } .tier ul{ margin-top:var(--sp-8); display:grid; gap:13px; font-size:var(--fs-sm); align-content:start; } .tier ul li{ display:flex; gap:10px; color:var(--text-2); } .tier.feat ul li{ color:var(--on-dark-2); } .tier ul li .ic{ flex:none; width:18px; height:18px; color:var(--blue); margin-top:1px; } .tier.feat ul li .ic{ color:var(--blue-bright); } .note{ margin:var(--sp-8) auto 0; max-width:48rem; text-align:center; background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-6); font-size:var(--fs-sm); color:var(--text-2); box-shadow:var(--shadow-sm); } /* Comparison table */ .cmp{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; font-size:var(--fs-sm); } .cmp th,.cmp td{ padding:15px 16px; text-align:center; border-bottom:1px solid var(--border); } .cmp thead th{ background:var(--soft); } .cmp tbody th,.cmp tbody td:first-child{ text-align:left; } .cmp tbody th{ font-weight:600; } .cmp td .ic{ width:18px; height:18px; color:var(--blue); margin-inline:auto; } .scroll-x{ overflow-x:auto; } /* FAQ */ .faq{ max-width:50rem; margin-inline:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--white); overflow:hidden; box-shadow:var(--shadow-sm); } .faq-item{ border-bottom:1px solid var(--border); } .faq-item:last-child{ border-bottom:0; } .faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-6); background:none; border:0; font-family:var(--f-display); font-weight:600; font-size:1.06rem; color:var(--ink); } .faq-q .pm{ flex:none; color:var(--blue); transition:transform .2s var(--ease); font-size:1.3rem; line-height:1; } .faq-q[aria-expanded="true"] .pm{ transform:rotate(45deg); } .faq-a{ overflow:hidden; max-height:0; transition:max-height .25s var(--ease); } .faq-a p{ padding:0 var(--sp-6) var(--sp-6); color:var(--text-2); } /* CTA */ .cta{ position:relative; overflow:hidden; text-align:center; } .cta::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(47,182,255,0.22), transparent 70%); top:-200px; left:50%; transform:translateX(-50%); } .cta .in{ position:relative; max-width:44rem; margin-inline:auto; } .cta h2{ font-size:var(--fs-h2); } .cta p{ margin:var(--sp-4) auto 0; color:var(--on-dark-2); } .cta .hero-actions{ justify-content:center; margin-top:var(--sp-8); } /* Forms */ .fgrid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); } @media(min-width:640px){ .two{ grid-template-columns:1fr 1fr; } } .field label{ display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:6px; } .field input,.field select,.field textarea{ width:100%; min-height:52px; padding:13px 15px; font:inherit; font-size:var(--fs-sm); color:var(--text); background:var(--white); border:1.5px solid var(--border-strong); border-radius:var(--r); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea{ min-height:130px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,111,255,0.14); } .field .err{ display:none; margin-top:6px; font-size:0.8rem; color:#b42318; } .field.bad input,.field.bad select,.field.bad textarea{ border-color:#b42318; } .field.bad .err{ display:block; } .consent{ display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); color:var(--text-2); } .consent input{ width:18px; height:18px; margin-top:3px; flex:none; } .fnote{ font-size:var(--fs-sm); padding:13px 15px; border-radius:var(--r); } .fnote.ok{ background:#ecfdf3; color:#027a48; border:1px solid #a6f4c5; } .fnote.no{ background:#fef3f2; color:#b42318; border:1px solid #fecdca; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Breadcrumbs */ .crumbs{ font-size:var(--fs-sm); color:var(--text-muted); padding-block:var(--sp-6) 0; display:flex; gap:8px; flex-wrap:wrap; } .crumbs a:hover{ color:var(--blue-700); } .crumbs span[aria-current]{ color:var(--text); font-weight:600; } /* Footer */ .foot{ background:var(--ink); color:var(--on-dark-2); } .foot-grid{ display:grid; gap:var(--sp-12); padding-block:var(--sp-16); grid-template-columns:minmax(0,1fr); } @media(min-width:768px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; } } .foot h2{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:#fff; font-weight:500; margin-bottom:var(--sp-4); } .foot a:hover{ color:#fff; } .foot .fl{ display:grid; gap:11px; font-size:var(--fs-sm); } .foot address{ font-style:normal; font-size:var(--fs-sm); display:grid; gap:5px; } .areas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-3); } .areas li{ font-size:0.72rem; background:rgba(255,255,255,0.06); padding:4px 9px; border-radius:8px; } .foot-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-block:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between; font-size:0.78rem; color:var(--on-dark-muted); } .fwordmark{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; color:#fff; } .fwordmark b{ color:var(--blue-bright); } /* ===== Logo (mark novo) - header + rodapé ===== */ .brand img{ height:30px; width:auto; display:block; transition:transform .25s var(--ease); } .brand:hover img{ transform:translateY(-1px) scale(1.06); } .fbrand{ display:inline-flex; align-items:center; gap:11px; } .fmark{ height:30px; width:auto; display:block; } /* ===== Hero signature: auditoria de WhatsApp ao vivo (escuro → luz revela NPS) ===== */ .audit{ position:relative; background:var(--ink); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-lg); color:var(--on-dark); overflow:hidden; isolation:isolate; } .audit-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-bottom:var(--sp-4); margin-bottom:var(--sp-4); border-bottom:1px solid rgba(255,255,255,0.1); } .audit-head .who{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:var(--fs-sm); min-width:0; } .audit-head .who .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .audit-head .avatar{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-family:var(--f-mono); font-size:13px; } .audit-head .tag{ flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em; color:var(--on-dark-2); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); padding:5px 9px; border-radius:var(--r-pill); } .audit-head .tag .dot{ width:6px; height:6px; border-radius:50%; background:#36e08a; box-shadow:0 0 0 0 rgba(54,224,138,0.6); animation:pulse 2s infinite; } .bubbles{ display:flex; flex-direction:column; gap:var(--sp-3); } .bubble{ max-width:84%; padding:10px 14px; border-radius:14px; font-size:var(--fs-sm); line-height:1.5; opacity:0; transform:translateY(8px); } .audit.is-on .bubble{ animation:bubble-in .45s var(--ease) forwards; } .audit.is-on .bubble:nth-of-type(1){ animation-delay:.1s; } .audit.is-on .bubble:nth-of-type(2){ animation-delay:.45s; } .audit.is-on .bubble:nth-of-type(3){ animation-delay:.8s; } .audit.is-on .bubble:nth-of-type(4){ animation-delay:1.15s; } @keyframes bubble-in{ to{ opacity:1; transform:none; } } .bubble.them{ align-self:flex-start; background:rgba(255,255,255,0.08); border-bottom-left-radius:4px; } .bubble.me{ align-self:flex-end; background:var(--blue); border-bottom-right-radius:4px; } .bubble.flag{ align-self:flex-start; border:1.5px solid transparent; transition:border-color .6s var(--ease), background .6s var(--ease); } .annot{ opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-family:var(--f-mono); font-size:11px; color:var(--ink); background:var(--light); padding:5px 10px; border-radius:var(--r-pill); font-weight:600; } .audit-score{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,0.1); opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .audit-score .label{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; color:var(--on-dark-2); text-transform:uppercase; } .audit-score .val{ font-family:var(--f-mono); font-weight:600; font-size:1.75rem; line-height:1; } .audit-score .val b{ color:var(--light); } .beam{ position:absolute; top:-10%; bottom:-10%; left:-45%; width:45%; background:linear-gradient(100deg, transparent, rgba(255,226,173,0.20) 45%, rgba(255,194,75,0.30) 50%, rgba(255,226,173,0.20) 55%, transparent); filter:blur(6px); transform:skewX(-12deg); pointer-events:none; z-index:3; opacity:0; } .audit.is-on .beam{ animation:sweep 1.5s var(--ease) 1.4s forwards; } .audit.is-on .bubble.flag{ border-color:var(--light); background:rgba(255,194,75,0.12); transition-delay:1.9s; } .audit.is-on .annot{ opacity:1; transform:translateY(0); transition-delay:2.1s; } .audit.is-on .audit-score{ opacity:1; transform:translateY(0); transition-delay:2.3s; } @keyframes sweep{ 0%{ left:-45%; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:105%; opacity:0; } } /* ===== Barra de anúncio / urgência (gatilho dinâmico) ===== */ .announce{ background:var(--ink); color:var(--on-dark); text-align:center; font-size:var(--fs-sm); padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; position:relative; overflow:hidden; } .announce::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 200% at 50% 0%, rgba(47,182,255,0.18), transparent 70%); pointer-events:none; } .announce .hot{ position:relative; width:8px; height:8px; border-radius:50%; background:#36e08a; box-shadow:0 0 0 0 rgba(54,224,138,0.6); animation:pulse 2s infinite; } .announce span{ position:relative; } .announce strong{ color:#fff; font-weight:600; } .announce a{ position:relative; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; } /* ===== Faixa de garantia / risco-zero ===== */ .guarantee{ margin:var(--sp-8) auto 0; max-width:50rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-3) var(--sp-8); padding:var(--sp-4) var(--sp-6); background:var(--white); border:1px solid var(--border); border-radius:var(--r-pill); box-shadow:var(--shadow-sm); } .guarantee span{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:500; color:var(--text-2); } .guarantee .ic{ width:18px; height:18px; color:var(--success); flex:none; } /* ===== Card de contato destacado (gradiente azul vibrante + brilho) ===== */ .contact-card{ position:relative; color:#fff; border-radius:var(--r-lg); padding:var(--sp-8); box-shadow:var(--shadow-lg); overflow:hidden; background:linear-gradient(160deg, #122a57 0%, #0c1f45 52%, #0a1430 100%); } .contact-card::before{ content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(47,182,255,0.20), transparent 72%); top:-150px; right:-120px; pointer-events:none; } .contact-card::after{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad); } .contact-card > *{ position:relative; z-index:1; } .contact-card .feat-list{ margin-top:0; display:grid; gap:16px; } .frow .ftext .contact-card .feat-list li{ display:flex; gap:10px; color:rgba(255,255,255,0.92); line-height:1.55; } .frow .ftext .contact-card .feat-list .ic{ width:20px; height:20px; color:#5aa9ff; flex:none; margin-top:3px; } .contact-card b{ color:#fff; font-family:var(--f-display); font-weight:600; } .contact-card a{ color:#9ecbff; text-decoration:underline; text-underline-offset:2px; } .contact-card .muted{ color:rgba(255,255,255,0.66); } .contact-div{ border:0; border-top:1px solid rgba(255,255,255,0.18); margin:var(--sp-6) 0; } /* ===== Mobile-first reforço (maior fluxo de acesso) ===== */ @media (max-width: 640px){ .section{ padding-block:var(--sp-16); } .hero-grid{ padding-block:var(--sp-12) var(--sp-16); gap:var(--sp-10); } .hero h1{ font-size:clamp(2.3rem, 7vw, 3rem); } .hero-subhead{ font-size:clamp(1.2rem, 4.6vw, 1.5rem); margin-top:var(--sp-3); } .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ width:100%; } .nav{ height:62px; } /* Botões nunca estouram a tela: labels longas quebram linha no mobile (o nowrap global cortava "Quero a auditoria gratuita nas minhas co…"). */ .btn{ white-space:normal; text-align:center; } .btn-lg{ min-height:54px; } .audit{ padding:var(--sp-4); } .bubble{ max-width:90%; } .mock-wrap::after{ display:none; } .stats{ gap:var(--sp-6) 0; } .stats-intro{ font-size:var(--fs-body); margin-bottom:var(--sp-8); } .announce{ font-size:0.8rem; padding:8px 14px; } .guarantee{ flex-direction:column; align-items:flex-start; border-radius:16px; gap:var(--sp-3); } .card, .tier, .step, .fvisual, .contact-card{ padding:var(--sp-6); } .frow{ gap:var(--sp-10); } .foot-bottom{ flex-direction:column; gap:6px; } /* Cards de plano centralizados no mobile (título, preço, público e CTA); a checklist permanece à esquerda - leitura de lista é melhor alinhada. */ .tier{ text-align:center; padding-top:var(--sp-8); } .price{ justify-content:center; } .tier .tg,.tier .aud{ min-height:0; } .tier ul{ text-align:left; } .tier ul li{ justify-content:flex-start; } .quote figcaption{ flex-wrap:wrap; } .head--center{ text-align:center; } .head--center .eyebrow{ justify-content:center; } } /* Reveal */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* Newsletter (rodapé) */ .nl{ margin-top:var(--sp-6); max-width:24rem; } .nl-t{ font-size:var(--fs-sm); color:var(--on-dark-2); font-weight:600; } .nl-row{ display:flex; gap:8px; margin-top:10px; } .nl-row input{ flex:1; min-width:0; height:48px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); color:var(--on-dark); font:inherit; font-size:var(--fs-sm); } .nl-row input::placeholder{ color:var(--on-dark-muted); } .nl-note{ display:block; margin-top:8px; font-size:0.8rem; min-height:1em; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .stats .stat{ opacity:1; transform:none; } .badge .pulse, .audit-head .tag .dot{ animation:none; } .audit .bubble{ opacity:1; transform:none; animation:none; } .audit .beam{ display:none; } .audit .annot, .audit .audit-score{ opacity:1; transform:none; } .audit .bubble.flag{ border-color:var(--light); background:rgba(255,194,75,0.12); } } /* ========================================================================== BLOG - listagem (blog.html) e artigo (blog/*.html) Usa apenas os tokens do design system. Sem dependências novas. Regras de ouro: respiro generoso, divisão clara entre seções, mobile primeiro. ========================================================================== */ /* --- Cabeçalho das páginas de blog (centralizado, igual ao resto do site) --- */ .blog-head{ max-width:46rem; margin-inline:auto; text-align:center; } /* --- Listagem --- */ .posts{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-8); margin-top:var(--sp-16); } @media(min-width:860px){ .posts{ grid-template-columns:repeat(2,1fr); gap:var(--sp-10); } } /* O CARD INTEIRO é clicável (stretched link): o do título cobre todo o bloco via ::after. Mantém 1 link só - bom para SEO e leitor de tela - e evita a frustração de ter que mirar no texto do título. */ .post-card{ position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-10) var(--sp-8); background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .post-card h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; } .post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--blue); } .post-card h3{ font-family:var(--f-display); font-size:var(--fs-h3); line-height:1.28; letter-spacing:-0.015em; margin:0; } .post-card h3 a{ color:var(--text); text-decoration:none; transition:color .25s var(--ease); } /* O hover do bloco inteiro reage, não só o título */ .post-card:hover h3 a{ color:var(--blue); } .post-card p{ color:var(--text-2); line-height:1.7; margin:0; } .post-more{ margin-top:auto; padding-top:var(--sp-2); font-weight:600; color:var(--blue); transition:transform .25s var(--ease); } .post-card:hover .post-more{ transform:translateX(4px); } /* Teclado: o foco desenha o anel no card inteiro, não só no título */ .post-card:focus-within{ border-color:var(--blue); box-shadow:var(--shadow); } .post-card h3 a:focus-visible{ outline:none; } .post-card:focus-within::after{ content:""; position:absolute; inset:-4px; border-radius:calc(var(--r-lg) + 4px); outline:3px solid var(--blue-bright); outline-offset:0; pointer-events:none; } /* Metadados (categoria · data · tempo de leitura) */ .post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); font-family:var(--f-mono); font-size:0.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); line-height:1.6; } .post-meta > * + *::before{ content:"·"; margin-right:var(--sp-3); color:var(--border-strong); } .post-meta .post-tag::before{ content:none; } .post-tag{ display:inline-block; padding:5px 12px; border-radius:var(--r-pill); background:var(--soft-2); color:var(--blue-700); font-weight:600; letter-spacing:.04em; } /* --- Artigo: cabeçalho --- */ .post-hero{ max-width:74ch; margin-inline:auto; padding-bottom:var(--sp-10); border-bottom:1px solid var(--border); } .post-hero .eyebrow{ justify-content:flex-start; } .post-hero h1{ font-family:var(--f-display); font-weight:800; letter-spacing:-0.025em; font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem); line-height:1.12; margin-top:var(--sp-4); text-wrap:balance; } .post-hero .post-meta{ margin-top:var(--sp-6); } /* --- Artigo: corpo --- */ .post-body{ max-width:70ch; margin-inline:auto; } .post-body > * + *{ margin-top:var(--sp-6); } .post-body p, .post-body li{ font-size:1.0625rem; line-height:1.8; color:var(--text-2); } /* H2 = divisão de seção: hairline + respiro grande (o que faltava) */ .post-body h2{ font-family:var(--f-display); font-weight:800; letter-spacing:-0.02em; font-size:clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem); line-height:1.25; color:var(--text); text-wrap:balance; margin-top:var(--sp-16); padding-top:var(--sp-8); border-top:1px solid var(--border); } .post-body h2 + *{ margin-top:var(--sp-4); } .post-body h3{ font-family:var(--f-display); font-size:1.22rem; line-height:1.35; color:var(--text); margin-top:var(--sp-10); } .post-body h3 + *{ margin-top:var(--sp-3); } .post-body ul, .post-body ol{ padding-left:1.35rem; display:grid; gap:var(--sp-4); } .post-body ul li{ list-style:disc; } .post-body ol li{ list-style:decimal; } .post-body li::marker{ color:var(--blue); } .post-body li strong{ display:inline; } .post-body strong{ color:var(--text); font-weight:700; } /* Sublinhado vale para links DENTRO do texto; nunca para botões. */ .post-body a:not(.btn){ color:var(--blue); text-decoration:underline; text-underline-offset:3px; } .post-body .btn{ text-decoration:none; } .post-body blockquote{ margin-left:0; padding:var(--sp-6) var(--sp-8); background:var(--soft); border-left:4px solid var(--blue); border-radius:0 var(--r) var(--r) 0; } .post-body blockquote p{ color:var(--text); font-size:var(--fs-lead); line-height:1.6; } .post-body .callout{ padding:var(--sp-8); background:var(--grad-soft); border:1px solid var(--border); border-radius:var(--r-lg); } .post-body .callout p{ margin:0; } .post-body figure{ margin:0; } .post-body img{ width:100%; height:auto; border-radius:var(--r-lg); border:1px solid var(--border); } .post-body figcaption{ margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--text-muted); text-align:center; } /* Tabela rola no mobile em vez de estourar a largura */ .post-body .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .post-body table{ width:100%; min-width:34rem; border-collapse:collapse; font-size:var(--fs-sm); } .post-body th, .post-body td{ padding:14px 16px; border:1px solid var(--border); text-align:left; line-height:1.6; } .post-body th{ background:var(--soft); color:var(--text); font-weight:700; } /* --- CTA de fim de artigo --- */ .post-cta{ margin-top:var(--sp-20); padding:var(--sp-12) var(--sp-8); background:var(--ink); color:var(--on-dark); border-radius:var(--r-lg); text-align:center; } .post-cta h2{ color:var(--on-dark); margin-top:0; padding-top:0; border-top:0; font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem); line-height:1.25; text-wrap:balance; } .post-cta p{ color:var(--on-dark-2); max-width:52ch; margin:var(--sp-4) auto 0; line-height:1.7; } .post-cta .hero-actions{ justify-content:center; margin-top:var(--sp-8); } /* --- Mobile --- */ @media(max-width:640px){ .post-card{ padding:var(--sp-8) var(--sp-6); } .post-body{ max-width:100%; } .post-body h2{ margin-top:var(--sp-12); padding-top:var(--sp-6); } .post-body p, .post-body li{ font-size:1.0125rem; line-height:1.75; } .post-body .callout, .post-body blockquote{ padding:var(--sp-6); } .post-cta{ margin-top:var(--sp-16); padding:var(--sp-10) var(--sp-6); } .post-cta .hero-actions{ flex-direction:column; align-items:stretch; } .post-cta .hero-actions .btn{ width:100%; } .post-meta{ gap:var(--sp-2); font-size:0.7rem; } .post-meta > * + *::before{ margin-right:var(--sp-2); } } /* ========================================================================== Fundacao cross-device (aditiva) - notch/safe-area, midia e telas antigas. Nao redefine breakpoints nem o design; so preenche lacunas para celulares novos e antigos e navegadores mais velhos. ========================================================================== */ /* Estabiliza o tamanho de texto (iOS/Android antigos) e remove flash de toque. */ html { text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } /* Nenhuma imagem/video estoura a largura em telas pequenas ou navegadores antigos. */ img, video, canvas { max-width:100%; height:auto; } /* Safe-area: em paisagem o notch/camera nao corta o conteudo; navegadores sem env()/max() simplesmente ignoram e mantem o padding-inline original. */ .container { padding-left: max(var(--sp-6), env(safe-area-inset-left)); padding-right: max(var(--sp-6), env(safe-area-inset-right)); } /* Header fixo respeita a barra de status/notch no topo. */ .site-header { padding-top: env(safe-area-inset-top); } /* Preço em texto (Enterprise sob consulta), 2026-09-21. */ .tier .price.price--texto{ font-size:1.7rem; } /* ====== WhatsApp: bolha flutuante e link do rodapé, 2026-09-28 ====== A bolha é criada pelo assets/js/whatsapp.js SÓ quando existe número no rodapé. Sem JavaScript, o link do rodapé continua funcionando: a bolha é conveniência, não o único caminho. */ .zap-bolha { position: fixed; /* 20px literal, NAO var(--sp-5): esse token nao existe no sistema, e max() com variavel vazia vira declaracao invalida. A bolha caiu no fim da pagina em vez de flutuar, e so apareceu porque foi renderizada de verdade. */ right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 0; /* 56px: o mínimo confortável de toque. Menor que isso, o polegar erra. */ height: 56px; padding: 0 16px; border-radius: 999px; background: #25d366; color: #08331a; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35), 0 2px 8px rgba(10, 15, 30, 0.2); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease; } .zap-bolha svg { width: 26px; height: 26px; flex: 0 0 26px; } /* O rótulo abre no hover: parado, a bolha é discreta; com atenção, ela explica o que é. `max-width` em vez de `display` porque transição precisa de número. */ .zap-bolha-t { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease, margin-left 260ms ease; } .zap-bolha:hover, .zap-bolha:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(37, 211, 102, 0.45); } .zap-bolha:hover .zap-bolha-t, .zap-bolha:focus-visible .zap-bolha-t { max-width: 12rem; opacity: 1; margin-left: 10px; } /* No celular o rótulo fica sempre aberto: não existe hover em tela de toque, e um círculo verde sem palavra nenhuma é adivinhação. */ @media (max-width: 640px) { .zap-bolha { height: 52px; padding: 0 18px; } .zap-bolha-t { max-width: 12rem; opacity: 1; margin-left: 10px; } } @media (prefers-reduced-motion: reduce) { .zap-bolha, .zap-bolha-t { transition: none; } } /* Link de WhatsApp dentro do rodapé. */ .foot-zap { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .foot-zap svg { width: 15px; height: 15px; flex: 0 0 15px; } /* ====== Barra fixa de CTA no celular (paginas de oferta), 2026-09-29 ====== Compartilhada entre oferta.html e proposta.html: definida uma vez aqui em vez de copiada no