/* Artigos — formato de leitura inspirado no Medium, com a identidade do site (tokens de style.css) */
.pg-artigos{ --leitura:"Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,serif; --coluna:42rem; }
.menu a.menu-atual{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--areia); }
.art-estreito{ max-width:calc(var(--coluna) + 2.5rem); }
.botao-vazado-escuro{ border:1px solid var(--marinho); color:var(--marinho); background:transparent; }
.botao-vazado-escuro:hover{ background:var(--creme); }
.pg-artigos .botao{ text-decoration:none; }

/* barra de progresso de leitura */
.progresso{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60; background:var(--azul); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }

/* ---------- lista ---------- */
.art-capa-pagina{ padding-block:clamp(2.6rem,6vw,4.5rem) 1rem; }
.art-capa-pagina h1{ font-size:clamp(2.8rem,7vw,4.4rem); line-height:1; margin:0 0 .3em; }
.art-apresenta{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.6rem); color:var(--azul); margin:0; max-width:34rem; line-height:1.3; }
.art-lista{ padding-bottom:4rem; }
.art-vazio{ padding-block:3rem; font-size:1.1rem; }
.cartao{ display:flex; gap:1.6rem; justify-content:space-between; align-items:center; padding-block:1.9rem; border-bottom:1px solid color-mix(in srgb,var(--areia) 50%,transparent); }
.cartao-texto{ min-width:0; flex:1; }
.cartao-meta{ margin:0 0 .45rem; font-size:.85rem; color:color-mix(in srgb,var(--tinta) 70%,transparent); }
.cartao-titulo{ font-size:clamp(1.55rem,3.2vw,2.05rem); line-height:1.15; margin:0 0 .4rem; font-weight:600; }
.cartao-titulo a{ color:var(--marinho); text-decoration:none; }
.cartao-titulo a:hover{ color:var(--azul); }
.cartao-resumo{ margin:0 0 .8rem; font-family:var(--leitura); font-size:1.02rem; line-height:1.55; color:color-mix(in srgb,var(--tinta) 88%,transparent); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cartao-tags{ margin:0; display:flex; gap:.4rem; flex-wrap:wrap; }
.cartao-capa{ flex:0 0 min(34%,200px); }
.cartao-capa img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; }
.cartao-grande{ flex-direction:column-reverse; align-items:stretch; gap:1.1rem; }
.cartao-grande .cartao-capa{ flex:none; }
.cartao-grande .cartao-capa img{ aspect-ratio:16/8; border-radius:12px; }
.cartao-grande .cartao-titulo{ font-size:clamp(2rem,4.6vw,2.8rem); }
.tag{ display:inline-block; font-size:.8rem; padding:.18rem .75rem; border-radius:999px; background:var(--creme); color:var(--marinho); border:1px solid color-mix(in srgb,var(--areia) 60%,transparent); }
.paginacao{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:2rem; font-size:.95rem; }
.paginacao a{ color:var(--marinho); }

