:root {
--bsp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bsp-dark: #080e1a;
--bsp-navy: #0f172a;
--bsp-amber: #f59e0b;
--bsp-amber-hover: #d97706;
--bsp-bg: #f8fafc;
--bsp-white: #ffffff;
--bsp-border: #e2e8f0;
--bsp-border-light: #f1f5f9;
--bsp-text: #1e293b;
--bsp-text-2: #334155;
--bsp-text-3: #64748b;
--bsp-text-4: #94a3b8;
--bsp-max: 1240px;
--bsp-pad: 28px;
} .bsp-page * { box-sizing: border-box; }
.bsp-page {
font-family: var(--bsp-font);
background: var(--bsp-bg);
min-height: 60vh;
} .bsp-header {
background: var(--bsp-white);
border-bottom: 1px solid var(--bsp-border);
padding: 28px 0 24px;
}
.bsp-header-inner {
max-width: var(--bsp-max);
margin: 0 auto;
padding: 0 var(--bsp-pad);
} .bsp-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
font-size: 12.5px;
color: var(--bsp-text-4);
}
.bsp-breadcrumb a {
color: var(--bsp-text-3);
text-decoration: none;
transition: color .15s;
}
.bsp-breadcrumb a:hover { color: var(--bsp-navy); }
.bsp-breadcrumb span { font-size: 11px; opacity: .6; } .bsp-cat-badge {
display: inline-block;
background: var(--bsp-amber);
color: var(--bsp-navy);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .07em;
padding: 4px 12px;
border-radius: 100px;
text-decoration: none;
margin-bottom: 14px;
transition: background .15s;
}
.bsp-cat-badge:hover { background: var(--bsp-amber-hover); } .bsp-titulo {
font-size: clamp(22px, 3.5vw, 34px);
font-weight: 800;
color: var(--bsp-navy);
line-height: 1.18;
letter-spacing: -.025em;
margin: 0 0 20px;
max-width: 820px;
} .bsp-byline {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--bsp-border);
}
.bsp-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bsp-border);
flex-shrink: 0;
}
.bsp-byline-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.bsp-autor {
font-size: 13.5px;
font-weight: 700;
color: var(--bsp-navy);
text-decoration: none;
}
.bsp-autor:hover { color: var(--bsp-amber-hover); }
.bsp-meta-linha {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--bsp-text-4);
}
.bsp-sep { opacity: .5; } .bsp-img-warning {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 14px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
font-size: 12px;
color: #92400e;
font-weight: 600;
} .bsp-corpo {
background: var(--bsp-bg);
padding: 36px 0 60px;
}
.bsp-corpo-inner {
max-width: var(--bsp-max);
margin: 0 auto;
padding: 0 var(--bsp-pad);
display: grid;
grid-template-columns: 1fr 300px;
column-gap: 48px;
align-items: start;
} .bsp-artigo {
min-width: 0; background: var(--bsp-white);
border: 1px solid var(--bsp-border);
border-radius: 12px;
overflow: hidden;
} .bsp-figura {
margin: 0;
padding: 0;
}
.bsp-foto-wrap {
position: relative;
width: 100%;
background: #e2e8f0;
overflow: hidden;
}
.bsp-foto {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.bsp-foto-credito {
position: absolute;
bottom: 8px;
right: 10px;
font-size: 10px;
font-style: italic;
color: rgba(255,255,255,.88);
background: rgba(0,0,0,.52);
padding: 2px 8px;
border-radius: 4px;
backdrop-filter: blur(2px);
pointer-events: none;
}
.bsp-legenda {
display: block;
font-size: 12px;
font-style: italic;
color: var(--bsp-text-4);
padding: 7px 20px 0;
margin: 0;
line-height: 1.5;
border-top: none;
} .bsp-prose {
padding: 24px 28px 0;
font-size: 16px;
line-height: 1.78;
color: var(--bsp-text-2);
} .bsp-prose p {
margin: 0 0 1.3em;
font-size: 16px;
line-height: 1.78;
color: var(--bsp-text-2);
}
.bsp-prose h2,
.bsp-prose .wp-block-heading {
font-size: 20px;
font-weight: 800;
color: var(--bsp-navy);
line-height: 1.3;
letter-spacing: -.015em;
margin: 2em 0 .75em;
padding-top: 1.25em;
border-top: 1px solid var(--bsp-border-light);
}
.bsp-prose h2:first-child,
.bsp-prose .wp-block-heading:first-child { margin-top: .5em; padding-top: 0; border-top: none; }
.bsp-prose h3 {
font-size: 17px;
font-weight: 700;
color: var(--bsp-navy);
margin: 1.6em 0 .5em;
}
.bsp-prose ul, .bsp-prose ol {
margin: 0 0 1.3em 1.4em;
padding: 0;
}
.bsp-prose li {
margin-bottom: .45em;
font-size: 16px;
line-height: 1.7;
color: var(--bsp-text-2);
}
.bsp-prose a {
color: #1d4ed8;
text-decoration: underline;
text-underline-offset: 2px;
}
.bsp-prose a:hover { color: var(--bsp-amber-hover); }
.bsp-prose strong { font-weight: 700; color: var(--bsp-navy); } .bsp-prose figure.wp-block-table,
.bsp-prose .wp-block-table {
margin: 1.5em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bsp-prose table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.5;
}
.bsp-prose thead tr {
background: var(--bsp-navy);
}
.bsp-prose thead th {
padding: 10px 14px;
text-align: left;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.82);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.bsp-prose tbody tr { border-bottom: 1px solid var(--bsp-border-light); }
.bsp-prose tbody tr:nth-child(even) { background: var(--bsp-bg); }
.bsp-prose tbody td {
padding: 9px 14px;
color: var(--bsp-text-2);
vertical-align: top;
}
.bsp-prose tbody td strong { color: var(--bsp-navy); }
.bsp-prose table a { color: #1d4ed8; } .bsp-prose .wp-block-separator {
border: none;
border-top: 1px solid var(--bsp-border);
margin: 2em 0;
} .bsp-prose .wp-block-list {
margin: 0 0 1.3em 1.4em;
padding: 0;
} .bsp-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 20px 28px;
border-top: 1px solid var(--bsp-border-light);
margin-top: 0;
}
.bsp-tag {
display: inline-block;
background: var(--bsp-bg);
border: 1px solid var(--bsp-border);
color: var(--bsp-text-3);
font-size: 11px;
font-weight: 600;
padding: 4px 11px;
border-radius: 100px;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.bsp-tag:hover {
background: var(--bsp-amber);
border-color: var(--bsp-amber);
color: var(--bsp-navy);
} .bsp-share {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 16px 28px 20px;
border-top: 1px solid var(--bsp-border-light);
}
.bsp-share-label {
font-size: 12px;
font-weight: 700;
color: var(--bsp-text-3);
text-transform: uppercase;
letter-spacing: .06em;
}
.bsp-share-btn {
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 7px;
text-decoration: none;
transition: opacity .15s;
}
.bsp-share-btn:hover { opacity: .88; }
.bsp-fb { background: #1877f2; color: #fff; }
.bsp-wa { background: #25d366; color: #fff; }
.bsp-tw { background: #0f172a; color: #fff; } .bsp-sidebar {
position: sticky;
top: 88px; display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
} .bsp-ad-slot { display: block; }
.bsp-ad-slot:empty { display: none; } .bsp-aside-card {
background: var(--bsp-white);
border: 1px solid var(--bsp-border);
border-radius: 10px;
overflow: hidden;
}
.bsp-aside-titulo {
font-size: 11px;
font-weight: 800;
color: var(--bsp-text-4);
text-transform: uppercase;
letter-spacing: .09em;
margin: 0;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--bsp-border-light);
}
.bsp-aside-lista {
display: flex;
flex-direction: column;
}
.bsp-aside-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 14px;
text-decoration: none;
border-bottom: 1px solid var(--bsp-border-light);
transition: background .15s;
}
.bsp-aside-item:last-child { border-bottom: none; }
.bsp-aside-item:hover { background: var(--bsp-bg); }
.bsp-aside-thumb {
width: 72px;
height: 60px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: var(--bsp-border-light);
}
.bsp-aside-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bsp-aside-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 18px;
color: rgba(245,158,11,.4);
background: #0f172a;
}
.bsp-aside-item-titulo {
font-size: 12.5px;
font-weight: 600;
color: var(--bsp-navy);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .15s;
}
.bsp-aside-item:hover .bsp-aside-item-titulo { color: #1d4ed8; } .bsp-cta-card {
background: var(--bsp-navy) !important;
border-color: transparent !important;
padding: 20px 18px 18px;
text-align: center;
}
.bsp-cta-emoji {
font-size: 28px;
display: block;
margin-bottom: 10px;
}
.bsp-cta-titulo {
font-size: 14px;
font-weight: 800;
color: #fff;
margin: 0 0 8px;
line-height: 1.3;
}
.bsp-cta-desc {
font-size: 12px;
color: rgba(255,255,255,.5);
line-height: 1.55;
margin: 0 0 14px;
}
.bsp-cta-btn {
display: inline-block;
background: var(--bsp-amber);
color: var(--bsp-navy);
font-size: 12px;
font-weight: 800;
padding: 9px 18px;
border-radius: 8px;
text-decoration: none;
transition: background .15s;
}
.bsp-cta-btn:hover { background: var(--bsp-amber-hover); } .bsp-prose .ber-faq { margin: 2em 0 1em; } .bsp-prose .berb-cluster-ferramentas { margin: 2em 0 1em; }
.bsp-prose .berb-cluster-relacionados { margin: 2em 0 1em; }
.bsp-prose .berb-autor-card { margin: 1.5em 0; } .bsp-prose .berb-single-share { display: none; }  @media (max-width: 960px) {
.bsp-corpo-inner {
grid-template-columns: 1fr;
column-gap: 0;
padding: 0 20px;
}
.bsp-sidebar { display: none; }
.bsp-corpo { padding: 24px 0 48px; }
.bsp-header-inner { padding: 0 20px; }
.bsp-header { padding: 20px 0 18px; }
} @media (max-width: 600px) {
:root { --bsp-pad: 16px; }
.bsp-titulo { font-size: 21px; }
.bsp-header { padding: 16px 0; }
.bsp-header-inner,
.bsp-corpo-inner { padding: 0 16px; }
.bsp-artigo { border-radius: 8px; }
.bsp-prose { padding: 18px 18px 0; font-size: 15px; }
.bsp-prose p { font-size: 15px; }
.bsp-prose h2,
.bsp-prose .wp-block-heading { font-size: 18px; }
.bsp-prose table { font-size: 13px; }
.bsp-prose thead th { font-size: 11px; padding: 8px 10px; }
.bsp-prose tbody td { padding: 8px 10px; }
.bsp-tags  { padding: 14px 18px; }
.bsp-share { padding: 12px 18px 16px; }
.bsp-share-label { width: 100%; }
.bsp-share-btn { font-size: 11px; padding: 5px 12px; }
}