/* FreshLinks — home.css (redesign da landing). Isolado: só a index usa este arquivo; as páginas internas seguem em styles.css + content.css. Fontes Baloo 2 + Hanken carregadas via Google Fonts no . Nav padronizado igual ao das páginas internas (styles.css). */ /* ===================================================================== FreshLinks — REDESIGN COMPLETO (proposta / mockup) Paleta OFICIAL da marca (cítricos + tinta) — sem verde/azul. Estilo: light corporativo + painéis escuros p/ autoridade de dados. Tipografia da marca (site atual): Baloo 2 (títulos) + Hanken Grotesk (corpo/tabelas). Elemento preservado: o COPO DE SUCO com a fruta sendo espremida. ===================================================================== */ :root{ /* cítricos oficiais */ --zest:#fb8611; --zest-deep:#e2730a; --marigold:#faac0b; --gold:#fad900; --yellow:#faf40a; --on-zest:#2a1404; /* tinta */ --ink:#121211; --ink-2:#1b1a18; --ink-3:#2b2924; --ink-line:rgba(244,241,234,.11); /* claros (neutros levemente quentes — hue da marca, baixa croma) */ --paper:#ffffff; --mist:#f7f5f0; --mist-2:#efece4; /* tinta de texto */ --seed:#16150f; --seed-soft:#5e5a51; --line:#e7e2d6; --line-strong:#d8d1c1; /* sobre escuro */ --cream:#f5f2ea; --cream-mut:#a7a49b; --cream-dim:#7c786f; /* dados */ --up:#fb8611; --down:#cf4a2c; --grid:rgba(22,21,15,.08); --grid-d:rgba(245,242,234,.09); --maxw:1220px; --r-xs:8px; --r-sm:11px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ff-display:"Baloo 2",system-ui,sans-serif; --ff:"Hanken Grotesk",system-ui,sans-serif; --z-nav:60; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--ff);color:var(--seed);background:var(--paper);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} ::selection{background:var(--gold);color:var(--seed)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .section{padding:clamp(35px,4.25vw,60px) 0} h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.06;letter-spacing:-.01em;color:var(--seed)} .data{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"ss01" 1} /* rótulo de seção discreto (não é eyebrow em toda seção; usado com parcimônia) */ .slabel{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--zest-deep)} .slabel::before{content:"";width:16px;height:2px;background:var(--zest);border-radius:2px} .shead{max-width:640px;margin-bottom:52px} .shead h2{font-size:clamp(30px,4.2vw,50px);margin:14px 0 14px;text-wrap:balance;font-weight:600} .shead p{font-size:18px;color:var(--seed-soft);text-wrap:pretty} .on-dark .shead h2{color:var(--cream)} .on-dark .shead p{color:var(--cream-mut)} .on-dark .slabel{color:var(--gold)} /* botões */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ff);font-weight:700;font-size:15px;padding:12px 20px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s,box-shadow .18s} .btn svg{width:17px;height:17px} .btn-zest{background:var(--zest);color:var(--on-zest);border-color:var(--zest);box-shadow:0 10px 24px -12px rgba(251,134,17,.85)} .btn-zest:hover{background:var(--zest-deep);border-color:var(--zest-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(251,134,17,.95)} .btn-ink{background:var(--ink);color:var(--cream);border-color:var(--ink)} .btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2);transform:translateY(-2px)} .btn-line{background:transparent;border-color:var(--line-strong);color:var(--seed)} .btn-line:hover{border-color:var(--seed);transform:translateY(-1px)} .btn-line-d{background:transparent;border-color:var(--ink-line);color:var(--cream)} .btn-line-d:hover{border-color:var(--cream);background:rgba(245,242,234,.06)} .btn-lg{padding:15px 28px;font-size:16px} .btn-sm{padding:9px 14px;font-size:13.5px} /* ===================================================================== NAV ===================================================================== */ /* Nav idêntico ao das páginas internas (styles.css) */ .nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,255,255,.88);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s} .nav.scrolled{border-color:var(--line);box-shadow:0 6px 20px rgba(40,30,10,.07)} .nav-inner{display:flex;align-items:center;gap:28px;height:72px;position:relative} .nav-collapse{display:contents} .brand{display:flex;align-items:center;flex-shrink:0} .brand img,.brand svg{height:28px;width:auto} .brand svg .lk{fill:var(--seed)} .nav-links{display:flex;align-items:center;gap:26px;margin-left:10px} .nav-links a{font-size:15px;font-weight:600;color:var(--seed-soft);transition:color .2s} .nav-links a:hover{color:var(--seed)} .nav-spacer{flex:1} .nav-cta{display:flex;align-items:center;gap:14px} .nav-link-plain{font-weight:700;font-size:15px;color:var(--seed)} .menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--seed)} .menu-toggle svg{width:26px;height:26px} /* ===================================================================== HERO — impacto de crescimento orgânico + copo de suco (preservado) ===================================================================== */ .hero{position:relative;background:var(--mist);border-bottom:1px solid var(--line);overflow:hidden} .hero::before{content:"";position:absolute;top:-14%;left:-8%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(251,134,17,.10),transparent 68%);pointer-events:none} .hero-grid{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;padding-top:clamp(44px,5.5vw,80px);padding-bottom:clamp(48px,6vw,84px)} .hero-grid>*{min-width:0} .hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 15px 6px 7px;font-size:13px;font-weight:600;color:var(--seed);margin-bottom:22px} .hero-badge b{font-weight:800;color:var(--zest-deep)} .hero-badge .av{display:flex} .hero-badge .av i{width:20px;height:20px;border-radius:50%;border:2px solid var(--paper);margin-left:-7px;display:block} .hero-badge .av i:nth-child(1){background:var(--zest)}.hero-badge .av i:nth-child(2){background:var(--marigold)}.hero-badge .av i:nth-child(3){background:var(--gold)} .hero h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,5.4vw,66px);line-height:1.04;letter-spacing:-.015em;margin-bottom:20px;text-wrap:balance} .hero h1 .u{color:var(--zest);position:relative;white-space:nowrap} .hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.11em;background:var(--gold);z-index:-1;border-radius:2px} .hero-sub{font-size:clamp(16.5px,1.7vw,19.5px);color:var(--seed-soft);max-width:500px;margin-bottom:26px} .hero-sub strong{color:var(--seed);font-weight:700} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero-trust{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:24px} .htr{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--seed-soft);font-weight:500} .htr svg{width:16px;height:16px;color:var(--zest)} /* visual do hero: prensa cítrica (preservada) alimentando um gráfico de subida */ .hero-visual{position:relative} .press-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px;box-shadow:0 34px 70px -34px rgba(30,22,8,.4)} .press-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .press-top .pt-l{font-family:var(--ff-display);font-weight:600;font-size:16px} .press-top .pt-r{font-size:12.5px;color:var(--seed-soft);font-weight:600} .press-stage{display:grid;grid-template-columns:164px 1fr;gap:20px;align-items:center} .press{width:164px;aspect-ratio:128/142} .press svg{width:100%;height:100%;overflow:visible} .press .fruit{transform-origin:50% 40%;animation:squeeze 4.4s var(--ease) infinite} .press .drop{transform-origin:center} @keyframes squeeze{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.955)}} @keyframes drip{0%{transform:translateY(0);opacity:0}14%{opacity:1}72%{opacity:1}100%{transform:translateY(74px);opacity:0}} .press .d1{animation:drip 4.4s var(--ease) infinite} .press .d2{animation:drip 4.4s var(--ease) .9s infinite} .press .d3{animation:drip 4.4s var(--ease) 1.9s infinite} /* mini gráfico de subida de ranking */ .rankbox{background:var(--ink);border-radius:var(--r-md);padding:15px 16px;color:var(--cream)} .rankbox .rb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .rankbox .rb-h span{font-size:11.5px;color:var(--cream-mut);font-weight:600} .rankbox .rb-h b{font-size:11.5px;color:var(--gold);font-weight:800;display:inline-flex;align-items:center;gap:4px} .rankbox .rb-h b svg{width:12px;height:12px} .rankchart{width:100%;height:66px;display:block} .rankbox .rb-f{display:flex;align-items:baseline;gap:8px;margin-top:8px} .rankbox .rb-f .big{font-family:var(--ff-display);font-weight:600;font-size:24px;color:var(--cream);letter-spacing:-.02em} .rankbox .rb-f .sm{font-size:12px;color:var(--cream-mut)} .rankbox .rb-f .from{text-decoration:line-through;color:var(--cream-dim)} /* etiquetas flutuantes */ .ftag{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 13px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 40px -18px rgba(30,22,8,.4)} .ftag .fi{width:32px;height:32px;border-radius:8px;background:var(--zest);color:var(--on-zest);display:grid;place-items:center;font-family:var(--ff-display);font-weight:600;font-size:13px;flex-shrink:0} .ftag .ft-t{font-family:var(--ff-display);font-weight:600;font-size:13px;line-height:1.1} .ftag .ft-s{font-size:11px;color:var(--seed-soft);font-weight:600} .ftag.t1{top:-40px;left:-16px;animation:floaty 5s var(--ease) infinite} .ftag.t2{bottom:-40px;right:-16px;animation:floaty 5s var(--ease) 1.5s infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* faixa de fontes/prova de confiança */ .trustbar{border-bottom:1px solid var(--line);background:var(--paper)} .trustbar .wrap{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;justify-content:center;padding:20px 26px} .trustbar .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#9a948a} .trustbar .src{font-family:var(--ff-display);font-weight:600;font-size:16px;color:#8c877d} .trustbar .sep{width:4px;height:4px;border-radius:50%;background:var(--line-strong)} /* ===================================================================== AUTHORITY BAND — painel escuro com números (dados) ===================================================================== */ .authband{background:var(--ink);color:var(--cream)} .authband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-line)} .abx{background:var(--ink);padding:40px 26px} .abx .n{font-family:var(--ff-display);font-weight:600;font-size:clamp(34px,4.4vw,50px);line-height:1;letter-spacing:-.03em;color:var(--cream);display:flex;align-items:baseline;gap:4px} .abx .n .plus{color:var(--zest)} .abx .l{font-size:13px;color:var(--cream-mut);margin-top:10px;font-weight:600} /* ===================================================================== FILTROS RÁPIDOS DE NICHOS ===================================================================== */ .quickfilter .qf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px} .qf-chips{display:flex;flex-wrap:wrap;gap:10px} .qchip{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);font-weight:600;font-size:14.5px;color:var(--seed);cursor:pointer;transition:border-color .18s,background .18s,transform .18s,color .18s} .qchip:hover{border-color:var(--zest);transform:translateY(-2px)} .qchip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)} .qchip .qc-ic{width:18px;height:18px;color:var(--zest)} .qchip.on .qc-ic{color:var(--gold)} .qchip .qc-n{font-size:12px;color:var(--seed-soft);font-weight:700} .qchip.on .qc-n{color:var(--cream-mut)} /* ===================================================================== MARKETPLACE — tabela redesenhada (painel escuro + tabela clara) ===================================================================== */ .market{background:var(--ink);color:var(--cream);position:relative;overflow:hidden} .market::before{content:"";position:absolute;top:-20%;right:-6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(251,134,17,.13),transparent 66%);pointer-events:none} .market .shead{position:relative} .mk-panel{position:relative;background:var(--paper);color:var(--seed);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)} .mk-toolbar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap} .mk-search{display:flex;align-items:center;gap:9px;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 14px;flex:1;min-width:200px} .mk-search svg{width:17px;height:17px;color:var(--seed-soft)} .mk-search input{border:0;background:transparent;outline:0;font-family:var(--ff);font-size:14.5px;color:var(--seed);width:100%} .mk-fbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-weight:600;font-size:13.5px;color:var(--seed);cursor:pointer;transition:border-color .18s} .mk-fbtn:hover{border-color:var(--zest)} .mk-fbtn svg{width:15px;height:15px;color:var(--seed-soft)} .mk-fbtn.active{background:var(--ink);color:var(--cream);border-color:var(--ink)} .mk-fbtn.active svg{color:var(--gold)} .mk-scroll{overflow-x:auto} .mk-table{width:100%;min-width:860px;border-collapse:collapse} .mk-table thead th{text-align:left;font-family:var(--ff);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--seed-soft);padding:13px 18px;border-bottom:1px solid var(--line);background:var(--mist);white-space:nowrap} .mk-table thead th.r{text-align:right} .mk-table thead th .sort{color:var(--zest);margin-left:3px} .mk-table tbody td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle} .mk-table tbody tr{transition:background .15s} .mk-table tbody tr:hover{background:#fffaf2} .mk-table tbody tr:last-child td{border-bottom:0} .site-cell{display:flex;align-items:center;gap:13px;min-width:210px} .site-fav{width:40px;height:40px;border-radius:10px;background:var(--mist);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)} .site-fav svg{width:19px;height:19px;color:var(--zest)} .site-dom{font-weight:700;font-size:15px} .site-tags{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap} .site-tags .t{font-size:11px;font-weight:600;color:var(--seed-soft);background:var(--mist);border:1px solid var(--line);border-radius:5px;padding:1px 7px} .mbar{display:flex;align-items:center;gap:9px} .mbar .track{width:52px;height:6px;background:var(--mist-2);border-radius:var(--r-pill);overflow:hidden} .mbar .fill{height:100%;background:var(--zest);border-radius:var(--r-pill)} .mbar .v{font-family:var(--ff-display);font-weight:600;font-size:15px;min-width:22px} .spark{width:78px;height:30px;display:block} .tr-val{font-weight:700;font-size:14px;text-align:right} .tr-val .up{color:var(--zest-deep);font-size:12px;font-weight:800} .price-cell{text-align:right} .price-cell .pv{font-family:var(--ff-display);font-weight:600;font-size:18px} .price-cell .pl{font-size:11px;color:var(--seed-soft)} .row-actions{display:flex;gap:8px;justify-content:flex-end} .ico-btn{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--seed);transition:border-color .18s,background .18s,color .18s,transform .18s} .ico-btn:hover{border-color:var(--zest)} .ico-btn.add{background:var(--ink);color:var(--cream);border-color:var(--ink)} .ico-btn.add:hover{background:var(--zest);color:var(--on-zest);border-color:var(--zest);transform:scale(1.05)} .ico-btn svg{width:17px;height:17px} .mk-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px} .mk-foot .cnt{font-size:13.5px;color:var(--seed-soft);font-weight:600} .mk-foot .cnt b{color:var(--seed);font-weight:800} /* ===================================================================== TRANSPARÊNCIA — veja os dados antes de comprar ===================================================================== */ .transp .tp-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center} .tp-copy ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin:26px 0 30px} .tp-copy li{display:flex;gap:13px;align-items:flex-start} .tp-copy li .ic{width:38px;height:38px;border-radius:10px;background:var(--mist);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0} .tp-copy li .ic svg{width:19px;height:19px;color:var(--zest)} .tp-copy li b{font-family:var(--ff-display);font-weight:600;font-size:16.5px;display:block;margin-bottom:2px} .tp-copy li span{font-size:14.5px;color:var(--seed-soft)} /* card de detalhe do site */ .detail-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 70px -38px rgba(30,22,8,.4);overflow:hidden} .dc-head{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid var(--line)} .dc-fav{width:46px;height:46px;border-radius:11px;background:var(--mist);border:1px solid var(--line);display:grid;place-items:center} .dc-fav svg{width:22px;height:22px;color:var(--zest)} .dc-dom{font-family:var(--ff-display);font-weight:600;font-size:19px} .dc-cat{font-size:13px;color:var(--seed-soft)} .dc-badge{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--on-zest);background:var(--gold);border-radius:var(--r-pill);padding:5px 11px} .dc-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)} .dc-m{padding:18px 20px;border-right:1px solid var(--line)} .dc-m:last-child{border-right:0} .dc-m .mv{font-family:var(--ff-display);font-weight:600;font-size:23px;letter-spacing:-.02em} .dc-m .ml{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--seed-soft);margin-top:3px} .dc-chart{padding:22px 24px} .dc-chart .ct-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .dc-chart .ct-h span{font-family:var(--ff-display);font-weight:600;font-size:15px} .dc-chart .ct-h b{font-size:12.5px;color:var(--zest-deep);font-weight:800} .area{width:100%;height:120px;display:block} .dc-foot{display:flex;align-items:center;gap:10px;padding:18px 24px;border-top:1px solid var(--line);background:var(--mist)} .dc-foot .df-price{margin-right:auto} .dc-foot .df-price .pv{font-family:var(--ff-display);font-weight:600;font-size:22px} .dc-foot .df-price .pl{font-size:11.5px;color:var(--seed-soft)} /* ===================================================================== COMO FUNCIONA ===================================================================== */ .how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step} .hstep{position:relative;padding:26px 22px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);transition:border-color .22s,transform .22s var(--ease)} .hstep:hover{border-color:var(--zest);transform:translateY(-4px)} .hstep .hs-n{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--on-zest);background:var(--zest);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;margin-bottom:16px} .hstep .hs-ic{width:26px;height:26px;margin-bottom:12px;color:var(--seed)} .hstep .hs-ic svg{width:100%;height:100%} .hstep h3{font-size:18px;font-weight:600;margin-bottom:7px} .hstep p{font-size:14px;color:var(--seed-soft)} /* ===================================================================== PROVA SOCIAL — case + depoimentos (painel escuro) ===================================================================== */ .social{background:var(--ink);color:var(--cream)} .social .shead h2{color:var(--cream)} .sp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px} /* case card grande */ .case{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-lg);padding:30px 32px;position:relative;overflow:hidden} .case::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 100% 0%,rgba(251,134,17,.14),transparent 60%)} .case-top{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:6px} .case-top .logo{width:40px;height:40px;border-radius:10px;background:var(--zest);color:var(--on-zest);display:grid;place-items:center;font-family:var(--ff-display);font-weight:600;font-size:17px} .case-top .who b{font-family:var(--ff-display);font-weight:600;font-size:16px;color:var(--cream);display:block} .case-top .who span{font-size:12.5px;color:var(--cream-mut)} .case-metric{position:relative;display:flex;align-items:baseline;gap:12px;margin:18px 0 6px} .case-metric .big{font-family:var(--ff-display);font-weight:600;font-size:clamp(40px,5vw,62px);letter-spacing:-.03em;color:var(--zest)} .case-metric .cap{font-size:14px;color:var(--cream-mut);max-width:180px} .case-area{width:100%;height:130px;display:block;position:relative;margin-top:8px} .case-x{position:relative;display:flex;justify-content:space-between;font-size:11px;color:var(--cream-dim);margin-top:8px;font-weight:600} /* coluna de depoimentos + volume */ .sp-side{display:flex;flex-direction:column;gap:22px} .quote{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-lg);padding:26px 28px} .quote p{font-size:15.5px;color:var(--cream);line-height:1.55;margin-bottom:16px} .quote .qby{display:flex;align-items:center;gap:11px} .quote .qav{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--marigold),var(--zest));flex-shrink:0} .quote .qby b{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--cream);display:block} .quote .qby span{font-size:12.5px;color:var(--cream-mut)} .qstars{display:flex;gap:2px;margin-bottom:12px} .qstars svg{width:15px;height:15px;color:var(--gold)} .volume{background:var(--zest);color:var(--on-zest);border-radius:var(--r-lg);padding:26px 28px;display:flex;align-items:center;gap:18px} .volume .vn{font-family:var(--ff-display);font-weight:600;font-size:clamp(34px,4vw,46px);line-height:1;letter-spacing:-.03em} .volume .vl{font-size:14px;font-weight:700;line-height:1.3} /* ===================================================================== CTA FINAL — conversão + benefícios/garantias ===================================================================== */ .finalcta{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--zest);color:var(--on-zest);padding:clamp(48px,6.5vw,84px) clamp(28px,5vw,72px);text-align:center} .finalcta::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 100% at 0% 100%,rgba(250,217,0,.55),transparent 55%),radial-gradient(45% 100% at 100% 0%,rgba(250,244,10,.4),transparent 55%)} .finalcta h2{position:relative;font-size:clamp(32px,4.6vw,54px);color:var(--on-zest);margin-bottom:14px;font-weight:700;text-wrap:balance} .finalcta p{position:relative;font-size:18px;color:#7a3f0b;max-width:540px;margin:0 auto 28px} .finalcta .fc-actions{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px} .finalcta .btn-line{border-color:rgba(42,20,4,.32);color:var(--on-zest)} .finalcta .btn-line:hover{border-color:var(--on-zest);background:rgba(255,255,255,.28)} .fc-guar{position:relative;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center} .fc-guar span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--on-zest)} .fc-guar svg{width:17px;height:17px} /* ===================================================================== FOOTER (sitemap preservado) ===================================================================== */ .footer{background:var(--ink);color:var(--cream-mut);padding:74px 0 34px} .footer-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid var(--ink-3)} /* logo p/ fundo escuro (arquivo oficial horizontal.svg): símbolo colorido, "fresh" em off-white #f6f6f6 e "links" em laranja */ .footer .fbrand svg{height:28px;margin-bottom:18px} .footer .fbrand svg .lk{fill:#f6f6f6} .footer .fbrand p{font-size:14px;max-width:290px} .fcol h4{font-family:var(--ff);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a8377;margin-bottom:16px;font-weight:800} .fcol a{display:block;font-size:14px;color:var(--cream-mut);padding:6px 0;transition:color .2s} .fcol a:hover{color:var(--gold)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:#857e72;flex-wrap:wrap;gap:12px} /* ===================================================================== DOIS PÚBLICOS — feito para quem compra e para quem publica ===================================================================== */ .audience .aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .apanel{border-radius:var(--r-lg);padding:42px 40px;position:relative;overflow:hidden} .apanel.buy{background:var(--paper);border:1px solid var(--line)} .apanel.sell{background:var(--ink);color:var(--cream)} .apanel.sell::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 60% at 100% 0%,rgba(251,134,17,.16),transparent 60%)} .apanel .a-tag{position:relative;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:800} .apanel.buy .a-tag{color:var(--zest-deep)} .apanel.sell .a-tag{color:var(--gold)} .apanel h3{position:relative;font-size:clamp(23px,2.7vw,31px);margin:12px 0 12px} .apanel.sell h3{color:var(--cream)} .apanel>p{position:relative;font-size:15.5px;color:var(--seed-soft);margin-bottom:22px;max-width:430px} .apanel.sell>p{color:var(--cream-mut)} .apanel ul{position:relative;list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:26px} .apanel li{display:flex;gap:11px;font-size:15px;align-items:flex-start} .apanel li svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--zest)} .apanel.sell li svg{color:var(--gold)} .apanel .a-cta{position:relative;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .apanel .a-more{font-weight:700;font-size:14px;color:var(--zest-deep)} .apanel.sell .a-more{color:var(--gold)} .a-wallet{position:relative;display:flex;align-items:center;gap:14px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-md);padding:14px 16px;margin-bottom:24px} .a-wallet .aw-ic{width:38px;height:38px;border-radius:9px;background:rgba(251,134,17,.18);display:grid;place-items:center;flex-shrink:0} .a-wallet .aw-ic svg{width:19px;height:19px;color:var(--gold)} .a-wallet .aw-v{font-family:var(--ff-display);font-weight:700;font-size:19px;color:var(--cream);line-height:1.1} .a-wallet .aw-l{font-size:12px;color:var(--cream-mut)} /* ===================================================================== BLOG — listagem de conteúdos ===================================================================== */ .blog .blog-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:stretch} .post-feat{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .22s,transform .22s var(--ease)} .post-feat:hover{border-color:var(--zest);transform:translateY(-4px)} .pf-media{height:208px;background:var(--ink);position:relative;overflow:hidden;display:grid;place-items:center} .pf-media::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 90% at 78% 8%,rgba(251,134,17,.4),transparent 60%)} .pf-media svg{width:94px;height:94px;position:relative} .pf-body{padding:28px 30px;display:flex;flex-direction:column;flex:1} .pf-cat{font-family:var(--ff);font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--zest-deep)} .pf-body h3{font-size:clamp(21px,2.3vw,26px);margin:10px 0 10px} .pf-body p{color:var(--seed-soft);font-size:15px;margin-bottom:18px} .pf-meta{display:flex;gap:18px;font-size:13px;color:var(--seed-soft);font-weight:600;margin-top:auto} .pf-meta span{display:inline-flex;align-items:center;gap:6px} .pf-meta svg{width:15px;height:15px;color:var(--zest)} .post-list{display:flex;flex-direction:column;gap:14px} .post-row{display:flex;align-items:center;gap:15px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:17px 20px;flex:1;transition:border-color .2s,transform .2s var(--ease)} .post-row:hover{border-color:var(--zest);transform:translateX(3px)} .pr-thumb{width:46px;height:46px;border-radius:10px;background:var(--mist);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0} .pr-thumb svg{width:22px;height:22px} .pr-main{min-width:0} .pr-cat{font-family:var(--ff);font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--zest-deep)} .pr-tt{font-weight:700;font-size:15.5px;font-family:var(--ff-display);line-height:1.2;margin-top:1px;letter-spacing:-.01em} .pr-arrow{margin-left:auto;color:var(--zest);flex-shrink:0} .pr-arrow svg{width:18px;height:18px} .blog-more{margin-top:28px;display:flex;justify-content:center} .reveal{opacity:1} .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)} .js .reveal.in{opacity:1;transform:none} /* responsive */ @media(max-width:980px){ .wrap{padding:0 32px} .hero-grid{grid-template-columns:1fr;gap:40px} /* em 1 coluna as etiquetas saem dos cantos e viram uma linha abaixo do card (sem cobrir texto) */ .hero-visual{max-width:460px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px} .press-card{flex:1 1 100%;max-width:100%;margin:0} .ftag{position:static;flex:1 1 180px;animation:none} .ftag.t1,.ftag.t2{inset:auto} .authband .wrap{grid-template-columns:repeat(2,1fr)} .market .mk-panel{border-radius:var(--r-md)} .transp .tp-grid{grid-template-columns:1fr;gap:32px} .how-grid{grid-template-columns:repeat(2,1fr)} .sp-grid{grid-template-columns:1fr} .audience .aud-grid{grid-template-columns:1fr} .blog .blog-grid{grid-template-columns:1fr} .footer-top{grid-template-columns:repeat(2,1fr);gap:32px}.footer-top .fbrand{grid-column:1/-1} } @media(max-width:680px){ body{font-size:16px} .wrap{padding:0 22px} .menu-toggle{display:block;margin-left:auto} .nav-collapse{display:none} .nav-mobile-open .nav-collapse{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:16px 22px 22px;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(40,30,10,.12)} .nav-mobile-open .nav-links{display:flex;flex-direction:column;gap:2px;margin-left:0} .nav-mobile-open .nav-links a{padding:11px 0;font-size:16px} .nav-mobile-open .nav-spacer{display:none} .nav-mobile-open .nav-cta{display:flex;flex-direction:column;gap:10px;margin-top:12px} .nav-mobile-open .nav-cta .btn{justify-content:center} .nav-mobile-open .nav-cta .nav-link-plain{text-align:center;padding:11px 0} .authband .wrap{grid-template-columns:1fr 1fr} .dc-metrics{grid-template-columns:repeat(2,1fr)}.dc-m:nth-child(2){border-right:0}.dc-m:nth-child(1),.dc-m:nth-child(2){border-bottom:1px solid var(--line)} .how-grid{grid-template-columns:1fr} .hero{border-bottom:1px solid var(--line)} .hero-grid{padding-top:22px;padding-bottom:42px;gap:32px} .hero h1{font-size:clamp(34px,8.5vw,46px)} .hero-sub{font-size:16.5px} .press-card{padding:20px 18px 18px;max-width:100%} .press-stage{grid-template-columns:120px 1fr;gap:14px} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}} *:focus-visible{outline:3px solid var(--zest);outline-offset:2px;border-radius:5px}