/* ============================================================ MASTERINFO — Blog + Páginas-pilar (camada de conteúdo SEO/GEO) Autocontido. Painel de leitura claro sobre a base escura das subpáginas (styles.css). Fonte Outfit (já carregada no ). ============================================================ */ :root { --mi-red: #c1121f; --mi-orange: #ff7a05; --mi-yellow: #fcc305; --mi-ink: #1a1a2e; --mi-muted: #5b6170; --mi-line: #e7e8ee; --mi-paper: #f6f7fb; } /* ---- Faixa clara que segura o conteúdo de leitura ---- */ .article-band { background: var(--mi-paper); padding: 40px 0; } .article-band + .article-band { padding-top: 0; } .article { max-width: 820px; margin: 0 auto; padding: 44px clamp(20px, 5vw, 56px); background: #fff; border: 1px solid var(--mi-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(20, 22, 40, .07); color: var(--mi-ink); font-family: 'Outfit', system-ui, sans-serif; font-size: 17px; line-height: 1.72; } .article-narrow { max-width: 860px; } /* ---- Tipografia do corpo ---- */ .article h2 { font-size: clamp(1.45rem, 3.2vw, 1.9rem); line-height: 1.2; margin: 2.1em 0 .55em; color: var(--mi-ink); font-weight: 800; letter-spacing: -.01em; } .article h2:first-of-type { margin-top: .4em; } .article h3 { font-size: clamp(1.15rem, 2.4vw, 1.32rem); margin: 1.5em 0 .4em; color: var(--mi-ink); font-weight: 700; } .article p { margin: 0 0 1.1em; } .article a { color: var(--mi-red); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .article a:hover { color: var(--mi-orange); } .article strong { font-weight: 700; color: var(--mi-ink); } .article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.3em; } .article li { margin: .35em 0; } .article ul li::marker { color: var(--mi-orange); } /* ---- TL;DR (resposta direta no topo: featured snippet + GEO) ---- */ .tldr { background: #fff7ed; border: 1px solid #ffd9b0; border-left: 4px solid var(--mi-orange); border-radius: 12px; padding: 16px 20px; margin: 0 0 1.8em; font-size: 16px; } .tldr strong { color: #9a3b00; } .article-note { font-size: 14.5px; color: var(--mi-muted); background: #f0f2f7; border-radius: 10px; padding: 12px 16px; margin: 0 0 1.6em; } /* ---- Tabela comparativa ---- */ .article-table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.8em; font-size: 15.5px; } .article-table th, .article-table td { border: 1px solid var(--mi-line); padding: 10px 12px; text-align: left; vertical-align: top; } .article-table thead th { background: var(--mi-ink); color: #fff; font-weight: 700; } .article-table tbody tr:nth-child(even) { background: #fafbfd; } /* ---- Grid de planos quando embutido no artigo ---- */ .article-plans { margin: 1.4em 0 2em; } /* ---- FAQ (details/summary, sem JS) ---- */ .faq-block { max-width: 820px; margin: 0 auto; } .faq-q { background: #fff; border: 1px solid var(--mi-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .faq-q summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--mi-ink); font-size: 16.5px; position: relative; padding-right: 44px; } .faq-q summary::-webkit-details-marker { display: none; } .faq-q summary::after { content: "\002B"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--mi-orange); font-weight: 400; } .faq-q[open] summary::after { content: "\2212"; } .faq-a { padding: 0 20px 16px; color: var(--mi-muted); } .faq-a p { margin: 0; } /* ---- CTA band (fim de pilar) ---- */ .cta-band { background: linear-gradient(135deg, var(--mi-red) 0%, var(--mi-orange) 60%, var(--mi-yellow) 100%); padding: 48px 0; text-align: center; color: #fff; } .cta-band h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 .3em; font-weight: 800; color: #fff; } .cta-band p { max-width: 620px; margin: 0 auto 1.4em; font-size: 17px; opacity: .95; } .cta-band-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--mi-red); font-weight: 800; padding: 14px 28px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: transform .15s ease; } .cta-band-btn:hover { transform: translateY(-2px); } /* ---- Byline (autor + data) ---- */ .byline { display: flex; align-items: center; gap: 12px; padding: 0 0 22px; margin: 0 0 24px; border-bottom: 1px solid var(--mi-line); } .byline-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mi-line); } .byline-info { display: flex; flex-direction: column; } .byline-name { font-weight: 700; color: var(--mi-ink); } .byline-role { font-size: 14px; color: var(--mi-muted); } /* ---- Hero do post ---- */ .blog-post-hero { padding: clamp(56px, 12vw, 96px) 0 clamp(28px, 6vw, 44px); color: #fff; } .blog-post-hero .container { max-width: 900px; } .blog-breadcrumb { font-size: 13.5px; opacity: .9; margin-bottom: 14px; } .blog-breadcrumb a { color: #fff; text-decoration: none; opacity: .85; } .blog-breadcrumb a:hover { opacity: 1; text-decoration: underline; } .blog-breadcrumb span { opacity: .7; margin: 0 4px; } .blog-post-tag { display: inline-block; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; } .blog-post-hero h1 { font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.12; font-weight: 800; margin: 0 0 .4em; letter-spacing: -.015em; } .blog-post-lead { font-size: clamp(1rem, 2.4vw, 1.2rem); opacity: .95; max-width: 760px; margin: 0; } /* ---- Leia também + CTA do post ---- */ .related-title { font-size: 1.4rem; margin: 0 0 .6em; } .related-list { list-style: none; padding: 0; margin: 0 0 1.6em; } .related-list li { border-bottom: 1px solid var(--mi-line); } .related-list li:last-child { border-bottom: 0; } .related-list a { display: block; padding: 13px 0; color: var(--mi-ink); text-decoration: none; font-weight: 600; } .related-list a:hover { color: var(--mi-red); } .post-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--mi-paper); border: 1px solid var(--mi-line); border-radius: 14px; padding: 22px 24px; } .post-cta-text strong { display: block; font-size: 1.1rem; color: var(--mi-ink); } .post-cta-text p { margin: 4px 0 0; color: var(--mi-muted); font-size: 15px; } .post-cta .cta-band-btn { background: var(--mi-orange); color: #fff; text-decoration: none; } .post-cta .cta-band-btn:hover { background: #e8590c; color: #fff; } /* ---- Índice do blog ---- */ .blog-hero { background: linear-gradient(135deg, #2d0407 0%, #8b0a17 45%, #c1121f 100%); color: #fff; padding: clamp(64px, 12vw, 104px) 0 clamp(40px, 8vw, 64px); text-align: center; } .blog-hero-eyebrow { display: inline-block; letter-spacing: .14em; font-size: 13px; font-weight: 700; opacity: .85; margin-bottom: 12px; } .blog-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; margin: 0 auto .35em; max-width: 760px; line-height: 1.12; } .blog-hero p { font-size: clamp(1rem, 2.4vw, 1.2rem); opacity: .95; max-width: 620px; margin: 0 auto; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; max-width: 1100px; margin: 0 auto; } .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mi-line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--mi-ink); box-shadow: 0 12px 36px rgba(20, 22, 40, .06); transition: transform .18s ease, box-shadow .18s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(20, 22, 40, .12); } .blog-card-img { height: 168px; background-size: cover; background-position: center; background-color: #ececf3; } .blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } .blog-card-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mi-red); margin-bottom: 8px; } .blog-card-title { font-size: 1.18rem; line-height: 1.25; margin: 0 0 .5em; font-weight: 700; } .blog-card-excerpt { font-size: 14.5px; color: var(--mi-muted); margin: 0 0 16px; flex: 1; } .blog-card-meta { font-size: 13px; color: var(--mi-muted); } @media (max-width: 600px) { .article { border-radius: 12px; padding: 28px 20px; } .post-cta { flex-direction: column; align-items: flex-start; } }