/* =====================================================================
   Notícias do I'Max — índice, editoria, busca e matéria
   ---------------------------------------------------------------------
   Vale para /noticias, /categoria/<slug>, /busca/ e /noticia/<slug>.
   Os tokens (cores, fontes, medidas) vêm do skin.css; aqui só o que é
   do blog.

   Regras da rede que estão amarradas neste arquivo — mexer nelas quebra
   coisa conhecida:
     • título de card NUNCA é cortado (nada de line-clamp): quem iguala
       a altura dos cards é o flex, não o corte do texto;
     • .bpost-article tem min-width:0 — sem isso uma galeria ou tabela
       larga estica a coluna do grid e a página inteira sai de lado;
     • a lateral gruda pelo wrapper interno (.bpost-sidebar-sticky), e o
       topo dela precisa passar do cabeçalho fixo, senão os ícones de
       compartilhar ficam escondidos atrás dele;
     • a galeria usa [id^="swiperdiv"] (uma matéria pode ter mais de uma)
       e object-fit:contain — a foto cabe inteira, nunca é cortada;
     • as regras de foto do corpo trazem :not(.galleryimg): sem isso elas
       vencem as da galeria e voltam a cortar a imagem e a duplicar a
       legenda dentro do carrossel.
   ===================================================================== */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.menu a.active{color:var(--teal)}
.menu a.active::after{right:0}

