/* unica — folha unica do site. Tres familias de estilo, e cada uma com o seu proprio sistema: o marketing usa --bg-primary/--accent, a calculadora usa --bg/--ac (nomes curtos, mesmos valores) e as paginas de prosa redefinem --container. Alem disso .hero, h1, .wrap, .btn, header, footer e body colidiam entre elas. Por isso NENHUMA e global: cada uma vive no seu escopo — .site, .calc-page, .doc — e o escolhe qual. Global fica so o reset. Os tokens de cada familia sao redefinidos no proprio escopo, e os @keyframes ganham o prefixo da familia para nao se sobreporem. */ /* ============ reset, o unico global ============ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} /* ============ .site — home ============ */ .site{--bg-primary:#0B0809; --bg-secondary:#141011; --bg-tertiary:#1D1719; --bg-card:rgba(29,23,25,.6); --bg-glass:rgba(255,255,255,.035); --text-primary:#F5F1F0; --text-secondary:#9A9092; --text-muted:#7A7275; --accent:#FF1E2D; --accent-light:#FF5A64; --accent-dark:#C8101C; --accent-glow:rgba(255,30,45,.15); --accent-glow-strong:rgba(255,30,45,.26); --gradient-accent:linear-gradient(135deg,#FF1E2D 0%,#E5121F 50%,#C8101C 100%); --gradient-text:linear-gradient(135deg,#FF7A82 0%,#FF1E2D 100%); --gradient-radial:radial-gradient(ellipse at 50% 0%,rgba(255,30,45,.10) 0%,transparent 62%); --border-subtle:rgba(255,255,255,.07); --border-accent:rgba(255,30,45,.32); --shadow-md:0 8px 40px rgba(0,0,0,.5); --shadow-accent:0 10px 40px rgba(255,30,45,.20); --container:1120px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px; --t:250ms cubic-bezier(.4,0,.2,1);} .site *::before,.site *::after{box-sizing:border-box;margin:0;padding:0} .site{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden} .site img{max-width:100%;display:block} .site a{color:inherit;text-decoration:none} .site .wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px} .site section{padding:72px 0;position:relative} .site h1,.site h2,.site h3{line-height:1.15;letter-spacing:-.03em;font-weight:700} .site h1{font-size:clamp(2rem,5.2vw,3.4rem)} .site h2{font-size:clamp(1.6rem,3.6vw,2.4rem)} .site h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em} .site p{color:var(--text-secondary)} .site .ac{color:var(--accent)} .site .grad{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .site .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--accent-glow);border:1px solid var(--border-accent);padding:7px 14px;border-radius:var(--r-full)} .site .lead{font-size:clamp(1rem,1.9vw,1.15rem);max-width:62ch} .site .center{text-align:center} .site .center .lead{margin-left:auto;margin-right:auto} .site /* header */ header{position:sticky;top:0;z-index:50;background:rgba(11,8,9,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)} .site .hbar{display:flex;align-items:center;justify-content:space-between;height:64px} /* Navegação secundária: existe para o rastreador achar o blog e para a página não parecer um panfleto, sem competir com o botão. */ .site .hnav,.calc-page .hnav{display:flex;align-items:center;gap:22px} .site .hnav a:not(.btn),.calc-page .hnav a:not(.btn){font-size:.88rem;font-weight:600; color:var(--text-secondary);white-space:nowrap;transition:var(--t)} .site .hnav a:not(.btn):hover,.calc-page .hnav a:not(.btn):hover{color:var(--text-primary)} .site .logo{display:flex;align-items:center} .site .logo .logomark{display:block;height:auto} .site .logo.sm{justify-content:center;margin-bottom:14px} .site .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:var(--r-full);border:0;cursor:pointer;transition:var(--t);text-align:center} .site .btn-p{background:var(--gradient-accent);color:#1A0406;box-shadow:var(--shadow-accent)} .site .btn-p:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(255,30,45,.32)} .site .btn-s{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-subtle)} .site .btn-s:hover{border-color:var(--border-accent);color:var(--accent)} .site .btn-sm{padding:10px 18px;font-size:.85rem} .site .btn-full{width:100%} .site /* hero */ .hero{padding:64px 0 56px;background:var(--gradient-radial)} .site .hero h1{margin:22px 0 18px;max-width:17ch} .site .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} /* O hero perdeu o cartao da direita em 12/09. Com uma coluna so, o texto precisa de limite de largura: linha de 1120px nao se le. */ /* Centralizado, texto ainda alinhado a esquerda: com uma coluna so, o bloco encostado na esquerda deixa um vazio que parece falta de algo. */ .site .hero-solo{max-width:760px;margin:0 auto} .site .hero-solo h1{max-width:16ch} .site .hero-solo .lead{max-width:58ch} .site .hero ul{list-style:none;margin:26px 0 30px;display:grid;gap:12px} .site .hero li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--text-primary)} .site .tick{flex:0 0 22px;height:22px;border-radius:var(--r-full);background:var(--accent-glow);color:var(--accent);display:grid;place-items:center;font-size:.7rem;font-weight:700;margin-top:2px} .site .hero-note{font-size:.85rem;color:var(--text-muted);margin-top:14px} .site .card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-xl);padding:26px;backdrop-filter:blur(10px)} .site .stat-card{text-align:center} .site .stat-card .big{font-size:clamp(2.2rem,6vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1} .site .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border-subtle)} .site .stat-row div{font-size:.72rem;color:var(--text-muted);line-height:1.35} .site .stat-row b{display:block;font-size:1.05rem;color:var(--text-primary);font-weight:700} .site /* grids */ .grid{display:grid;gap:16px} .site .g2{grid-template-columns:repeat(2,1fr)} .site .g3{grid-template-columns:repeat(3,1fr)} .site .item{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:22px;transition:var(--t)} .site .item:hover{border-color:var(--border-accent);transform:translateY(-3px)} .site .item h3{margin-bottom:8px} .site .item p{font-size:.92rem} .site .num{width:34px;height:34px;border-radius:var(--r-full);background:var(--accent-glow);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-bottom:14px} .site /* calc */ .calc{background:linear-gradient(180deg,var(--bg-secondary),var(--bg-primary));border:1px solid var(--border-accent);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-md)} .site .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center} .site .field{margin-bottom:26px} .site .field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;font-weight:600;margin-bottom:12px} .site .field label b{color:var(--accent);font-size:1.1rem;font-weight:700} .site input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--r-full);background:var(--bg-tertiary);outline:0} .site input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--gradient-accent);cursor:pointer;box-shadow:0 0 0 6px var(--accent-glow)} .site input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#FF1E2D;cursor:pointer} .site .out{text-align:center;background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:26px} .site .out .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-weight:700} .site .out .val{font-size:clamp(2rem,6vw,2.9rem);font-weight:700;letter-spacing:-.03em;margin:6px 0 2px} .site .out .sub{font-size:.85rem;color:var(--text-secondary)} .site .out-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .site .out-split div{background:var(--bg-tertiary);border-radius:var(--r-md);padding:14px 10px} .site .out-split b{display:block;font-size:1.15rem;font-weight:700;color:var(--accent)} .site .out-split span{font-size:.72rem;color:var(--text-muted)} .site .disc{font-size:.75rem;color:var(--text-muted);margin-top:16px;text-align:center} .site /* proof */ .proof{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center} .site .quote{font-size:1.15rem;color:var(--text-primary);font-weight:500;line-height:1.5} .site .proof img{border-radius:var(--r-lg);border:1px solid var(--border-subtle);max-height:520px;width:auto;margin:0 auto;object-fit:contain} .site /* fit */ .fit{display:grid;grid-template-columns:1fr 1fr;gap:20px} .site .fit ul{list-style:none;display:grid;gap:12px;margin-top:16px} .site .fit li{display:flex;gap:10px;font-size:.93rem;color:var(--text-secondary)} .site .yes{border-color:var(--border-accent)} .site .mark{flex:0 0 20px;font-weight:700} .site .yes .mark{color:var(--accent)} .site .no .mark{color:#7A7275} .site /* form */ #aplicacao{background:linear-gradient(180deg,var(--bg-primary),var(--bg-secondary))} .site .form-box{max-width:660px;margin:34px auto 0;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-xl);padding:34px;backdrop-filter:blur(10px)} .site .steps{display:flex;gap:8px;margin-bottom:28px} .site .steps div{flex:1;height:4px;border-radius:var(--r-full);background:var(--bg-tertiary);transition:var(--t)} .site .steps div.on{background:var(--gradient-accent)} .site .step{display:none} .site .step.on{display:block;animation:site-fade .3s ease} @keyframes site-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .site .step-h{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:6px} .site .step h3{font-size:1.35rem;margin-bottom:22px} .site .f{margin-bottom:18px} .site .f label{display:block;font-size:.88rem;font-weight:600;margin-bottom:8px} .site .f input[type=text],.site .f input[type=email],.site .f input[type=tel],.site .f input[type=number],.site .f select,.site .f textarea{width:100%;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:14px 16px;color:var(--text-primary);font-family:inherit;font-size:.95rem;transition:var(--t)} .site .f input:focus,.site .f select:focus,.site .f textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)} .site .f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A9092' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center} .site .f textarea{min-height:96px;resize:vertical} .site .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .site /* Erro em âmbar,.site não em vermelho: numa página de acento vermelho o vermelho deixa de comunicar erro. Mesma decisão do --warn da calculadora. */ .ferr{font-size:.8rem;color:#FFB020;margin-top:7px} .site .f [aria-invalid="true"]{border-color:#FFB020} .site .combo{position:relative} .site .combo ul{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px; list-style:none;background:var(--bg-tertiary);border:1px solid var(--border-subtle); border-radius:var(--r-md);box-shadow:var(--shadow-md);max-height:262px;overflow-y:auto;display:none} .site .combo ul.on{display:block} .site .combo li{padding:10px 12px;border-radius:var(--r-sm);font-size:.93rem;cursor:pointer} .site .combo li[aria-selected="true"],.site .combo li:hover{background:var(--accent-glow);color:var(--text-primary)} .site .combo input:disabled{opacity:.5;cursor:not-allowed} .site .opts{display:grid;gap:10px} .site .opt{position:relative} .site .opt input{position:absolute;opacity:0} .site .opt span{display:block;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:14px 16px;font-size:.93rem;cursor:pointer;transition:var(--t)} .site .opt input:checked+span{border-color:var(--accent);background:var(--accent-glow);color:var(--text-primary);font-weight:600} .site .opt span:hover{border-color:var(--border-accent)} .site .nav{display:flex;gap:12px;margin-top:26px} .site .nav .btn{flex:1} .site .consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px; font-size:13.5px;line-height:1.55;color:var(--text-secondary);cursor:pointer} .site .consent input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer} .site .consent a{color:var(--accent-light)} .site .legal-links{margin-top:10px;font-size:13px} .site .legal-links a{color:var(--text-muted);text-decoration:none;margin-right:14px} .site .legal-links a:hover{color:var(--text-secondary)} .site .formnote{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:16px} .site .thanks{display:none;text-align:center} .site .thanks.on{display:block} .site .thanks .big{font-size:3rem;margin-bottom:10px} .site /* faq */ details{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:18px 22px;margin-bottom:12px;transition:var(--t)} .site details[open]{border-color:var(--border-accent)} .site summary{cursor:pointer;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:14px} .site summary::-webkit-details-marker{display:none} .site summary::after{content:'+';color:var(--accent);font-weight:700;font-size:1.3rem;line-height:1} .site details[open] summary::after{content:'–'} .site details p{margin-top:12px;font-size:.93rem} .site /* cta final */ .final{text-align:center;background:var(--gradient-radial)} .site footer{border-top:1px solid var(--border-subtle);padding:30px 0;text-align:center} .site footer p{font-size:.8rem;color:var(--text-muted)} .site .stamp{font-size:.68rem;color:#2A2224;margin-top:8px} @media(max-width:880px){.site .hero-grid,.site .calc-grid,.site .proof,.site .fit,.site .g3,.site .g2,.site .f2{grid-template-columns:1fr} .site section{padding:52px 0} .site .hero{padding:44px 0} .site .calc{padding:22px} .site .form-box{padding:24px 20px} .site .hbar .btn{display:none}} /* ============ .calc-page — calculadora ============ */ .calc-page{--bg:#0B0809; --bg2:#141011; --bg3:#1D1719; --card:rgba(29,23,25,.6); --glass:rgba(255,255,255,.035); --tx:#F5F1F0; --tx2:#9A9092; --tx3:#7A7275; --ac:#FF1E2D; --ac2:#C8101C; --glow:rgba(255,30,45,.15); --glow2:rgba(255,30,45,.26); --grad:linear-gradient(135deg,#FF1E2D 0%,#E5121F 50%,#C8101C 100%); --gradtx:linear-gradient(135deg,#FF7A82 0%,#FF1E2D 100%); --radial:radial-gradient(ellipse at 50% 0%,rgba(255,30,45,.10) 0%,transparent 62%); --bd:rgba(255,255,255,.07); --bda:rgba(255,30,45,.32); --warn:#FFB020; --ok:#FF1E2D; --r:12px; --rl:16px; --rx:24px; --rf:9999px; --t:250ms cubic-bezier(.4,0,.2,1);} .calc-page *::before,.calc-page *::after{box-sizing:border-box;margin:0;padding:0} .calc-page{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden} .calc-page a{color:inherit;text-decoration:none} .calc-page .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px} .calc-page header{position:sticky;top:0;z-index:50;background:rgba(11,8,9,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)} .calc-page .hbar{display:flex;align-items:center;justify-content:space-between;height:64px} .calc-page .logo{display:flex;align-items:center} .calc-page .logo .logomark{display:block;height:auto} .calc-page .logo.sm{justify-content:center;margin-bottom:12px} .calc-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:var(--rf);border:0;cursor:pointer;transition:var(--t)} .calc-page .btn-p{background:var(--grad);color:#1A0406;box-shadow:0 10px 40px rgba(255,30,45,.20)} .calc-page .btn-p:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(255,30,45,.32)} .calc-page .btn-s{background:var(--glass);color:var(--tx);border:1px solid var(--bd)} .calc-page .btn-s:hover{border-color:var(--bda);color:var(--ac)} .calc-page .btn-sm{padding:10px 18px;font-size:.85rem} .calc-page .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);background:var(--glow);border:1px solid var(--bda);padding:7px 14px;border-radius:var(--rf)} .calc-page .hero{padding:52px 0 34px;text-align:center;background:var(--radial)} .calc-page h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:20px 0 14px} .calc-page .grad{background:var(--gradtx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .calc-page .sub{color:var(--tx2);max-width:60ch;margin:0 auto;font-size:1.02rem} .calc-page .app{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px;align-items:start;padding-bottom:40px} .calc-page .panel{background:var(--card);border:1px solid var(--bd);border-radius:var(--rx);padding:26px;backdrop-filter:blur(10px)} .calc-page .panel-h{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--bd)} .calc-page .panel-h b{font-size:1.05rem;font-weight:700;letter-spacing:-.01em} .calc-page .panel-h span{font-size:.78rem;color:var(--tx3);margin-left:auto} .calc-page .dot{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)} .calc-page .ctrl{margin-bottom:24px} .calc-page .ctrl:last-child{margin-bottom:0} .calc-page .ctrl-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px} .calc-page .ctrl-top label{font-size:.9rem;font-weight:600} .calc-page .val{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:6px 12px;font-weight:700;color:var(--ac);font-size:1rem;min-width:96px;text-align:right;font-variant-numeric:tabular-nums} .calc-page .val input{width:100%;background:transparent;border:0;color:var(--ac);font-family:inherit;font-weight:700;font-size:1rem;text-align:right;outline:0;-moz-appearance:textfield} .calc-page .val input::-webkit-outer-spin-button,.calc-page .val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .calc-page input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--rf);background:var(--bg3);outline:0;cursor:pointer} .calc-page input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 0 0 5px var(--glow);transition:box-shadow var(--t)} .calc-page input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px var(--glow2)} .calc-page input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#FF1E2D;cursor:pointer} .calc-page .hint{font-size:.75rem;color:var(--tx3);margin-top:7px} .calc-page .seg{display:grid;grid-template-columns:1fr 1fr;gap:8px} .calc-page .seg button{background:var(--bg);border:1px solid var(--bd);color:var(--tx2);border-radius:var(--r);padding:12px;font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:var(--t)} .calc-page .seg button.on{border-color:var(--ac);background:var(--glow);color:var(--tx)} .calc-page .seg button:hover{border-color:var(--bda)} .calc-page .hero-out{background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid var(--bda);border-radius:var(--rx);padding:28px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.4)} .calc-page .hero-out .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--tx3);font-weight:700} .calc-page .hero-out .big{font-size:clamp(2.3rem,7vw,3.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:8px 0 4px;font-variant-numeric:tabular-nums} .calc-page .hero-out .cap{font-size:.88rem;color:var(--tx2)} .calc-page .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px} .calc-page .kpi{background:var(--glass);border:1px solid var(--bd);border-radius:var(--rl);padding:16px;text-align:left} .calc-page .kpi .k{font-size:.72rem;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:6px} .calc-page .kpi .v{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums} .calc-page .kpi .n{font-size:.72rem;color:var(--tx3)} .calc-page .v.ac{color:var(--ac)} .calc-page .v.wa{color:var(--warn)} .calc-page .chart{margin-top:20px;background:var(--glass);border:1px solid var(--bd);border-radius:var(--rl);padding:20px} .calc-page .chart-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px} .calc-page .chart-h b{font-size:.92rem;font-weight:700} .calc-page .chart-h span{font-size:.75rem;color:var(--tx3)} .calc-page .bars{display:flex;align-items:flex-end;gap:3px;height:150px} .calc-page .bar{flex:1;min-width:2px;background:linear-gradient(180deg,var(--ac),rgba(200,16,28,.35));border-radius:3px 3px 0 0;position:relative;transition:height var(--t)} .calc-page .bar.neg{background:linear-gradient(180deg,#3A3234,#2A2224)} .calc-page .bar:hover{filter:brightness(1.25)} .calc-page .bar:hover::after{content:attr(data-t);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--bda);color:var(--tx);font-size:.7rem;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:5} .calc-page .axis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--tx3);margin-top:8px} .calc-page .tbl{margin-top:20px;border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden} .calc-page .tbl summary{cursor:pointer;padding:14px 18px;font-size:.88rem;font-weight:700;background:var(--glass);list-style:none;display:flex;justify-content:space-between} .calc-page .tbl summary::-webkit-details-marker{display:none} .calc-page .tbl summary::after{content:'+';color:var(--ac);font-weight:700;font-size:1.2rem;line-height:1} .calc-page .tbl[open] summary::after{content:'–'} .calc-page .scroll{max-height:320px;overflow:auto} .calc-page table{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums} .calc-page th,.calc-page td{padding:10px 14px;text-align:right;border-top:1px solid var(--bd);white-space:nowrap} .calc-page th{position:sticky;top:0;background:var(--bg2);color:var(--tx3);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;z-index:2} .calc-page td:first-child,.calc-page th:first-child{text-align:left;color:var(--tx2)} .calc-page tr.pb td{background:var(--glow);color:var(--tx);font-weight:700} .calc-page .pos{color:var(--ac);font-weight:700} .calc-page .neg{color:var(--tx3)} .calc-page .resume{margin-top:20px;background:var(--glass);border:1px solid var(--bd);border-left:3px solid var(--ac);border-radius:var(--rl);padding:18px 20px;font-size:.95rem;color:var(--tx2)} .calc-page .resume b{color:var(--tx)} .calc-page .acts{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap} .calc-page .acts .btn{flex:1;min-width:190px} .calc-page .disc{font-size:.75rem;color:var(--tx3);margin-top:16px;line-height:1.5} .calc-page .cta{text-align:center;padding:60px 0 70px;background:var(--radial);border-top:1px solid var(--bd);margin-top:20px} .calc-page .cta h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;letter-spacing:-.02em} .calc-page .cta p{color:var(--tx2);max-width:56ch;margin:14px auto 26px} .calc-page footer{border-top:1px solid var(--bd);padding:26px 0;text-align:center} .calc-page footer p{font-size:.8rem;color:var(--tx3)} .calc-page .stamp{font-size:.68rem;color:#2A2224;margin-top:6px} @media(max-width:900px){.calc-page .app{grid-template-columns:1fr} .calc-page .hbar .btn{display:none} .calc-page .kpis{grid-template-columns:1fr 1fr} .calc-page .panel{padding:20px}} .calc-page .legal-links{margin-top:10px;font-size:13px} .calc-page .legal-links a{color:#7A7275;text-decoration:none;margin-right:14px} .calc-page .legal-links a:hover{color:#9A9092} /* ============ .doc — legais, obrigado, posts ============ */ /* As paginas de leitura sao claras, e o resto do site continua escuro. Nao e preferencia: texto escuro sobre fundo claro da 8,3:1 contra os 6,4:1 do escuro, e o lojista le isto no celular, muitas vezes com a luz da loja ou o sol batendo na tela. O escuro fica onde ele ganha — home, calculadora e a tela de obrigado, que sao impacto e nao leitura. O papel e quente, nao branco puro: branco puro reflete demais em tela de celular. A tinta e quase preta, nao preta, pela mesma razao ao contrario. O LINK USA --accent-dark. O vermelho da marca sobre papel da 3,7:1 e reprova — a mesma armadilha ja registrada no LEIA-ME sobre branco no botao. */ .doc{--bg-primary:#FBFAF9; --bg-secondary:#F4F1F0; --text-primary:#1A1618; --text-secondary:#514A4C; --text-muted:#6E6668; --accent:#C8101C; --accent-light:#C8101C; --border-subtle:#E6E1E0; --container:680px; --r-md:12px;} .doc{background:var(--bg-primary);color:var(--text-primary); font:400 17px/1.75 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; -webkit-font-smoothing:antialiased} .doc .wrap{max-width:var(--container);margin:0 auto;padding:56px 22px 96px} .doc header{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:28px;margin-bottom:40px;border-bottom:1px solid var(--border-subtle)} .doc .mark{font:700 21px/1 "Helvetica Neue",Helvetica,Arial;letter-spacing:-.02em} .doc .mark span{color:var(--accent)} .doc .back{color:var(--text-secondary);text-decoration:none;font-size:14px} .doc .back:hover{color:var(--text-primary)} .doc h1{font:700 clamp(28px,5vw,38px)/1.15 "Helvetica Neue",Helvetica,Arial;letter-spacing:-.02em;margin-bottom:10px} .doc .updated{color:var(--text-muted);font-size:13.5px;margin-bottom:36px} .doc h2{font:700 19px/1.3 "Helvetica Neue",Helvetica,Arial;letter-spacing:-.01em;margin:36px 0 12px} .doc h3{font:700 15.5px/1.4 "Helvetica Neue",Helvetica,Arial;margin:22px 0 8px} .doc p{color:var(--text-secondary);margin-bottom:14px} .doc ul{color:var(--text-secondary);margin:0 0 16px 20px} .doc li{margin-bottom:7px} .doc strong{color:var(--text-primary);font-weight:700} .doc em{color:var(--text-primary);font-style:italic} .doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:var(--bg-secondary);border:1px solid var(--border-subtle); border-radius:5px;padding:1px 5px;color:var(--text-primary)} .doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px;text-decoration-color:rgba(200,16,28,.4)} .doc a:hover{text-decoration-color:currentColor} .doc .box{background:var(--bg-secondary);border:1px solid var(--border-subtle); border-radius:var(--r-md);padding:18px 20px;margin:22px 0} .doc .box p:last-child{margin-bottom:0} .doc footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--border-subtle); color:var(--text-muted);font-size:13.5px} .doc footer a{color:var(--text-secondary);text-decoration:none;margin-right:16px} .doc footer a:hover{color:var(--text-primary)} /* ---- elementos que só os posts usam ---- As páginas legais nasceram sem tabela, bloco de citação ou imagem; os posts vivem deles. Tabela comparativa é o formato que mecanismo de resposta mais cita, então ela precisa ser legível de verdade, inclusive no celular — daí o overflow-x no lugar de deixar a página inteira rolar para o lado. */ /* Sombra que só aparece no lado em que ainda há tabela para rolar, e some ao chegar no fim. Sem ela o texto simplesmente é cortado no meio da palavra no celular, e o leitor não descobre que existe uma terceira coluna. `background-attachment: local` é o que faz as duas primeiras camadas acompanharem o conteúdo e as duas últimas ficarem paradas na borda. */ .doc .tabela{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch; background: linear-gradient(to right,var(--bg-primary) 30%,rgba(251,250,249,0)), linear-gradient(to right,rgba(251,250,249,0),var(--bg-primary) 70%) 100% 0, radial-gradient(farthest-side at 0 50%,rgba(26,22,24,.14),rgba(26,22,24,0)), radial-gradient(farthest-side at 100% 50%,rgba(26,22,24,.14),rgba(26,22,24,0)) 100% 0; background-repeat:no-repeat; background-size:40px 100%,40px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll} .doc table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px} .doc th,.doc td{padding:11px 14px;text-align:left;vertical-align:top; border-bottom:1px solid var(--border-subtle)} .doc thead th{color:var(--text-primary);font-weight:700;white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.16)} .doc tbody td{color:var(--text-secondary)} .doc tbody td:first-child{color:var(--text-primary)} .doc tbody tr:last-child td{border-bottom:0} .doc .paginacao{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin:40px 0 0;padding-top:22px;border-top:1px solid var(--border-subtle)} .doc .pag-item{font-size:14.5px;font-weight:700;text-decoration:none;color:var(--accent)} .doc .pag-item:hover{text-decoration:underline} .doc .pag-inativo{color:var(--text-muted);font-weight:400} .doc .pag-conta{font-size:13.5px;color:var(--text-muted)} .doc blockquote{margin:22px 0;padding:14px 18px;background:var(--bg-secondary); border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0; color:var(--text-secondary)} .doc blockquote p:last-child{margin-bottom:0} .doc h2{margin-top:34px} .doc h3{margin-top:24px} .doc ul,.doc ol{margin:0 0 16px 22px} .doc img{max-width:100%;height:auto;border-radius:var(--r-md);display:block;margin:22px 0} .doc hr{border:0;border-top:1px solid var(--border-subtle);margin:32px 0} /* ============ .obrigado — pagina de obrigado ============ Escopo proprio, e nao .doc: o h1 dela e gradiente e o fundo tem brilho radial. Debaixo de .doc essas duas regras venciam por vir depois e pintavam a politica de privacidade de vermelho. */ .obrigado{--bg-primary:#0B0809; --bg-secondary:#141011; --text-primary:#F5F1F0; --text-secondary:#9A9092; --text-muted:#7A7275; --accent:#FF1E2D; --accent-light:#FF5A64; --gradient-accent:linear-gradient(135deg,#FF1E2D 0%,#E5121F 50%,#C8101C 100%); --gradient-text:linear-gradient(135deg,#FF7A82 0%,#FF1E2D 100%); --gradient-radial:radial-gradient(ellipse at 50% 0%,rgba(255,30,45,.10) 0%,transparent 62%); --border-subtle:rgba(255,255,255,.07); --border-accent:rgba(255,30,45,.32); --bg-glass:rgba(255,255,255,.035); --shadow-accent:0 10px 40px rgba(255,30,45,.20); --container:760px; --r-md:12px; --r-xl:24px; --r-full:9999px; --t:250ms cubic-bezier(.4,0,.2,1);} .obrigado{background:var(--bg-primary);color:var(--text-primary); font:400 16px/1.7 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; -webkit-font-smoothing:antialiased;background-image:var(--gradient-radial); background-repeat:no-repeat} .obrigado .wrap{max-width:var(--container);margin:0 auto;padding:56px 22px 96px} .obrigado header{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:28px;margin-bottom:56px;border-bottom:1px solid var(--border-subtle)} .obrigado .mark{font:700 21px/1 "Helvetica Neue",Helvetica,Arial;letter-spacing:-.02em; text-decoration:none;color:inherit} .obrigado .mark span{color:var(--accent)} .obrigado .back{color:var(--text-secondary);text-decoration:none;font-size:14px} .obrigado .back:hover{color:var(--text-primary)} .obrigado .card{background:var(--bg-secondary);border:1px solid var(--border-subtle); border-radius:var(--r-xl);padding:44px 38px;text-align:center} .obrigado .tick{width:64px;height:64px;margin:0 auto 22px;border-radius:var(--r-full); display:flex;align-items:center;justify-content:center;font-size:30px; background:var(--gradient-accent);color:#1A0406;box-shadow:var(--shadow-accent)} .obrigado h1{font:700 clamp(26px,5vw,36px)/1.15 "Helvetica Neue",Helvetica,Arial; letter-spacing:-.02em;margin-bottom:14px; background:var(--gradient-text);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} .obrigado .lead{color:var(--text-secondary);max-width:46ch;margin:0 auto 30px} .obrigado .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:var(--r-full); border:0;cursor:pointer;transition:var(--t);text-align:center;text-decoration:none} .obrigado .btn-p{background:var(--gradient-accent);color:#1A0406;box-shadow:var(--shadow-accent)} .obrigado .btn-p:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(255,30,45,.32)} .obrigado .btn-s{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-subtle)} .obrigado .btn-s:hover{border-color:var(--border-accent);color:var(--accent)} .obrigado .acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .obrigado .next{margin-top:40px} .obrigado .next h2{font:700 17px/1.3 "Helvetica Neue",Helvetica,Arial;margin-bottom:16px} .obrigado .next ol{list-style:none;counter-reset:p;display:grid;gap:12px} .obrigado .next li{counter-increment:p;position:relative;padding:14px 18px 14px 52px; background:var(--bg-secondary);border:1px solid var(--border-subtle); border-radius:var(--r-md);color:var(--text-secondary);font-size:15px} .obrigado .next li::before{content:counter(p);position:absolute;left:17px;top:14px; width:22px;height:22px;border-radius:var(--r-full);background:rgba(255,30,45,.15); color:var(--accent-light);font-weight:700;font-size:12.5px; display:flex;align-items:center;justify-content:center} .obrigado .next b{color:var(--text-primary);font-weight:700} .obrigado footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--border-subtle); color:var(--text-muted);font-size:13.5px} .obrigado footer a{color:var(--text-secondary);text-decoration:none;margin-right:16px} .obrigado footer a:hover{color:var(--text-primary)} .obrigado .stamp{font-size:.68rem;color:#2A2224;margin-top:8px} @media(max-width:560px){.obrigado .card{padding:34px 22px} .obrigado .acoes .btn{width:100%}} /* ============ aviso de troca de marca ============ POR ULTIMO no arquivo, de proposito. A tarja aparece dentro de .site e de .doc, e as regras daquelas familias (.doc strong, .doc a) tem a mesma especificidade que as daqui — entao quem vem depois vence. Na primeira versao o bloco ficava no meio e o texto sumia na pagina clara: tinta escura sobre fundo escuro. */ .aviso-marca{display:flex;align-items:center;gap:14px;justify-content:center; background:#1A0406;border-bottom:1px solid rgba(255,30,45,.3); padding:11px 20px;font-size:14px;line-height:1.45;color:#F5F1F0} .aviso-marca p{margin:0;max-width:72ch;color:#F5F1F0} .aviso-marca strong{color:#FF7A82;font-weight:700} .aviso-marca a{color:#F5F1F0;text-decoration:underline;text-underline-offset:2px; text-decoration-color:rgba(245,241,240,.5)} .aviso-marca a:hover{text-decoration-color:currentColor} .aviso-marca button{background:none;border:0;color:#9A9092;font-size:22px; line-height:1;cursor:pointer;padding:0 4px;flex:none} .aviso-marca button:hover{color:#F5F1F0} @media(max-width:620px){.aviso-marca{font-size:13px;padding:10px 14px;align-items:flex-start}} /* Retratos de /quem-somos. Dentro de .doc, que é a familia clara. */ .doc .autor{display:flex;align-items:center;gap:18px;margin:34px 0 14px} .doc .autor img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none; background:#EDE9E8} .doc .autor h2{margin:0} .doc .autor .updated{margin:4px 0 0} @media(max-width:520px){ .doc .autor{gap:14px} .doc .autor img{width:68px;height:68px} }