/* Base editorial dos artigos de /conteudos (item 2.22 do plano premium). ------------------------------------------------------------------------- POR QUE ESTE ARQUIVO EXISTE Os quatro artigos novos tinham, somados, 1011 regras de CSS escritas em quatro article.css separados. Medindo regra a regra, depois de normalizar o escopo e o prefixo de cada um, 511 dessas regras eram COPIA: 174 regras apareciam identicas nos quatro (ou nos tres que usam o componente, faltando so no artigo de IA, que nao usa fluxo, callout, mineracao nem sintese). Na pratica isso significava que mudar o espacamento de uma citacao, a cor de um callout ou a regra de impressao pedia a mesma edicao em quatro arquivos, e bastava esquecer um para os artigos comecarem a divergir em silencio. COMO USAR 1. O do artigo declara os dois atributos: O data-layout liga esta folha; o data-page continua servindo ao article.css proprio e ao main.js. 2. Os componentes comuns usam o prefixo art-. Sao 71 classes: hero, trilha, ficha, resumo, palavras-chave, indice, secao, citacao, destaque, nota, callout, figura, fluxo, controles, colunas comparadas, sintese, bloco final, autor, relacionados e CTA. 3. O article.css de cada artigo fica so com os DIAGRAMAS proprios daquele texto, no prefixo dele (ep-, gb-, bp-, ia-). POR QUE O PREFIXO E art- E NAO ed- ed- ja e o prefixo do deck "21 Erros", com 176 ocorrencias em presentation.css. Reaproveitar o nome faria duas folhas diferentes disputarem as mesmas classes na mesma pasta publicada. CACHE /assets/css/* ja tem cache immutable no _headers, e o ?v= sai do hash de conteudo em _tools/build.mjs. Nenhum passo manual: editar aqui invalida sozinho, e o mesmo arquivo passa a ser baixado uma vez para os quatro artigos, em vez de quatro copias do mesmo conteudo. */ [data-layout="editorial"] { --sky: #38BDF8; /* azul editorial (títulos de apoio, ícones) */ --cyan: #22D3EE; /* ciano de destaque (rótulos, numeração) */ --amber: #F5A623; /* atenção: alertas e coluna de riscos */ --edge: rgba(120, 175, 225, .16); --edge-2: rgba(120, 175, 225, .34); --panel: rgba(255, 255, 255, .04); --panel-2: rgba(255, 255, 255, .07); --grid-ln: rgba(56, 189, 248, .055); --art-body: clamp(1.0625rem, 1rem + .25vw, 1.125rem); /* 17px → 18px */ background: radial-gradient(1200px 700px at 86% -8%, rgba(56, 189, 248, .12), transparent 62%), linear-gradient(180deg, #060D1B, var(--bg-0) 55%); } /* ── CROMO DA PAGINA ─────────────────────────────────────────────────── */ [data-layout="editorial"] #scrollProgress { background: linear-gradient(90deg, var(--blue), var(--sky), var(--cyan)); } [data-layout="editorial"] main { position: relative; z-index: 1; } [data-layout="editorial"] .nav a[aria-current="page"] { color: var(--txt-1); position: relative; } [data-layout="editorial"] .nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--cyan)); } [data-layout="editorial"] .art-grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, var(--grid-ln) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, var(--grid-ln) 0 1px, transparent 1px 64px); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2) 45%, rgba(0,0,0,.1)); mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2) 45%, rgba(0,0,0,.1)); } [data-layout="editorial"] .art-mono { font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 700; } /* ── COLUNA DE LEITURA E SECOES ──────────────────────────────────────── */ [data-layout="editorial"] .pg-wrap.art-col { max-width: 840px; } [data-layout="editorial"] .art-section { padding: clamp(34px, 5vw, 58px) 0; } [data-layout="editorial"] .art-section--tight { padding: clamp(24px, 3.5vw, 40px) 0; } [data-layout="editorial"] .art-section + .art-section { border-top: 1px solid var(--edge); } [data-layout="editorial"] .art-col p { font-size: var(--art-body); line-height: 1.7; color: var(--txt-2); margin-top: 18px; } [data-layout="editorial"] .art-col p:first-of-type { margin-top: 20px; } [data-layout="editorial"] .art-col i { font-style: italic; color: rgba(233, 244, 251, .9); } [data-layout="editorial"] .art-col strong { color: var(--txt-1); } /* ── REVELACAO NO SCROLL ─────────────────────────────────────────────── */ html.js [data-layout="editorial"] .art-r { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.js [data-layout="editorial"] .art-r.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js [data-layout="editorial"] .art-r { opacity: 1; transform: none; transition: none; } } /* ── HERO ────────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-hero { position: relative; overflow: hidden; padding: clamp(112px, 14vh, 158px) 0 clamp(30px, 5vw, 54px); } [data-layout="editorial"] .art-hero > .pg-wrap { position: relative; z-index: 1; } [data-layout="editorial"] .art-hero-bg { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; overflow: hidden; aspect-ratio: 1900 / 830; min-height: 300px; } [data-layout="editorial"] .art-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; } [data-layout="editorial"] .art-hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 11, 22, .94) 0%, rgba(6, 11, 22, .78) 42%, rgba(6, 11, 22, .2) 78%, rgba(6, 11, 22, 0) 100%), linear-gradient(180deg, rgba(6, 11, 22, .35) 0%, rgba(6, 11, 22, 0) 28%, rgba(6, 11, 22, .62) 62%, rgba(6, 11, 22, .95) 86%, var(--bg-0) 97%); } /* ── TRILHA DE NAVEGACAO ─────────────────────────────────────────────── */ [data-layout="editorial"] .art-crumb { margin-bottom: 20px; } [data-layout="editorial"] .art-crumb .breadcrumb li + li::before { color: rgba(56, 189, 248, .6); } [data-layout="editorial"] .art-crumb .breadcrumb [aria-current] { color: var(--sky); } @media (max-width: 900px) { [data-layout="editorial"] .art-crumb .breadcrumb { font-size: 1rem; line-height: 1.4; } [data-layout="editorial"] .art-crumb .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; } } /* ── TITULO, SUBTITULO E FICHA ───────────────────────────────────────── */ [data-layout="editorial"] .art-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .32); color: var(--cyan); font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } [data-layout="editorial"] .art-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } [data-layout="editorial"] .art-h1 { margin: 22px 0 0; max-width: 18ch; text-wrap: balance; font-size: clamp(2.05rem, 10vw, 3.55rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: var(--txt-1); } [data-layout="editorial"] .art-h1 em { font-style: normal; color: var(--sky); } [data-layout="editorial"] .art-sub { margin-top: 16px; max-width: 52ch; text-wrap: pretty; font-size: clamp(1.0625rem, 1.9vw, 1.35rem); font-weight: 600; line-height: 1.45; color: var(--txt-2); } [data-layout="editorial"] .art-meta { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--radius-m); overflow: hidden; max-width: 640px; } [data-layout="editorial"] .art-meta-row { background: rgba(8, 16, 30, .74); padding: 13px 16px; } [data-layout="editorial"] .art-meta dt { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(150, 185, 215, .82); } [data-layout="editorial"] .art-meta dd { margin-top: 5px; font-size: 1rem; line-height: 1.4; color: var(--txt-2); } [data-layout="editorial"] .art-meta dd strong { color: var(--txt-1); font-weight: 700; } /* ── BOTOES ──────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } [data-layout="editorial"] .art-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 1.2; transition: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast); } [data-layout="editorial"] .art-btn svg { width: 18px; height: 18px; flex: none; } [data-layout="editorial"] .art-btn:hover { transform: translateY(-2px); } [data-layout="editorial"] .art-btn--read { background: linear-gradient(135deg, var(--sky), var(--cyan)); color: #04222E; } [data-layout="editorial"] .art-btn--primary { background: var(--grad-cta); color: var(--cta-ink); box-shadow: var(--glow-green); } [data-layout="editorial"] .art-btn--ghost { background: transparent; border: 1px solid rgba(57, 233, 131, .4); color: var(--green-neon); } [data-layout="editorial"] .art-btn--ghost:hover { border-color: var(--green-neon); background: rgba(34, 197, 94, .08); } /* ── RESUMO E PALAVRAS-CHAVE ─────────────────────────────────────────── */ [data-layout="editorial"] .art-abstract { border-left: 3px solid var(--cyan); border-radius: 0 var(--radius-m) var(--radius-m) 0; background: linear-gradient(120deg, rgba(34, 211, 238, .07), rgba(255, 255, 255, .02)); padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px); } [data-layout="editorial"] .art-abstract > .art-h2 { margin: 0; color: var(--cyan); } [data-layout="editorial"] .art-abstract p { margin-top: 14px; color: var(--txt-1); } [data-layout="editorial"] .art-h3 { margin-top: 34px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); } [data-layout="editorial"] .art-keys { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } [data-layout="editorial"] .art-keys li { padding: 9px 15px; border-radius: 999px; min-height: 38px; display: inline-flex; align-items: center; background: var(--panel); border: 1px solid var(--edge-2); color: var(--txt-2); font-size: 1rem; line-height: 1.2; } /* ── NOTA ────────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-note { margin-top: 26px; padding: 16px 18px; border-radius: var(--radius-m); background: rgba(255, 255, 255, .035); border: 1px dashed var(--edge-2); font-size: 1rem !important; line-height: 1.6; color: var(--txt-3) !important; } [data-layout="editorial"] .art-note-k { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } /* ── INDICE ──────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-toc { padding: clamp(8px, 2vw, 14px) 0 0; } [data-layout="editorial"] .art-toc-box { border: 1px solid var(--edge-2); border-radius: var(--radius-m); background: rgba(8, 16, 30, .6); overflow: hidden; } [data-layout="editorial"] .art-toc-box > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 15px 18px; min-height: 48px; cursor: pointer; color: var(--txt-1); list-style: none; } [data-layout="editorial"] .art-toc-box > summary::-webkit-details-marker { display: none; } [data-layout="editorial"] .art-toc-box > summary::after { content: '+'; content: '+' / ''; margin-left: auto; font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; color: var(--sky); } [data-layout="editorial"] .art-toc-box[open] > summary::after { /* U+2212 MINUS SIGN, e nao a meia-risca U+2013 que estava aqui: a meia-risca e sinal de intervalo, casa mal com o '+' do estado fechado e cai na regra da casa contra travessao em texto do site. O ' / "" ' zera o texto alternativo: o marcador e decorativo e o estado ja e anunciado pelo proprio

. */ content: '−'; content: '−' / ''; } [data-layout="editorial"] .art-toc-box > summary .art-mono { color: var(--sky); } [data-layout="editorial"] .art-toc-count { font-size: .9rem; color: var(--txt-3); } [data-layout="editorial"] .art-toc-list { list-style: none; border-top: 1px solid var(--edge); padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } [data-layout="editorial"] .art-toc-list a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-s); font-size: 1rem; line-height: 1.35; color: var(--txt-2); transition: background-color var(--t-fast), color var(--t-fast); } [data-layout="editorial"] .art-toc-list a:hover { background: var(--panel-2); color: var(--txt-1); } [data-layout="editorial"] .art-toc-n { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--cyan); flex: none; } /* ── REFERENCIAS ─────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-ref { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--txt-3); } [data-layout="editorial"] .art-ref b { font-size: 1rem; color: var(--cyan); } /* ── TITULO DE SECAO, CITACAO E DESTAQUE ─────────────────────────────── */ [data-layout="editorial"] .art-h2 { margin-top: 10px; text-wrap: balance; font-size: clamp(1.7rem, 7.6vw, 2.5rem); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; color: var(--txt-1); } [data-layout="editorial"] .art-h2--sm { font-size: clamp(1.25rem, 3.6vw, 1.6rem); letter-spacing: -.01em; } [data-layout="editorial"] .art-quote { max-width: 1040px; margin: 26px auto 0; padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 46px); border: 1px solid var(--edge-2); border-radius: var(--radius-l); background: linear-gradient(135deg, rgba(56, 189, 248, .1), rgba(34, 211, 238, .04)); position: relative; } [data-layout="editorial"] .art-quote::before { content: '“'; position: absolute; top: 2px; left: 16px; font-size: 4.4rem; line-height: 1; color: rgba(56, 189, 248, .35); font-family: var(--font-mono); } [data-layout="editorial"] .art-quote p { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.42; letter-spacing: -.015em; color: var(--txt-1); text-wrap: pretty; } [data-layout="editorial"] .art-highlight { margin-top: 26px !important; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-l); border: 1px solid rgba(56, 189, 248, .3); background: linear-gradient(135deg, rgba(56, 189, 248, .1), rgba(255, 255, 255, .02)); font-size: clamp(1.0625rem, 2vw, 1.2rem) !important; font-weight: 600; line-height: 1.55 !important; color: var(--txt-1) !important; } /* ── CALLOUT ─────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-callout { margin-top: 26px !important; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-m); border: 1px solid var(--edge-2); border-left: 4px solid var(--sky); background: rgba(56, 189, 248, .07); font-size: var(--art-body) !important; line-height: 1.6 !important; color: var(--txt-1) !important; font-weight: 600; } [data-layout="editorial"] .art-callout svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--sky); } [data-layout="editorial"] .art-callout--warn { border-color: rgba(245, 166, 35, .38); border-left-color: var(--amber); background: rgba(245, 166, 35, .07); } [data-layout="editorial"] .art-callout--warn svg { color: var(--amber); } /* ── FIGURA E LEGENDA ────────────────────────────────────────────────── */ [data-layout="editorial"] .art-fig { max-width: 1140px; margin: 26px auto 0; } [data-layout="editorial"] .art-fig-vp { position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--edge-2); background: #071018; aspect-ratio: 16 / 9; box-shadow: 0 14px 44px rgba(0, 0, 0, .4); } [data-layout="editorial"] .art-fig-vp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } [data-layout="editorial"] .art-fig-tag { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .13em; color: var(--cyan); background: rgba(5, 10, 21, .78); border: 1px solid rgba(34, 211, 238, .35); backdrop-filter: blur(6px); } [data-layout="editorial"] .art-figcap { margin-top: 10px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--txt-3); line-height: 1.5; } /* ── FLUXO EM ETAPAS ─────────────────────────────────────────────────── */ [data-layout="editorial"] .art-flow { list-style: none; counter-reset: flow; max-width: 1180px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } [data-layout="editorial"] .art-flow-step { counter-increment: flow; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 16px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); text-align: center; align-items: center; } [data-layout="editorial"] .art-flow-step:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -9px; width: 8px; height: 8px; z-index: 1; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: translateY(-50%) rotate(45deg); } [data-layout="editorial"] .art-flow-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .26); color: var(--sky); } [data-layout="editorial"] .art-flow-ic svg { width: 22px; height: 22px; } [data-layout="editorial"] .art-flow-step strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); } [data-layout="editorial"] .art-flow-d { font-size: .88rem; line-height: 1.45; color: var(--txt-3); } @media (max-width: 1100px) { [data-layout="editorial"] .art-flow { grid-template-columns: repeat(3, 1fr); gap: 12px; } [data-layout="editorial"] .art-flow-step:nth-child(3)::after { display: none; } } @media (max-width: 640px) { [data-layout="editorial"] .art-flow-step::after { display: none !important; } } /* ── CARTOES DE CONTROLE ─────────────────────────────────────────────── */ [data-layout="editorial"] .art-controls { list-style: none; max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } [data-layout="editorial"] .art-control { padding: 20px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-layout="editorial"] .art-control-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .26); color: var(--sky); } [data-layout="editorial"] .art-control-ic svg { width: 22px; height: 22px; } [data-layout="editorial"] .art-control h3 { margin-top: 12px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); } [data-layout="editorial"] .art-control p { margin-top: 7px; font-size: .95rem; line-height: 1.55; color: var(--txt-3); } /* ── DUAS COLUNAS COMPARADAS ─────────────────────────────────────────── */ [data-layout="editorial"] .art-mining { max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } [data-layout="editorial"] .art-mine-col { padding: 20px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-layout="editorial"] .art-mine-col--proc { border-color: rgba(34, 211, 238, .4); background: linear-gradient(160deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .02)); } [data-layout="editorial"] .art-mine-k { font-family: var(--font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(150, 185, 215, .8); } [data-layout="editorial"] .art-mine-t { margin-top: 6px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); } [data-layout="editorial"] .art-mine-col ul { list-style: none; margin-top: 12px; display: grid; gap: 7px; } [data-layout="editorial"] .art-mine-col li { position: relative; padding-left: 18px; font-size: .95rem; line-height: 1.5; color: var(--txt-2); } [data-layout="editorial"] .art-mine-col li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); opacity: .7; } [data-layout="editorial"] .art-mine-col--proc li::before { background: var(--cyan); opacity: 1; } @media (max-width: 860px) { [data-layout="editorial"] .art-mining { grid-template-columns: 1fr; } } /* ── SINTESE ─────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-synth { max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } [data-layout="editorial"] .art-syn { padding: 18px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); border-top: 3px solid rgba(34, 211, 238, .5); } [data-layout="editorial"] .art-syn dt { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); } [data-layout="editorial"] .art-syn dd { margin-top: 6px; font-size: .95rem; line-height: 1.5; color: var(--txt-2); } /* ── PERGUNTA E RESPOSTA FINAL ───────────────────────────────────────── */ [data-layout="editorial"] .art-final { max-width: 900px; margin: 30px auto 0; text-align: center; padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px); border-radius: var(--radius-xl); border: 1px solid rgba(56, 189, 248, .35); background: radial-gradient(520px 260px at 50% 0%, rgba(34, 211, 238, .12), transparent 70%), rgba(255, 255, 255, .02); } [data-layout="editorial"] .art-final-q { font-size: clamp(1.2rem, 2.8vw, 1.65rem); font-weight: 700; line-height: 1.4; letter-spacing: -.015em; color: var(--txt-1); text-wrap: pretty; } [data-layout="editorial"] .art-final-a { margin-top: 18px; display: inline-block; padding: 10px 22px; border-radius: 999px; font-family: var(--font-mono); font-size: clamp(.88rem, 1.8vw, 1rem); font-weight: 700; letter-spacing: .04em; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .4); } /* ── AUTOR ───────────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-author { max-width: 1040px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 30px); align-items: flex-start; padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-l); background: var(--panel); border: 1px solid var(--edge); } [data-layout="editorial"] .art-author-ph { flex: none; } [data-layout="editorial"] .art-author-ph img { width: 130px; height: 179px; object-fit: cover; border-radius: var(--radius-m); border: 1px solid var(--edge-2); } [data-layout="editorial"] .art-author-txt { flex: 1 1 300px; min-width: 0; } [data-layout="editorial"] .art-author-k { display: block; color: var(--sky); } [data-layout="editorial"] .art-author-txt .art-h3 { margin-top: 8px; font-size: 1.35rem; } [data-layout="editorial"] .art-author-txt p { margin-top: 12px; font-size: 1rem; line-height: 1.62; color: var(--txt-2); } [data-layout="editorial"] .art-author-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; min-height: 44px; font-size: 1rem; font-weight: 700; color: var(--sky); } [data-layout="editorial"] .art-author-link svg { width: 17px; height: 17px; } [data-layout="editorial"] .art-author-link:hover { color: var(--cyan); } /* ── CONTEUDOS RELACIONADOS ──────────────────────────────────────────── */ [data-layout="editorial"] .art-rel { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 14px; } [data-layout="editorial"] .art-rel-card { padding: 20px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); transition: border-color var(--t-fast), transform var(--t-fast); } [data-layout="editorial"] .art-rel-card:hover { border-color: var(--edge-2); transform: translateY(-2px); } [data-layout="editorial"] .art-rel-k { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } [data-layout="editorial"] .art-rel-card h3 { margin-top: 9px; font-size: 1.1rem; font-weight: 800; line-height: 1.3; } [data-layout="editorial"] .art-rel-card h3 a { color: var(--txt-1); padding: 10px 0; } [data-layout="editorial"] .art-rel-card h3 a:hover { color: var(--sky); } [data-layout="editorial"] .art-rel-card p { margin-top: 9px; font-size: 1rem; line-height: 1.5; color: var(--txt-3); } /* ── CTA FINAL ───────────────────────────────────────────────────────── */ [data-layout="editorial"] .art-cta { padding: clamp(30px, 5vw, 56px) 0 clamp(50px, 7vw, 84px); } [data-layout="editorial"] .art-cta-box { max-width: 1040px; margin-inline: auto; text-align: center; padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 48px); border-radius: var(--radius-xl); border: 1px solid rgba(34, 197, 94, .28); background: linear-gradient(150deg, rgba(34, 197, 94, .1), rgba(255, 255, 255, .02)); } [data-layout="editorial"] .art-cta-k { display: inline-block; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-neon); } [data-layout="editorial"] .art-cta-box h2 { margin-top: 12px; text-wrap: balance; font-size: clamp(1.45rem, 4.2vw, 2.1rem); font-weight: 800; line-height: 1.22; letter-spacing: -.025em; color: var(--txt-1); } [data-layout="editorial"] .art-cta-box p { margin: 14px auto 0; max-width: 58ch; font-size: var(--art-body); line-height: 1.6; color: var(--txt-2); } [data-layout="editorial"] .art-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; } /* ── RESPONSIVO ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Item 7.10, medido em 390x844 por getComputedStyle ANTES: .art-flow-d 14,1px; .art-control p, .art-mine-col li e .art-syn dd 15,2px; .art-toc-count 14,4px; .art-figcap 12,5px; mono de 10,2px a 12,5px. Criterio do styles.css: texto essencial nunca abaixo de 16px, rotulo mono nunca abaixo de 13px. O plano listava estes seletores como ep-, no article.css de cada artigo; o item 2.22 ja os juntou aqui. */ [data-layout="editorial"] :is(.art-flow-d, .art-control p, .art-mine-col li, .art-syn dd, .art-toc-count) { font-size: 1rem; line-height: 1.5; } [data-layout="editorial"] .art-figcap { font-size: .875rem; } [data-layout="editorial"] :is(.art-meta dt, .art-mine-k, .art-rel-k, .art-cta-k, .art-note-k, .art-fig-tag, .art-toc-n, .art-ref, .art-mono) { font-size: .8125rem; } [data-layout="editorial"] .art-toc-list { grid-template-columns: 1fr; } [data-layout="editorial"] .art-hero { padding-top: calc(var(--header-h) + 10px); } [data-layout="editorial"] .art-hero-bg { aspect-ratio: 16 / 10; min-height: 0; } [data-layout="editorial"] .art-hero-img { object-position: 82% center; } [data-layout="editorial"] .art-hero-veil { background: linear-gradient(180deg, rgba(6,11,22,.52) 0%, rgba(6,11,22,.34) 32%, rgba(6,11,22,.4) 56%, rgba(6,11,22,.74) 80%, var(--bg-0) 100%); } } @media (max-width: 620px) { [data-layout="editorial"] .art-crumb .breadcrumb [aria-current] { display: block; max-width: 100%; } [data-layout="editorial"] .art-crumb .breadcrumb li[aria-current]::before { content: none; } [data-layout="editorial"] .art-hero-cta { display: grid; } [data-layout="editorial"] .art-btn { width: 100%; } [data-layout="editorial"] .art-cta-btns { display: grid; } [data-layout="editorial"] .art-author { flex-direction: column; align-items: center; text-align: center; } [data-layout="editorial"] .art-author-txt { text-align: left; } [data-layout="editorial"] .art-grid-bg { opacity: .55; } [data-layout="editorial"] .art-btn--primary { box-shadow: none; } } @media (max-width: 400px) { [data-layout="editorial"] .art-quote::before { display: none; } [data-layout="editorial"] .art-quote { padding-top: 22px; } } @media (prefers-reduced-motion: reduce) { [data-layout="editorial"] .art-btn, [data-layout="editorial"] .art-rel-card, [data-layout="editorial"] .art-toc-list a { transition: none; } [data-layout="editorial"] .art-btn:hover, [data-layout="editorial"] .art-rel-card:hover { transform: none; } } /* ── IMPRESSAO DOS COMPONENTES EDITORIAIS ────────────────────────────── */ /* O cromo global (cabecalho, rodape, WhatsApp, @page, papel branco, URL de link externo) mora no @media print de styles.css. Aqui fica so o que e do ARTIGO, e cada article.css fica so com os diagramas proprios daquele texto. Antes disto as mesmas regras estavam escritas quatro vezes e ja divergiam: na lista de blocos que nao podem partir entre paginas, o artigo de IA nao trazia .art-callout, .art-fig nem .art-final, que os outros tres traziam. */ @media print { /* A revelacao por scroll nunca roda no papel: o IntersectionObserver so dispara para o que entrou na tela, e metade do artigo sairia em branco. */ html.js [data-layout="editorial"] .art-r { opacity: 1 !important; transform: none !important; transition: none !important; } [data-layout="editorial"] { background: #fff !important; color: #111 !important; } /* Fora da folha: grade decorativa, arte do hero, os dois CTAs comerciais e os enfeites que so fazem sentido em tela. A arte do hero e a primeira da lista: e uma foto escura de largura total que sozinha consome uma pagina inteira antes de o titulo aparecer. */ [data-layout="editorial"] .art-grid-bg, [data-layout="editorial"] .art-hero-bg, [data-layout="editorial"] .art-hero-cta, [data-layout="editorial"] .art-cta, [data-layout="editorial"] .art-quote::before, [data-layout="editorial"] .art-eyebrow::before, [data-layout="editorial"] .art-toc-box > summary::after, /* "FIG. 01" sobreposto a imagem: sem o cartucho escuro por tras ele vira tinta escura sobre a foto, ilegivel. A legenda abaixo repete o numero. */ [data-layout="editorial"] .art-fig-tag { display: none !important; } /* Varredura obrigatoria, e nao exagero: a paleta da tela e clara sobre fundo escuro, e Chrome e Safari discordam de print-color-adjust. O bloco que depende do fundo colorido some num navegador e sai ilegivel no outro, entao o fundo cai em todos e quem garante o contraste passa a ser a tinta escura, nunca o fundo. */ [data-layout="editorial"] main *, [data-layout="editorial"] main *::before, [data-layout="editorial"] main *::after { color: #1a1a1a !important; background: none !important; box-shadow: none !important; text-shadow: none !important; border-color: #b8b8b8 !important; } /* Estes tres declaram a propria cor com !important na tela (var(--txt-1) e var(--txt-3), quase brancas) e por isso VENCEM a varredura acima, que e menos especifica: sem repetir a cor aqui, callout, destaque e nota saem em branco sobre papel branco, ou seja, tres blocos vazios. E, sem o fundo, quem os separa do corpo do texto passa a ser so a borda, que no cinza claro da varredura tambem se dissolveria. O callout guarda a barra esquerda, que e a identidade dele, e a variante de alerta continua distinta pelo tracejado, nao pelo ambar que a impressora pode descartar. */ [data-layout="editorial"] .art-note, [data-layout="editorial"] .art-highlight { color: #1a1a1a !important; border-color: #777 !important; } [data-layout="editorial"] .art-callout { color: #1a1a1a !important; border-color: #777 !important; border-left-color: #333 !important; } [data-layout="editorial"] .art-callout--warn { border-left-style: dashed !important; } [data-layout="editorial"] .art-hero, [data-layout="editorial"] .art-section { background: #fff !important; } /* O hero reserva o espaco do cabecalho fixo, que aqui nao existe. */ [data-layout="editorial"] .art-hero { padding-top: 0 !important; } [data-layout="editorial"] .art-section + .art-section { border-top-color: #ddd !important; } /* Titulos em preto. Precisam repetir o que styles.css ja diz para h1..h3 porque a varredura acima e mais especifica e acabou de pintar tudo de #1a1a1a. */ [data-layout="editorial"] .art-h1, [data-layout="editorial"] .art-h1 em, [data-layout="editorial"] .art-h2, [data-layout="editorial"] .art-h3, [data-layout="editorial"] .art-meta dd strong { color: #000 !important; } /* Rotulos, trilha e numeracao em cinza medio: no preto e branco eles tem de ficar abaixo do titulo na hierarquia, senao a pagina vira um bloco unico de tinta com o mesmo peso do comeco ao fim. */ [data-layout="editorial"] .art-crumb .breadcrumb, [data-layout="editorial"] .art-crumb .breadcrumb a, [data-layout="editorial"] .art-crumb .breadcrumb [aria-current], [data-layout="editorial"] .art-meta dt, [data-layout="editorial"] .art-ref, [data-layout="editorial"] .art-ref b, [data-layout="editorial"] .art-eyebrow, [data-layout="editorial"] .art-note-k, [data-layout="editorial"] .art-rel-k, [data-layout="editorial"] .art-author-k, [data-layout="editorial"] .art-toc-n, [data-layout="editorial"] .art-mono, [data-layout="editorial"] .art-mine-k { color: #555 !important; } [data-layout="editorial"] .art-figcap { color: #444 !important; font-size: 9pt !important; } [data-layout="editorial"] p, [data-layout="editorial"] li, [data-layout="editorial"] dd, [data-layout="editorial"] .art-quote p { font-size: 11pt !important; line-height: 1.5 !important; orphans: 3; widows: 3; } [data-layout="editorial"] .art-h1 { font-size: 24pt !important; } [data-layout="editorial"] .art-h2 { font-size: 15pt !important; } [data-layout="editorial"] .art-quote p { font-size: 13pt !important; font-weight: 700; } /* A coluna de leitura e limitada em pixels de tela; no papel quem define a medida e a margem de @page, e o limite antigo deixaria uma faixa branca de tres centimetros na direita de cada folha. */ [data-layout="editorial"] .pg-wrap.art-col, [data-layout="editorial"] .art-flow, [data-layout="editorial"] .art-mining, [data-layout="editorial"] .art-synth, [data-layout="editorial"] .art-quote, [data-layout="editorial"] .art-fig, [data-layout="editorial"] .art-author { max-width: 100% !important; } /* figure e img ja sao indivisiveis pelo styles.css; aqui entram os blocos editoriais que nao sao nem um nem outro. */ [data-layout="editorial"] .art-abstract, [data-layout="editorial"] .art-note, [data-layout="editorial"] .art-flow-step, [data-layout="editorial"] .art-mine-col, [data-layout="editorial"] .art-syn, [data-layout="editorial"] .art-quote, [data-layout="editorial"] .art-controls .art-control, [data-layout="editorial"] .art-highlight, [data-layout="editorial"] .art-callout, [data-layout="editorial"] .art-keys li, [data-layout="editorial"] .art-rel-card, [data-layout="editorial"] .art-meta-row, [data-layout="editorial"] .art-author, [data-layout="editorial"] .art-final { break-inside: avoid; page-break-inside: avoid; } /* O indice vira sumario impresso, em duas colunas. Quem ABRE o