/* ---------- cabeçalho de página (padrão das internas) ---------- */
.pagehead{background:var(--teal-deep);color:#eaf6f5;padding:24px 0 48px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.pagehead::before{content:"";position:absolute;top:-120px;right:-100px;width:380px;height:380px;background:radial-gradient(circle,rgba(102,200,198,.13),transparent 70%);border-radius:50%}
.pagehead .wrap{position:relative;z-index:1}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#7fa8a6;margin-bottom:28px}
.breadcrumb a{color:#9fb8b7}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{color:#4d6b6a}
.breadcrumb .cur{color:#fff}
.pagehead .kick.light{color:#66c8c6}
.pagehead h1{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.8vw,54px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin-top:14px;max-width:20ch}
.pagehead h1 .accent{color:var(--amber)}
.pagehead h1 em{font-style:italic;color:var(--amber)}
.pagehead .dek{font-size:clamp(17px,2vw,20px);color:#bcd4d3;margin-top:18px;max-width:62ch;line-height:1.5}
.pagehead .dek b{color:#fff;font-weight:600}
.pagehead-proof{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.pagehead-proof span{font-family:var(--disp);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#9fb8b7;display:inline-flex;align-items:center;gap:9px}
.pagehead-proof span::before{content:"";width:8px;height:8px;border-radius:50%;background:#66c8c6;flex:0 0 auto}
.pagehead--cat h1{max-width:24ch}

/* busca dentro do cabeçalho */
.bbusca{display:flex;gap:10px;margin-top:30px;max-width:520px}
.bbusca input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:13px 20px;font-family:var(--font);font-size:16px}
.bbusca input::placeholder{color:#8fadac}
.bbusca input:focus{outline:none;border-color:#66c8c6;background:rgba(255,255,255,.12)}
.bbusca .btn{padding:13px 24px;font-size:15px}

/* ---------- faixa de busca (fundo claro, logo abaixo do cabeçalho) ---------- */
.bbuscafaixa{background:var(--surface);border-bottom:1px solid var(--line);padding:20px 0}
.bbf-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bbf-form label{font-family:var(--disp);font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.bbf-campo{position:relative;flex:1 1 340px;min-width:0}
.bbf-campo svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.bbf-campo input{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:13px 20px 13px 44px;font-family:var(--font);font-size:16px;color:var(--ink)}
.bbf-campo input::placeholder{color:#9aa8a7}
.bbf-campo input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,107,110,.12)}
.bbf-form .btn{padding:13px 26px;font-size:15px;flex:0 0 auto}

/* ---------- convite para a newsletter ---------- */
.bnl{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0}
.bnl-in{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
.bnl h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--ink);margin-top:12px;line-height:1.08;letter-spacing:-.01em}
.bnl h2 em{font-style:italic;color:var(--teal)}
.bnl p{margin-top:12px;color:var(--text);max-width:62ch;font-size:17px}
.bnl p b{color:var(--ink);font-weight:700}
.bnl-ultima{display:inline-flex;align-items:baseline;gap:10px;margin-top:16px;font-size:16px;font-weight:600;color:var(--teal);line-height:1.35}
.bnl-ultima span{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);flex:0 0 auto}
.bnl-ultima:hover{color:var(--red)}
.bnl-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bnl-btn{background:#0A66C2;color:#fff;white-space:nowrap}
.bnl-btn:hover{background:#08508f;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(10,102,194,.7)}
.bnl-nota{font-family:var(--disp);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* ---------- seções ---------- */
.bsec{padding:64px 0;background:var(--paper)}
.bsec--lead{padding:56px 0 10px}
.bsec--rel{background:var(--surface);border-top:1px solid var(--line);padding:72px 0}
.bsec-head{margin-bottom:30px}
.bsec-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,40px);color:var(--ink);margin-top:12px;letter-spacing:-.01em}
.bsec-head h2 em{font-style:italic;color:var(--teal)}
.bsec-todas{margin-top:30px}
.bsec-todas a{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:var(--teal)}
.bsec-todas a:hover{color:var(--red)}

/* ---------- grade de cards ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}

/* ---------- card ---------- */
/* três níveis de flex para os cards de uma linha terminarem na mesma altura
   SEM cortar título nenhum: o article estica, o corpo cresce, o rodapé de
   meta encosta na base. */
.bcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0;transition:border-color .2s,box-shadow .2s,transform .2s}
.bcard:hover{border-color:#cfdbda;box-shadow:0 18px 40px -26px rgba(8,42,43,.45);transform:translateY(-3px)}
/* âncora invisível cobrindo o card: a foto e o espaço vazio levam ao post.
   A etiqueta fica POR CIMA dela (z-index), então mantém o destino próprio. */
.bcard-bg{position:absolute;inset:0;z-index:1}
.bcard-ph{position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:16/9}
.bcard-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bcard:hover .bcard-ph img{transform:scale(1.045)}
.bcard-badge{position:absolute;left:12px;bottom:12px;z-index:3;font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--badge);border-radius:999px;padding:6px 13px;line-height:1;transition:filter .18s}
.bcard-badge:hover{filter:brightness(1.18)}
.bcard-badge--flat{position:static;align-self:flex-start;margin-bottom:12px}
/* selo editorial (label_bot): veredito da redação, só visual — clicar nele
   segue para o post, como em qualquer outro ponto do card. */
.bcard-selo{position:absolute;right:12px;top:12px;z-index:2;pointer-events:none;font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);background:rgba(255,255,255,.94);border:1.5px solid currentColor;border-radius:4px;padding:5px 11px;line-height:1;display:inline-flex;align-items:center;gap:7px;transform:rotate(-1.5deg)}
.bcard-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bcard-body{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;padding:20px 20px 18px;pointer-events:none}
.bcard-body a,.bcard-body button{pointer-events:auto}
.bcard-body h2,.bcard-body h3{margin:0}
/* cor de repouso explícita: sem ela o título herda a cor do link no hover e
   "acende" junto quando o mouse está na etiqueta — dois destinos diferentes
   não podem reagir como um só. */
.bcard-title{display:block;font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.16;letter-spacing:-.01em;color:var(--ink);transition:color .18s}
.bcard-title:hover{color:var(--teal)}
.bcard-desc{margin-top:11px;font-size:15.5px;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard-meta{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}

/* retrancas: chamadas que a redação amarrou a este post */
.bcard-retranca{position:relative;z-index:2;list-style:none;margin:0;padding:0 20px 18px;display:flex;flex-direction:column;gap:7px}
.bcard-retranca a{display:block;position:relative;padding-left:16px;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--text)}
.bcard-retranca a::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
.bcard-retranca a:hover{color:var(--teal)}

/* card em destaque: foto à esquerda, texto à direita.
   Em grade (e não em linha) porque a lista de retrancas precisa cair EMBAIXO do
   texto — em flex-row ela virava uma terceira coluna espremida. */
.bcard--lead{display:grid;grid-template-columns:56% 1fr;align-items:stretch}
.bcard--lead .bcard-ph{grid-row:1/3;flex:none;aspect-ratio:auto;height:100%;min-height:340px}
.bcard--lead .bcard-body{padding:38px 40px}
.bcard--lead .bcard-retranca{padding:0 40px 30px}
.bcard--lead .bcard-title{font-size:clamp(26px,3vw,38px);line-height:1.1}
.bcard--lead .bcard-desc{font-size:17.5px;-webkit-line-clamp:4;margin-top:16px}
.bcard--lead .bcard-badge{left:18px;bottom:18px;font-size:12.5px}

/* card horizontal compacto (lateral, listas curtas) */
.bcard--linha{flex-direction:row;align-items:stretch}
.bcard--linha .bcard-ph{flex:0 0 116px;aspect-ratio:1/1}
.bcard--linha .bcard-body{padding:14px 16px}
.bcard--linha .bcard-title{font-size:16px}
.bcard--linha .bcard-badge{display:none}

/* gatilho de vídeo na foto (a redação cola a URL do YouTube no imgalt) */
.bcard-ph .byt-play,.byt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:rgba(235,30,47,.92);display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.36);transition:transform .2s,background .2s;cursor:pointer}
.byt-play::before{content:"";width:0;height:0;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.bcard:hover .byt-play{transform:translate(-50%,-50%) scale(1.08)}

/* ---------- carregar mais / vazio ---------- */
.bmais{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:12px}
.bmais-cont{font-family:var(--disp);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.bvazio{background:var(--surface);border:1px dashed #cbd7d6;border-radius:16px;padding:56px 40px;text-align:center}
.bvazio h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,32px);color:var(--ink)}
.bvazio p{margin:14px auto 0;max-width:56ch;color:var(--text)}
.bvazio p a{color:var(--teal);font-weight:600;border-bottom:1px solid rgba(0,107,110,.35)}
.bvazio p a:hover{color:var(--red);border-color:var(--red)}
.bvazio .btn{margin-top:26px}

/* ---------- chamada final ---------- */
.bcta{background:var(--hd);color:#eaf6f5;padding:72px 0}
.bcta-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.bcta h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,36px);color:#fff;margin-top:12px;max-width:26ch;line-height:1.08}
.bcta p{margin-top:14px;color:#a9c4c3;max-width:56ch}
.bcta-btns{display:flex;flex-direction:column;gap:12px}
.bcta .btn-out{color:#fff;border-color:rgba(255,255,255,.3)}
.bcta .btn-out:hover{border-color:#fff;color:#fff}

/* =====================================================================
   MATÉRIA
   ===================================================================== */
.bpost{padding:34px 0 10px;background:var(--paper)}
.bpost .breadcrumb{color:var(--muted);margin-bottom:24px}
.bpost .breadcrumb a{color:var(--teal)}
.bpost .breadcrumb a:hover{color:var(--red)}
.bpost .breadcrumb .sep{color:#b9c6c5}
.bpost .breadcrumb .cur{color:var(--ink)}

.bpost-head{max-width:24ch;max-width:min(100%,940px)}
.bpost-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(32px,5vw,58px);line-height:1.02;letter-spacing:-.022em;color:var(--ink)}
.bpost-desc{margin-top:20px;font-size:clamp(18px,2.1vw,23px);line-height:1.45;color:var(--text);max-width:62ch}
.bpost-meta{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.bpost-meta b{color:var(--ink);font-weight:800}
.bpost-selo{font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--teal);border:2px solid currentColor;border-radius:4px;padding:5px 13px;display:inline-flex;align-items:center;gap:8px;transform:rotate(-1.5deg)}
.bpost-selo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* foto de topo + legenda: uma peça só. A foto arredonda em cima, a legenda
   fecha embaixo, sem folga entre as duas — soltas, leem como dois blocos. */
.bpost-hero{margin:32px 0 0}
.bpost-hero img{width:100%;max-height:680px;object-fit:cover;border-radius:14px 14px 0 0;display:block}
.bpost-caption,.ph-content figure:not(.galleryimg)>figcaption{margin:0;padding:11px 16px;background:var(--surface);border-left:3px solid var(--red);border-radius:0 0 10px 10px;font-size:13.5px;font-style:italic;line-height:1.45;color:var(--muted);text-align:left}

/* grid do corpo + lateral */
.bpost-layout{display:grid;grid-template-columns:1fr;gap:34px;margin-top:40px}
@media(min-width:1000px){.bpost-layout{grid-template-columns:minmax(0,1fr) 300px;gap:56px}}
/* OBRIGATÓRIO: sem isso, uma galeria ou tabela larga alarga a coluna 1fr e a
   página inteira ganha rolagem lateral, com o título saindo da tela. */
.bpost-layout>.bpost-article{min-width:0}

.bpost-sidebar{display:none}
@media(min-width:1000px){.bpost-sidebar{display:block}}
/* quem gruda é a div de dentro; o <aside> precisa continuar esticado pela
   célula do grid, senão não sobra altura para grudar. */
.bpost-sidebar-sticky{position:sticky;top:106px;display:flex;flex-direction:column;gap:20px}
.bpost-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.bpost-box p{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--text)}
.bpost-box .btn{margin-top:18px;width:100%;justify-content:center;font-size:14px;padding:13px 18px}
.bpost-box-sec{display:block;margin-top:14px;font-family:var(--disp);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--teal)}
.bpost-box-sec:hover{color:var(--red)}

/* compartilhar */
.bpost-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bpost-share--mobile{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.bpost-share--desktop{display:none}
@media(min-width:1000px){.bpost-share--mobile{display:none}.bpost-share--desktop{display:flex}}
.bpost-share-rot{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:100%}
.bpost-share a,.bpost-share button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:inline-flex;align-items:center;justify-content:center;color:var(--teal);cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;padding:0}
.bpost-share svg{width:19px;height:19px;fill:currentColor}
.bpost-share .bpost-copy svg{fill:none;stroke:currentColor}
.bpost-share a:hover,.bpost-share button:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-2px)}
.bpost-copy.ok{background:var(--teal);border-color:var(--teal);color:#fff}

/* rodapé da matéria: a editoria fica AQUI, nunca acima do H1 */
.bpost-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bpost-foot-rot{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bpost-foot-cat{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--badge);border-radius:999px;padding:7px 15px;transition:filter .18s}
.bpost-foot-cat:hover{filter:brightness(1.18)}

.bpost-tags{margin-top:22px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bpost-tags-rot{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bpost-tags a{font-size:14px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;transition:border-color .18s,color .18s}
.bpost-tags a:hover{border-color:var(--teal);color:var(--teal)}

/* ficha de quem escreveu */
.bpost-autorcard{margin-top:34px;display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:24px}
.bac-foto,.bac-ini{flex:0 0 74px;width:74px;height:74px;border-radius:50%;object-fit:cover}
.bac-ini{display:flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:.02em}
.bac-rot{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bpost-autorcard h3{font-family:var(--disp);font-weight:800;font-size:21px;color:var(--ink);margin-top:6px}
.bac-cargo{font-family:var(--disp);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--teal);margin-top:3px}
.bac-bio{margin-top:10px;font-size:16px;line-height:1.55;color:var(--text)}

/* =====================================================================
   CORPO DA MATÉRIA (.ph-content — saída do postprocess_clean)
   ===================================================================== */
.bpost-body{margin-top:4px}
.ph-content{font-size:20px;line-height:1.72;color:var(--ink);max-width:68ch}
.ph-content::after{content:"";display:table;clear:both}
.ph-content>p{margin-bottom:1.15em;text-align:left}
.ph-content>ul,.ph-content>ol{margin:22px 0;padding-left:1.5em;text-align:left}
.ph-content li{margin:0 0 .8em;padding-left:.3em}
.ph-content li:last-child{margin-bottom:0}
.ph-content li::marker{color:var(--red);font-weight:700}
.ph-content>p:last-child{margin-bottom:0}
/* URL longa colada como texto não pode furar a coluna */
.ph-content,.ph-content p,.ph-content li,.ph-content a{overflow-wrap:break-word}
.ph-content a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.ph-content a:hover{color:var(--red);text-decoration:none}
.ph-content strong,.ph-content b{font-weight:700;color:var(--ink)}
.ph-content h2,.ph-content h3,.ph-content h4{font-family:var(--disp);font-weight:800;color:var(--ink);margin:38px 0 12px;line-height:1.12;clear:both}
.ph-content h2{font-size:30px}
.ph-content h3{font-size:26px}
.ph-content h4{font-size:22px}

/* entretítulo: o "Enorme" do editor. Só isso vira subtítulo — negrito de linha
   inteira é ênfase da redação, não seção. */
.ph-content .cj-entre{font-family:var(--disp);font-weight:800;font-size:28px;line-height:1.14;color:var(--teal);margin:40px 0 14px;clear:both}
.ph-content .cj-entre .cj-hlx{display:inline}

/* citação ([[OLHO:]]) — o crédito fica FORA da moldura, embaixo */
.ph-content .citacao{margin:38px 0;padding:6px 0 0 26px;border-left:4px solid var(--red);clear:both}
.ph-content .citacao q{display:block;quotes:none;font-family:var(--disp);font-weight:700;font-size:25px;line-height:1.28;color:var(--ink);font-style:italic}
.ph-content .citacao q::before,.ph-content .citacao q::after{content:none}
.ph-content .citacao .author{margin-top:12px;font-family:var(--disp);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:right}

/* card "Leia também" no meio do texto */
.ph-content .cj-leia-card{float:right;clear:right;width:250px;margin:6px 0 18px 26px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;overflow:hidden}
.ph-content .cj-leia-label{display:block;font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);padding:11px 14px 0}
.ph-content .cj-leia-link{display:block;text-decoration:none;padding:8px 14px 14px}
.ph-content .cj-leia-img{display:block;margin-bottom:10px}
.ph-content .cj-leia-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block}
.ph-content .cj-leia-title{display:block;font-family:var(--disp);font-weight:800;font-size:16.5px;line-height:1.2;color:var(--ink);transition:color .18s}
.ph-content .cj-leia-link:hover .cj-leia-title{color:var(--teal)}

/* foto do corpo — o teto de altura e o alinhamento escolhido no editor.
   :not(.galleryimg) em TODAS elas: a galeria tem moldura própria e, sem a
   exclusão, estas regras vencem as dela e voltam a cortar a foto. */
.ph-content figure:not(.galleryimg){margin:32px auto;display:table;max-width:100%}
.ph-content figure:not(.galleryimg) img{display:block;max-height:680px;height:auto;width:auto;max-width:100%;object-fit:contain;border-radius:10px}
.ph-content figure.post-photo.image_resized:not(.galleryimg) img{width:100%}
.ph-content figure:not(.galleryimg)>figcaption{display:table-caption;caption-side:bottom;width:auto;max-width:100%}
.ph-content figure.image-style-align-left:not(.galleryimg){float:left;max-width:42%;margin:8px 26px 18px 0}
.ph-content figure.image-style-align-right:not(.galleryimg),
.ph-content figure.image-style-side:not(.galleryimg){float:right;max-width:42%;margin:8px 0 18px 26px}
.ph-content>img,.ph-content>p>img{max-height:680px;height:auto;width:auto;max-width:100%;border-radius:10px}

/* tabela: rola dentro da coluna em vez de furar a página */
.ph-content figure.table,.ph-content>table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:30px 0}
.ph-content table{border-collapse:collapse;font-size:16.5px;min-width:100%}
.ph-content th,.ph-content td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.ph-content th{background:var(--surface);font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:13.5px;letter-spacing:.04em}

/* vídeo do YouTube */
.ph-content .ytwrap{position:relative;margin:32px auto;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.ph-content .ytwrap--short{aspect-ratio:9/16;max-width:340px}
.ph-content .ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Instagram / TikTok. A base NUNCA leva teto de altura: o embed com legenda é
   alto, e um teto herdado corta o texto mesmo depois de expandir. Quem corta é
   só a classe do estado colapsado. */
.ph-content .iconv{margin:32px auto;display:flex;justify-content:center;position:relative}
.ph-content .iconv,.ph-content .iconv iframe,.ph-content .iconv blockquote{max-height:none}
.ph-content .iconv.cj-collapsed{max-height:560px;overflow:hidden;display:block}
.ph-content .iconv.cj-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to top,var(--paper) 14%,rgba(255,255,255,0));pointer-events:none;z-index:3}
.ph-content .iconv .cj-iconv-expand{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;background:var(--red);color:#fff;border:0;border-radius:999px;padding:10px 22px;font-family:var(--disp);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 20px -6px rgba(235,30,47,.6)}
.ph-content .iconv .cj-iconv-expand:hover{background:var(--red-h)}
.ph-content .cj-social-link a{font-weight:600}

/* Spotify, gráfico/mapa embutido, áudio e vídeo enviados pela redação */
.ph-content .cj-spotify{display:block;margin:28px 0}
.ph-content .cj-spotify iframe{display:block;width:100%;border:0;border-radius:12px}
.ph-content .cj-embed-frame{margin:30px 0;height:680px}
.ph-content .cj-embed-frame iframe{width:100%;height:100%;border:0;border-radius:12px}
.ph-content .cj-embed-blocked{background:var(--surface);border:1px dashed #cbd7d6;border-radius:10px;padding:14px 18px;font-size:15px;color:var(--muted)}
.ph-content .cj-post-audio,.ph-content .cj-post-video{margin:28px 0}
.ph-content .cj-post-audio audio{width:100%}
.ph-content .cj-post-video video{width:100%;max-height:680px;border-radius:12px;background:#000}

/* =====================================================================
   GALERIA (carrossel)
   ---------------------------------------------------------------------
   Sempre [id^="swiperdiv"]: a primeira galeria da matéria é #swiperdiv e as
   seguintes são swiperdiv-2, -3… Com o seletor de id direto, da segunda em
   diante a galeria fica sem estilo nenhum.
   ===================================================================== */
[id^="swiperdiv"]{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden;border-radius:12px 12px 0 0;margin:34px 0 0}
[id^="swiperdiv"] .swiper-wrapper{height:100%}
[id^="swiperdiv"] .swiper-slide{display:flex;align-items:center;justify-content:center;height:100%}
/* a foto cabe INTEIRA no quadro (contain, nunca cover): sobra tarja preta em
   cima ou dos lados, mas nada da imagem é cortado. */
[id^="swiperdiv"] .swiper-slide img,[id^="swiperdiv"] figure.galleryimg img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0;max-height:none}
/* o editor às vezes grava style="width:75%" na figura; dentro da galeria isso
   encolheria a foto e deixaria tarjas laterais enormes. */
[id^="swiperdiv"] figure.galleryimg,[id^="swiperdiv"] figure.galleryimg[style]{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;display:block!important;height:100%}
[id^="swiperdiv"] .swiper-slide figcaption{display:none!important}
[id^="swiperdiv"] .swiper-btn-prev,[id^="swiperdiv"] .swiper-btn-next{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s;font-size:22px;line-height:1;padding:0}
[id^="swiperdiv"] .swiper-btn-prev{left:14px}
[id^="swiperdiv"] .swiper-btn-next{right:14px}
[id^="swiperdiv"] .swiper-btn-prev:hover,[id^="swiperdiv"] .swiper-btn-next:hover{background:var(--teal)}
[id^="swiperdiv"] .swiper-contador{position:absolute;top:12px;right:12px;z-index:5;background:var(--teal);color:#fff;font-family:var(--disp);font-size:12.5px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:5px 12px}
.swiper-captionbar{margin:0 0 34px;padding:11px 16px;background:var(--surface);border-left:3px solid var(--teal);border-radius:0 0 10px 10px;font-size:13.5px;font-style:italic;line-height:1.45;color:var(--muted);min-height:42px}

/* =====================================================================
   VÍDEO EM MODAL (foto de card com URL de YouTube no imgalt)
   ===================================================================== */
.byt-modal{display:none;position:fixed;inset:0;background:rgba(4,25,26,.94);z-index:2147483000;align-items:center;justify-content:center;padding:22px}
.byt-modal.open{display:flex}
.byt-modal-in{position:relative;width:100%;max-width:980px;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.byt-modal-in iframe{width:100%;height:100%;border:0;display:block}
.byt-fechar{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.byt-fechar:hover{background:rgba(255,255,255,.16)}

/* =====================================================================
   TELAS ESTREITAS
   ===================================================================== */
@media(max-width:1000px){
  .bgrid{grid-template-columns:repeat(2,1fr);gap:20px}
  .bcard--lead{grid-template-columns:1fr}
  .bcard--lead .bcard-ph{grid-row:auto;aspect-ratio:16/9;min-height:0}
  .bcard--lead .bcard-body{padding:24px}
  .bcard--lead .bcard-retranca{padding:0 24px 22px}
  .ph-content{max-width:none}
  .bcta-in{grid-template-columns:1fr}
  .bcta-btns{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:760px){
  .bsec{padding:44px 0}
  .bsec--rel{padding:48px 0}
  .bgrid{grid-template-columns:1fr;gap:18px}
  .bcard-title{font-size:19px}
  .bcard--lead .bcard-title{font-size:26px}
  .bpost{padding:24px 0 6px}
  /* matriz de tipografia móvel da rede: manchete de matéria 36/42 */
  .bpost-head h1{font-size:36px;line-height:42px}
  .bpost-desc{font-size:17.5px}
  .bpost-hero img{border-radius:10px 10px 0 0}
  .ph-content{font-size:18px;line-height:1.66}
  .ph-content .cj-entre{font-size:23px}
  .ph-content .citacao q{font-size:20px}
  /* o card do "leia também" ocupava a largura toda e virava um bloco no meio
     da leitura; a metade da coluna mantém o texto correndo ao lado. */
  .ph-content .cj-leia-card{width:48%;margin:4px 0 14px 16px}
  .ph-content figure.image-style-align-left:not(.galleryimg),
  .ph-content figure.image-style-align-right:not(.galleryimg),
  .ph-content figure.image-style-side:not(.galleryimg){max-width:46%;margin-bottom:14px}
  [id^="swiperdiv"]{aspect-ratio:4/3}
  .bpost-autorcard{flex-direction:row;gap:14px;padding:18px}
  .bac-foto,.bac-ini{flex:0 0 56px;width:56px;height:56px;font-size:20px}
  .bbusca{max-width:none}
  .bbf-form{gap:10px}
  .bbf-form label{width:100%}
  .bbf-campo{flex:1 1 100%}
  .bbf-form .btn{width:100%;justify-content:center}
  .bnl{padding:40px 0}
  .bnl-in{grid-template-columns:1fr;gap:22px}
  .bnl-cta{align-items:stretch}
  .bnl-btn{justify-content:center}
}

/* ===========================================================================
   LANDING DO JORNALISTA  ·  /categoria/<slug-do-autor>   (autor.md §4)
   ---------------------------------------------------------------------------
   A ficha vive DENTRO do pagehead, que é escuro — por isso ela não reaproveita
   o card claro do pé da matéria (.bpost-autorcard). Mesmo conteúdo, dois
   ambientes de cor: forçar um só deixaria texto cinza-escuro sobre teal.
   =========================================================================== */
.bautor-ficha{display:flex;gap:22px;align-items:flex-start;margin-top:26px;padding:22px 24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-left:4px solid var(--amber);border-radius:14px;max-width:70ch}
.bautor-foto,.bautor-ini{flex:0 0 84px;width:84px;height:84px;border-radius:50%;object-fit:cover;display:block}
.bautor-ini{display:flex;align-items:center;justify-content:center;background:#66c8c6;color:var(--teal-deep);font-family:var(--disp);font-weight:800;font-size:30px}
.bautor-txt{min-width:0;display:flex;flex-direction:column;gap:8px}
.bautor-cargo{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#66c8c6;margin:0}
.bautor-bio{font-size:16.5px;line-height:1.55;color:#cfe3e2;margin:0}
.pagehead--autor h1{max-width:20ch}

/* Assinatura clicável (autor.md §6.2): a conjunção fica FORA da âncora, então
   só o nome acende. Em card e matéria a cor é a do texto de apoio — quem lê
   precisa distinguir assinatura de link de leitura, não competir com o título. */
.bautor{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.bautor:hover{color:var(--teal);border-bottom-color:currentColor}
.bpost-autor .bautor{color:var(--ink);font-weight:600}
.bpost-autorcard h3 a{color:inherit;text-decoration:none}
.bpost-autorcard h3 a:hover{color:var(--teal)}

/* ---------------------------------------------------------------------------
   Card "Leia também" no meio do texto: o que vem DEPOIS dele começa do zero.
   Sem isso o card (float:right) sequestra a linha de baixo — a foto editorial
   ou a galeria seguinte nasce espremida ao lado dele, com metade da largura,
   e parece defeito de imagem. Só o texto contorna o card; mídia, não.
   As fotos que a própria redação mandou flutuar (image-style-align-*) ficam
   de fora: nelas o contorno é decisão editorial.
   --------------------------------------------------------------------------- */
.ph-content figure:not(.galleryimg):not([class*="image-style-align"]):not(.image-style-side),
.ph-content [id^="swiperdiv"],
.ph-content .swiper-captionbar,
.ph-content .ytwrap,
.ph-content .iconv,
.ph-content .cj-embed-frame,
.ph-content .cj-post-audio,
.ph-content .cj-post-video,
.ph-content .citacao{clear:both}

@media (max-width:640px){
  .bautor-ficha{flex-direction:column;gap:14px;padding:18px 20px}
  .bautor-foto,.bautor-ini{flex:0 0 72px;width:72px;height:72px}
}

/* A assinatura no card vai para OUTRO endereço que o card (a landing do
   jornalista), então precisa subir acima da âncora invisível que cobre o card
   — é a mesma solução da etiqueta de editoria e das retrancas (cards.md §1c).
   Sem isso o nome parece link, tem cursor de link, e abre a matéria. */
.bcard-autor{position:relative;z-index:2}

/* Faixa "Quem escreve" no índice — os cartões levam à landing do jornalista. */
.bsec--redacao{padding-top:0}
.bredacao{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.bred-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.bred-card:hover{border-color:#cfdbda;box-shadow:0 14px 32px -24px rgba(8,42,43,.45);transform:translateY(-2px)}
.bred-foto,.bred-ini{flex:0 0 64px;width:64px;height:64px;border-radius:50%;object-fit:cover;display:block}
.bred-ini{display:flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;font-family:var(--disp);font-weight:800;font-size:22px}
.bred-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.bred-nome{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--ink);transition:color .18s}
.bred-card:hover .bred-nome{color:var(--teal)}
.bred-cargo{font-size:14px;color:var(--text)}
.bred-conta{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* Selo editorial grande no card de destaque (label_bot.md §5): mesmo texto e
   mesma cor do selo normal, só maior — o destaque tem foto maior e o carimbo
   no tamanho da grade sumiria dentro dela. */
.bcard--lead .bcard-selo{font-size:13.5px;letter-spacing:.18em;padding:8px 16px;right:18px;top:18px}
.bcard--lead .bcard-selo::before{width:8px;height:8px}