/* ========================================================================== Integris BR — Blog CSS v2 Mantém os tokens de marca do blog.css original. Acrescenta: classes utilitárias (estilo Tailwind, curadas à mão — sem CDN, sem build, sem dependência externa) + componentes de storytelling/CTA. Sobe exatamente como o blog.css: um arquivo estático, link no . ========================================================================== */ :root{ --navy-950:#0A1A2C; --navy-800:#12283F; --navy-700:#1A3654; --gold-500:#C6A15B; --gold-300:#E7CE9B; --cream-100:#F6F2E9; --cream-50:#FBF9F5; --ok-space: clamp(1.25rem, 2.5vw, 2rem); } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; font-family:'Inter',sans-serif; background:var(--cream-50); color:var(--navy-950); line-height:1.65; text-rendering:optimizeLegibility; } /* ---------- header / footer (iguais ao blog.css) ---------- */ .site-header{ background:var(--navy-950); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; } .logo{display:flex;align-items:center;text-decoration:none;} .logo img{height:36px;width:auto;display:block;} .back-link{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cream-100); text-decoration:none; border:1px solid rgba(230,215,180,0.4); padding:8px 16px; border-radius:999px; } .back-link:hover{border-color:var(--gold-500);color:var(--gold-300);} .site-footer{ background:var(--navy-950); color:var(--cream-100); text-align:center; padding:32px 24px; font-family:'IBM Plex Mono',monospace; font-size:12px; } /* ---------- conteúdo do post ---------- */ main.blog-post{ max-width:68ch; /* ch = largura consistente por qualquer tamanho de fonte, corrige "fora de parágrafo" */ margin:0 auto; padding:70px 24px 100px; } .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--gold-500); text-transform:uppercase; margin-bottom:14px; } h1{ font-family:'Fraunces',serif; font-size:clamp(30px,4.2vw,44px); line-height:1.15; color:var(--navy-950); margin:0 0 12px; max-width:38ch; text-wrap:balance; } .meta{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(10,26,44,0.55); margin-bottom:44px; } h2{ font-family:'Fraunces',serif; font-size:26px; color:var(--navy-950); margin:44px 0 16px; max-width:42ch; text-wrap:balance; } p{ font-size:17px; color:rgba(10,26,44,0.85); margin:0 0 18px; max-width:66ch; text-wrap:pretty; hyphens:auto; } ul{margin:0 0 18px;padding-left:20px;max-width:66ch;} li{font-size:17px;color:rgba(10,26,44,0.85);margin-bottom:8px;} a.inline-link{color:var(--navy-700);text-decoration:underline;text-decoration-color:var(--gold-500);} strong{color:var(--navy-950);} /* ---------- abertura por identificação (storytelling) ---------- */ .story-open{ font-family:'Fraunces',serif; font-style:italic; font-size:19px; line-height:1.6; color:var(--navy-800); max-width:64ch; margin:0 0 32px; padding-left:20px; border-left:3px solid var(--gold-500); } /* ---------- bloco de "dor" (o que dá errado) ---------- */ .pain-block{ background:var(--navy-950); color:var(--cream-100); border-radius:16px; padding:28px 30px; margin:32px 0; max-width:66ch; } .pain-block p{color:var(--cream-100);max-width:none;margin-bottom:0;} .pain-block p + p{margin-top:14px;} .pain-block strong{color:var(--gold-300);} /* ---------- CTA contextual (aparece no meio do post) ---------- */ .cta-inline{ display:flex; align-items:center; gap:20px; background:var(--cream-100); border:1px solid rgba(198,161,91,0.35); border-radius:16px; padding:24px 26px; margin:40px 0; max-width:66ch; } .cta-inline__text{flex:1;} .cta-inline__label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-500); margin:0 0 6px; } .cta-inline__msg{ font-family:'Fraunces',serif; font-size:19px; color:var(--navy-950); margin:0; max-width:none; } .cta-inline__btn{ flex-shrink:0; display:inline-block; background:var(--navy-950); color:var(--cream-50); font-family:'Inter',sans-serif; font-weight:600; font-size:14px; text-decoration:none; padding:14px 22px; border-radius:999px; white-space:nowrap; } .cta-inline__btn:hover{background:var(--navy-700);} @media (max-width:520px){ .cta-inline{flex-direction:column;align-items:flex-start;} .cta-inline__btn{align-self:stretch;text-align:center;} } /* ---------- menção a parceiro (ex: MCAM) ---------- */ .partner-note{ border:1px dashed rgba(10,26,44,0.25); border-radius:12px; padding:18px 22px; margin:32px 0; max-width:66ch; background:transparent; } .partner-note p{font-size:15px;margin-bottom:0;max-width:none;} /* ---------- FAQ ---------- */ .faq-block{margin:48px 0 0;max-width:66ch;} .faq-item{border-top:1px solid rgba(10,26,44,0.12);padding:20px 0;} .faq-item:last-child{border-bottom:1px solid rgba(10,26,44,0.12);} .faq-q{ font-family:'Fraunces',serif; font-size:18px; color:var(--navy-950); margin:0 0 8px; } .faq-a{font-size:15.5px;color:rgba(10,26,44,0.8);margin:0;} /* ---------- CTA final ---------- */ footer.cta{ margin-top:56px; padding-top:36px; border-top:1px solid rgba(10,26,44,0.12); text-align:center; } .whatsapp-cta{ display:inline-block; background:var(--gold-500); color:var(--navy-950); font-family:'Inter',sans-serif; font-weight:600; font-size:15px; text-decoration:none; padding:16px 32px; border-radius:999px; } .whatsapp-cta:hover{background:var(--gold-300);} /* ---------- utilitárias (subconjunto Tailwind, curado à mão) ---------- */ .flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-2{gap:8px;} .gap-4{gap:16px;} .text-center{text-align:center;} .rounded-full{border-radius:999px;} .rounded-2xl{border-radius:16px;} .mx-auto{margin-left:auto;margin-right:auto;} .mt-8{margin-top:32px;} .mb-0{margin-bottom:0;}