e o beforeprint de editorial.js: CSS nao abre details fechado, e no celular ele nasce fechado. A moldura precisa de cor propria porque a varredura acima deixou a borda quase branca. */ [data-layout="editorial"] .art-toc-box { border-color: #bbb !important; } [data-layout="editorial"] .art-toc-list { columns: 2; display: block !important; } [data-layout="editorial"] .art-toc-list a { min-height: 0; } /* /sobre e link relativo: nao casa com o a[href^="http"] de styles.css e sairia no papel sem endereco nenhum. */ [data-layout="editorial"] .art-author-link::after { content: " (https://www.fabimtecplan.com/sobre/#fabio)"; font-size: 9pt; } } /* ══ LEITURA (etapa 8: itens 8.11 a 8.14 e 8.21) ════════════════════════ Quase tudo aqui estiliza o que editorial.js CRIA (indice lateral, dock, dialogos, botao de ampliar); sem script esses seletores nao casam com nada. Excecoes, que existem no HTML: a barra de compartilhar e o convite para os materiais. Enxuto de proposito: estes bytes pesam em todas as publicacoes (ver o cabecalho de editorial.js). */ [data-layout="editorial"] { --side-toc-w: 232px; } [data-layout="editorial"] .art-side-toc { display: none; } /* Indice lateral fixo a partir de 1240 px: as secoes (menos o hero) recuam o tamanho do vao e as figuras largas centralizam no que sobra, entao nada passa por baixo dele. .has-side-toc so e posto pelo script. */ @media screen and (min-width: 1240px) { .has-side-toc [data-layout="editorial"] main article > :not(.art-hero):not(.wp-hero) { padding-left: calc(var(--side-toc-w) + 40px); } .has-side-toc [data-layout="editorial"] :is(.is-toc-fonte, .art-dock) { display: none; } [data-layout="editorial"] .art-side-toc { display: flex; flex-direction: column; gap: 10px; position: fixed; z-index: 80; left: clamp(16px, 2vw, 32px); top: calc(var(--header-h) + 24px); width: var(--side-toc-w); max-height: calc(100vh - var(--header-h) - 48px); padding: 16px 12px 12px; border-radius: var(--radius-m); background: rgba(7, 14, 28, .9); border: 1px solid var(--edge); } } [data-layout="editorial"] :is(.art-side-toc, .art-dock) { opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility 0s .25s; } [data-layout="editorial"] :is(.art-side-toc, .art-dock).is-on { opacity: 1; visibility: visible; transition: opacity var(--t-fast); } [data-layout="editorial"] :is(.art-side-toc-h, .art-dialog-h, .art-share-h) { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } [data-layout="editorial"] .art-side-toc-h { padding: 0 8px; } /* O clone da

serve aos dois indices; a secao atual ganha filete ciano. */ [data-layout="editorial"] .art-toc-clone { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; } [data-layout="editorial"] .art-toc-clone a { display: flex; gap: 8px; align-items: baseline; padding: 7px 8px; border-radius: 8px; border-left: 2px solid transparent; font-size: .86rem; line-height: 1.35; color: var(--txt-2); } [data-layout="editorial"] .art-toc-clone a > span:first-child { flex: none; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--txt-3); } [data-layout="editorial"] .art-toc-clone a:is(:hover, [aria-current="true"]) { color: var(--txt-1); background: var(--panel-2); } [data-layout="editorial"] .art-toc-clone a[aria-current="true"] { border-left-color: var(--cyan); } [data-layout="editorial"] .art-toc-clone a[aria-current="true"] > span:first-child { color: var(--cyan); } [data-layout="editorial"] .art-side-toc-top { align-self: flex-start; margin: 4px 8px 0; min-height: 36px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700; color: var(--sky); } /* Dock do celular e do tablet: chip "Indice" e voltar ao topo. Vidro escuro como o .back-top de styles.css, porque atravessa diagramas de fundo claro. */ [data-layout="editorial"] .art-dock { position: fixed; z-index: 90; display: flex; gap: 10px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } [data-layout="editorial"] :is(.art-dock-btn, .art-zoom-btn, .art-dialog-close) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-width: 44px; height: 44px; border-radius: 999px; font: inherit; font-weight: 700; background: rgba(10, 18, 32, .92); border: 1px solid var(--line-ctl); color: var(--txt-1); } [data-layout="editorial"] .art-dock-btn { height: 48px; padding: 0 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); } [data-layout="editorial"] .art-dock-btn--top { width: 48px; padding: 0; } [data-layout="editorial"] :is(.art-dock-btn, .art-zoom-btn, .art-dialog-close) svg { width: 18px; height: 18px; flex: none; } [data-layout="editorial"] :is(.art-dock-btn, .art-zoom-btn, .art-share-btn):hover { border-color: var(--cyan); } [data-layout="editorial"] .art-dock-btn[hidden] { display: none; } @media (max-height: 520px) { [data-layout="editorial"] .art-dock-btn--top { display: none; } } /* CTA do fim da leitura no celular (8.15): a barra e a .mcta de styles.css, criada pelo editorial.js. Com ela a vista, o dock sobe para nao ficar por baixo; sem ela, volta ao canto. No modo apresentacao do deck nao existe. */ @media (max-width: 900px) { [data-layout="editorial"] .art-dock { transition: opacity var(--t-fast), visibility 0s .25s, bottom var(--t-med); } [data-layout="editorial"].art-mcta-on .art-dock { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } html.js-deck .art-mcta { display: none !important; } /* Dialogos: indice do celular e figura ampliada. */ [data-layout="editorial"] :is(.art-toc-dialog, .art-zoom) { margin: auto; padding: 0; border: 1px solid var(--edge-2); border-radius: var(--radius-l); background: var(--bg-1); color: var(--txt-1); overscroll-behavior: contain; } [data-layout="editorial"] :is(.art-toc-dialog, .art-zoom)[open] { display: flex; flex-direction: column; } [data-layout="editorial"] :is(.art-toc-dialog, .art-zoom)::backdrop { background: rgba(2, 6, 14, .75); } [data-layout="editorial"] .art-toc-dialog { width: min(520px, calc(100vw - 24px)); max-height: min(80vh, 720px); } [data-layout="editorial"] .art-toc-dialog .art-toc-clone { padding: 8px 10px 14px; } [data-layout="editorial"] .art-toc-dialog .art-toc-clone a { font-size: 1rem; padding: 10px; min-height: 44px; } [data-layout="editorial"] .art-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--edge); } [data-layout="editorial"] .art-zoom { width: min(1600px, calc(100vw - 24px)); max-height: calc(100vh - 24px); } /* pinch-zoom: dois dedos ampliam dentro do dialogo; o overflow percorre a imagem ampliada sem rolar a pagina de tras. */ [data-layout="editorial"] .art-zoom-vp { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; background: #fff; } [data-layout="editorial"] .art-zoom-vp img { display: block; width: 100%; height: auto; } [data-layout="editorial"] .art-zoom-cap { padding: 12px 18px 16px; font-size: .95rem; line-height: 1.5; color: var(--txt-2); } [data-layout="editorial"] .has-zoom { position: relative; } [data-layout="editorial"] .has-zoom > img, [data-layout="editorial"] .has-zoom > picture > img { cursor: zoom-in; } [data-layout="editorial"] .art-zoom-btn { position: absolute; right: 10px; bottom: 10px; z-index: 2; } /* Barra de compartilhar (8.12). */ [data-layout="editorial"] .art-share { max-width: 1040px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } [data-layout="editorial"] .art-share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } [data-layout="editorial"] .art-share-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; background: var(--panel); border: 1px solid var(--edge-2); color: var(--txt-1); font: inherit; font-size: .95rem; font-weight: 700; } [data-layout="editorial"] .art-share-status { flex-basis: 100%; min-height: 1.5em; font-size: .95rem; color: var(--txt-2); } /* Convite para os materiais (8.21), dentro da coluna de texto. */ [data-layout="editorial"] .art-material { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 26px; padding: 18px 20px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge-2); } [data-layout="editorial"] .art-material-k { display: block; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } [data-layout="editorial"] .art-col .art-material p { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--txt-2); } [data-layout="editorial"] .art-material a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sky); } /* Header que se esconde ao descer, no celular (8.14). */ @media (max-width: 900px) { [data-layout="editorial"] .site-header { transition: transform .25s ease, background var(--t-med), box-shadow var(--t-med); } [data-layout="editorial"] .site-header.is-hidden { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { [data-layout="editorial"] :is(.art-side-toc, .art-dock, .site-header) { transition: none; } } @media print { [data-layout="editorial"] :is(.art-side-toc, .art-dock, .art-toc-dialog, .art-zoom, .art-zoom-btn, [data-share], .art-material) { display: none !important; } .has-side-toc [data-layout="editorial"] .is-toc-fonte { display: block !important; } .has-side-toc [data-layout="editorial"] main article > * { padding-left: 0 !important; } }