/* ---------- artigo ---------- */
.art{ position:relative; padding-bottom:3rem; }
.art-cab{ padding-top:clamp(2.2rem,5vw,3.6rem); }
.art-cab h1{ font-size:clamp(2.35rem,6vw,3.6rem); line-height:1.05; font-weight:600; letter-spacing:-.01em; margin:0 0 .35em; text-wrap:balance; }
.art-sub{ font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.3; color:var(--azul); margin:0 0 1.4rem; text-wrap:balance; }
.autoria{ display:flex; align-items:center; gap:.85rem; margin:1.4rem 0 1rem; }
.autoria-foto{ width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.autoria p{ margin:0; line-height:1.35; }
.autoria-nome{ font-weight:500; color:var(--marinho); }
.autoria-nome a{ color:inherit; text-decoration:none; }
.autoria-nome a:hover{ text-decoration:underline; }
.autoria-nome span{ font-weight:300; color:color-mix(in srgb,var(--tinta) 75%,transparent); }
.autoria-meta{ font-size:.88rem; color:color-mix(in srgb,var(--tinta) 70%,transparent); }
.art-capa{ margin:1.6rem 0 0; }
.art-capa img{ width:100%; height:auto; border-radius:12px; display:block; }

.corpo{ font-family:var(--leitura); font-size:clamp(1.14rem,1.9vw,1.28rem); line-height:1.78; color:#262626; padding-top:2rem; overflow-wrap:break-word; }
.corpo > *:first-child{ margin-top:0; }
.corpo p{ margin:0 0 1.45em; }
.corpo > p:first-of-type::first-letter{ font-family:var(--serif); font-weight:600; font-size:3.9em; line-height:.82; float:left; padding:.06em .1em 0 0; color:var(--marinho); }
.corpo h2{ font-size:clamp(1.9rem,4vw,2.35rem); line-height:1.15; margin:2em 0 .5em; font-weight:600; }
.corpo h3{ font-size:clamp(1.5rem,3vw,1.8rem); line-height:1.2; margin:1.8em 0 .4em; font-weight:600; }
.corpo a{ color:var(--azul); text-decoration-thickness:1px; }
.corpo a:hover{ color:var(--marinho); }
.corpo strong{ font-weight:700; color:#1c1c1c; }
.corpo blockquote{ margin:2em 0; padding:.2em 0 .2em 1.4rem; border-left:3px solid var(--areia); font-family:var(--serif); font-style:italic; font-size:1.55em; line-height:1.35; color:var(--marinho); }
.corpo blockquote p{ margin:0; }
.corpo ul,.corpo ol{ margin:0 0 1.5em; padding-left:1.4em; }
.corpo li{ margin-bottom:.5em; padding-left:.2em; }
.corpo hr{ border:0; text-align:center; margin:2.6rem 0; height:1.4rem; }
.corpo hr::before{ content:"• • •"; letter-spacing:.7em; color:var(--areia); font-size:1.2rem; padding-left:.7em; }
.corpo figure{ margin:2.2rem 0; }
.corpo figure img,.corpo > img{ width:100%; height:auto; border-radius:8px; display:block; margin-inline:auto; }
.corpo figcaption{ margin-top:.6rem; text-align:center; font-family:var(--sans); font-size:.88rem; color:color-mix(in srgb,var(--tinta) 70%,transparent); }
.corpo .video{ position:relative; aspect-ratio:16/9; margin:2.2rem 0; border-radius:8px; overflow:hidden; background:var(--marinho); }
.corpo .video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.corpo ::selection{ background:color-mix(in srgb,var(--areia) 55%,transparent); }

.art-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin:2.2rem 0 0; }
.art-fim{ margin-top:2.4rem; padding-block:1.6rem; border-block:1px solid color-mix(in srgb,var(--areia) 50%,transparent); }
.art-fim-t{ margin:0 0 .9rem; font-family:var(--serif); font-size:1.4rem; color:var(--marinho); line-height:1.3; }

.autora-caixa{ display:flex; gap:1.3rem; align-items:flex-start; margin-top:2.4rem; padding:1.6rem; background:var(--creme); border-radius:14px; }
.autora-caixa img{ width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex:none; }
.autora-caixa h2{ font-size:1.55rem; margin:0 0 .35rem; }
.autora-caixa p{ margin:0 0 .9rem; font-size:.97rem; line-height:1.6; }
.autora-acoes{ display:flex; gap:.6rem; flex-wrap:wrap; margin:0 !important; }
.autora-acoes .botao{ padding:.6rem 1.2rem; font-size:.92rem; }

.mais{ background:var(--creme); margin-top:3rem; padding-block:2.4rem 3rem; }
.mais h2{ font-size:1.9rem; margin-bottom:.2rem; }
.mais .cartao:last-of-type{ border-bottom:0; }

/* ---------- compartilhar ---------- */
.compartilhar{ display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.comp-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb,var(--marinho) 28%,transparent); background:transparent; color:var(--marinho); cursor:pointer; padding:0; transition:background .18s,color .18s,border-color .18s,transform .18s; }
.comp-btn svg{ width:19px; height:19px; }
.comp-btn:hover{ background:var(--marinho); color:var(--creme); border-color:var(--marinho); }
.comp-btn:active{ transform:scale(.94); }
.comp-btn[hidden]{ display:none; }
.comp-barra{ padding-block:.9rem; border-block:1px solid color-mix(in srgb,var(--areia) 45%,transparent); margin-top:.4rem; }
.comp-grande .comp-btn{ width:46px; height:46px; }
.comp-vertical{ flex-direction:column; }
.rail{ display:none; }
@media (min-width:1180px){
  .rail{ display:block; position:sticky; top:40vh; float:left; height:0; width:0; margin-left:max(1rem, calc(50vw - 33rem)); z-index:5; }
  .rail .compartilhar{ position:absolute; top:0; left:0; }
  .rail .comp-btn{ background:var(--creme-claro); }
  .rail .comp-btn:hover{ background:var(--marinho); }
}

/* trecho selecionado + aviso */
.sel-comp{ position:absolute; z-index:70; display:flex; gap:.15rem; padding:.3rem; background:var(--marinho); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.sel-comp[hidden]{ display:none; }
.sel-comp button{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--creme); cursor:pointer; }
.sel-comp button:hover{ background:var(--azul); }
.sel-comp svg{ width:18px; height:18px; }
.aviso-copiado{ position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%,20px); background:var(--marinho); color:var(--creme); padding:.6rem 1.2rem; border-radius:999px; font-size:.92rem; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:80; }
.aviso-copiado.on{ opacity:1; transform:translate(-50%,0); }

@media (max-width:640px){
  .cartao{ gap:1rem; }
  .cartao-capa{ flex-basis:96px; }
  .cartao-resumo{ -webkit-line-clamp:2; }
  .corpo > p:first-of-type::first-letter{ font-size:3.4em; }
  .autora-caixa{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ .comp-btn,.aviso-copiado{ transition:none; } }
@media print{ .topo,.rail,.comp-barra,.art-fim,.progresso,.mais,.rodape,.sel-comp{ display:none !important; } }