/* ============================================================ iHub — Kit Visual (tema dark + verde da marca) Cores: verde #0dc282 · fundo escuro · texto claro Como usar: veja COMO-USAR.md. Todas as classes usam prefixo ih- pra não conflitar com o CSS que o site já tem. ============================================================ */ :root{ --ih-verde:#0dc282; --ih-verde-esc:#16d698; --ih-verde-claro:#13251d; --ih-verde-txt:#45e0a9; --ih-titulo:#f3f8f6; --ih-texto:#cfdad5; --ih-muted:#869a91; --ih-bg:#0a110e; --ih-card:#121a16; --ih-borda:#212d27; --ih-borda-forte:#2d3b34; --ih-radius:16px; --ih-sombra:0 1px 2px rgba(0,0,0,.25), 0 14px 34px rgba(0,0,0,.42); --ih-fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; } /* Aplique class="ih-page" no (ou num wrapper) pra ativar o tema */ .ih-page{ background:var(--ih-bg); color:var(--ih-texto); font-family:var(--ih-fonte); line-height:1.55; margin:0; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .ih-page a{color:var(--ih-verde-esc); text-decoration:none;} .ih-page a:hover{text-decoration:underline;} .ih-page *,.ih-page *::before,.ih-page *::after{box-sizing:border-box;} .ih-wrap{max-width:1060px; margin:0 auto; padding:0 22px;} .ih-sec{margin:62px 0;} /* ---------- Botões ---------- */ .ih-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ih-verde); color:#fff; border:none; border-radius:12px; padding:12px 20px; font-size:14.5px; font-weight:700; cursor:pointer; text-decoration:none; font-family:inherit; transition:background .15s, transform .05s, box-shadow .15s;} .ih-btn:hover{background:var(--ih-verde-esc); text-decoration:none; color:#fff;} .ih-btn:active{transform:translateY(1px);} .ih-btn--xl{padding:15px 26px; font-size:16px;} .ih-btn--glow{box-shadow:0 10px 28px rgba(13,194,130,.42);} .ih-btn--glow:hover{box-shadow:0 12px 34px rgba(13,194,130,.55);} .ih-btn--ghost{background:transparent; border:1px solid var(--ih-borda-forte); color:var(--ih-texto);} .ih-btn--ghost:hover{background:#141d18; border-color:var(--ih-verde); color:var(--ih-texto);} .ih-btn--dark{background:#06130e; color:#fff;} .ih-btn--dark:hover{background:#020806;} /* ---------- Etiqueta / pill ---------- */ .ih-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(13,194,130,.12); border:1px solid rgba(13,194,130,.32); color:var(--ih-verde-txt); font-weight:700; font-size:12.5px;} /* ---------- Títulos de seção ---------- */ .ih-eyebrow{text-align:center; color:var(--ih-verde-txt); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.14em;} .ih-h2{text-align:center; font-size:31px; font-weight:800; color:var(--ih-titulo); letter-spacing:-.02em; margin:8px 0 8px;} .ih-lead{text-align:center; color:var(--ih-muted); max-width:520px; margin:0 auto 32px; font-size:15.5px;} /* ---------- Hero ---------- */ .ih-hero{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:34px 0 24px;} .ih-hero::before{content:""; position:absolute; z-index:0; top:-140px; right:-100px; width:600px; height:600px; background:radial-gradient(circle, rgba(13,194,130,.26), rgba(13,194,130,0) 62%); pointer-events:none;} .ih-hero>*{position:relative; z-index:1;} .ih-hero h1{font-size:46px; line-height:1.06; letter-spacing:-.03em; margin:20px 0 0; color:#fff; font-weight:800;} .ih-grad{background:linear-gradient(120deg,#0dc282,#4fe6c6 55%,#28c8e0); -webkit-background-clip:text; background-clip:text; color:transparent;} .ih-hero .ih-sub{font-size:17px; line-height:1.55; color:var(--ih-muted); max-width:480px; margin:18px 0 0;} .ih-cta{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 0;} .ih-trust{display:flex; align-items:center; gap:9px; margin:20px 0 0; color:var(--ih-muted); font-size:13px; flex-wrap:wrap;} .ih-stars{color:#ffcf4a; letter-spacing:2px;} /* Imagem/arte à direita do hero (opcional) */ .ih-hero-art{position:relative; justify-self:center; border-radius:20px; overflow:hidden; border:1px solid var(--ih-borda); box-shadow:var(--ih-sombra); max-width:100%;} .ih-hero-art::before{content:""; position:absolute; inset:-40px -30px; z-index:-1; background:radial-gradient(circle at 50% 42%, rgba(13,194,130,.4), rgba(13,194,130,0) 66%);} .ih-hero-art img{display:block; width:100%; height:auto;} /* ---------- Faixa de números ---------- */ .ih-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:30px 0 8px; border:1px solid var(--ih-borda); border-radius:16px; padding:20px; background:linear-gradient(180deg,#111a16,#0d1411);} .ih-stat{text-align:center;} .ih-stat b{display:block; font-size:22px; color:#fff; font-weight:800;} .ih-stat span{color:var(--ih-muted); font-size:12.5px;} /* ---------- Cards / recursos ---------- */ .ih-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px;} .ih-card{background:var(--ih-card); border:1px solid var(--ih-borda); border-radius:18px; padding:24px; transition:transform .15s, border-color .15s, box-shadow .15s;} .ih-card:hover{transform:translateY(-4px); border-color:rgba(13,194,130,.5); box-shadow:0 16px 40px rgba(0,0,0,.42);} .ih-ico{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; background:linear-gradient(135deg, rgba(13,194,130,.28), rgba(18,183,214,.16)); border:1px solid rgba(13,194,130,.3);} .ih-card b{display:block; color:#fff; font-size:16px; margin:15px 0 6px;} .ih-card p{margin:0; color:var(--ih-muted); font-size:14px; line-height:1.5;} /* ---------- Passos ---------- */ .ih-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;} .ih-step{background:var(--ih-card); border:1px solid var(--ih-borda); border-radius:18px; padding:24px;} .ih-num{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#04140e; font-size:18px; background:linear-gradient(135deg,#0dc282,#4fe6c6); box-shadow:0 8px 22px rgba(13,194,130,.4);} .ih-step b{display:block; color:#fff; margin:15px 0 6px; font-size:16px;} .ih-step p{margin:0; color:var(--ih-muted); font-size:14px; line-height:1.5;} /* ---------- Preço ---------- */ .ih-price{max-width:440px; margin:0 auto; border-radius:24px; padding:2px; background:linear-gradient(140deg, rgba(13,194,130,.9), rgba(40,200,224,.45), rgba(13,194,130,.12));} .ih-price-inner{background:#0e1613; border-radius:22px; padding:34px 28px; text-align:center;} .ih-amt{font-size:52px; font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; margin-top:14px;} .ih-amt small{font-size:17px; color:var(--ih-muted); font-weight:600;} .ih-list{list-style:none; padding:0; margin:22px 0; text-align:left;} .ih-list li{padding:10px 0 10px 32px; position:relative; color:var(--ih-texto); font-size:14.5px; border-bottom:1px dashed var(--ih-borda);} .ih-list li:last-child{border-bottom:none;} .ih-list li::before{content:"✓"; position:absolute; left:0; top:9px; width:21px; height:21px; border-radius:50%; background:rgba(13,194,130,.16); color:var(--ih-verde-txt); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;} /* ---------- FAQ (acordeão) ---------- */ .ih-faq{max-width:640px; margin:0 auto;} .ih-faq details{border:1px solid var(--ih-borda); border-radius:14px; padding:2px 18px; margin:12px 0; background:var(--ih-card); transition:border-color .15s;} .ih-faq details[open]{border-color:rgba(13,194,130,.42);} .ih-faq summary{list-style:none; cursor:pointer; font-weight:700; color:#fff; padding:15px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px;} .ih-faq summary::-webkit-details-marker{display:none;} .ih-faq summary::after{content:"+"; color:var(--ih-verde-txt); font-size:22px; font-weight:400; line-height:1;} .ih-faq details[open] summary::after{content:"–";} .ih-faq p{margin:0 0 16px; color:var(--ih-muted); font-size:14.5px; line-height:1.6;} /* ---------- Faixa CTA ---------- */ .ih-band{border-radius:24px; padding:50px 28px; text-align:center; background:linear-gradient(135deg,#0b9a68,#0dc282 52%,#19bcd6); box-shadow:0 22px 54px rgba(13,194,130,.32);} .ih-band h2{color:#04140e; font-size:30px; font-weight:800; margin:0; letter-spacing:-.02em;} .ih-band p{color:rgba(4,20,14,.82); margin:10px 0 24px; font-weight:600;} .ih-foot{text-align:center; color:var(--ih-muted); font-size:12.5px; padding:38px 0 26px;} /* ---------- Rolagem suave + revelação ao rolar ---------- */ html{scroll-behavior:smooth;} .ih-reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform;} .ih-reveal.ih-in{opacity:1; transform:none;} .ih-cards .ih-reveal:nth-child(2){transition-delay:.07s} .ih-cards .ih-reveal:nth-child(3){transition-delay:.14s} .ih-cards .ih-reveal:nth-child(4){transition-delay:.21s} .ih-steps .ih-reveal:nth-child(2){transition-delay:.09s} .ih-steps .ih-reveal:nth-child(3){transition-delay:.18s} @media(prefers-reduced-motion:reduce){.ih-reveal{opacity:1; transform:none; transition:none;}} /* ---------- Responsivo ---------- */ @media(max-width:720px){ .ih-hero{grid-template-columns:1fr; text-align:center; padding-top:16px;} .ih-hero .ih-sub{margin-left:auto; margin-right:auto;} .ih-cta{justify-content:center;} .ih-trust{justify-content:center;} .ih-steps{grid-template-columns:1fr;} .ih-stats{grid-template-columns:1fr; gap:16px;} .ih-hero h1{font-size:36px;} .ih-h2{font-size:26px;} }