/* ============================================================
   Trilion Signature — artigos do blog (categoria Signature)
   Só o que o artigo precisa além do trilion.css: abertura, sumário, texto, perguntas e "mais deste canal".
   Tudo sob .ts-artigo; usa as variáveis e as fontes de trilion.css (Fraunces, InterTS, onyx, ouro).
   ============================================================ */

/* ---- abertura ---- */
.ts-artigo .ts-ahero{padding:clamp(120px,14vw,176px) 0 clamp(48px,6vw,84px);position:relative;
  background:radial-gradient(120% 90% at 85% 0%,rgba(201,168,76,.10),transparent 60%),var(--onyx)}
.ts-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(28px,4vw,52px)}
.ts-crumb a:hover{color:var(--gold-light)}
.ts-crumb span[aria-hidden]{color:var(--bronze)}
.ts-agrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,84px);align-items:center}
.ts-atxt h1{font-weight:300;font-size:clamp(34px,5vw,62px);line-height:1.08;letter-spacing:-.012em;margin:.5em 0 0;text-wrap:balance}
.ts-ameta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:30px 0 0;padding:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ts-ameta span+span{position:relative}
.ts-ameta span+span::before{content:"";position:absolute;left:-14px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--gold);transform:translateY(-50%)}
.ts-aimg{margin:0;position:relative;aspect-ratio:4/5;max-height:620px;justify-self:end;width:100%;max-width:480px;overflow:hidden;border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.ts-aimg::after{content:"";position:absolute;inset:10px;border:1px solid rgba(201,168,76,.28);pointer-events:none}
.ts-aimg img{width:100%;height:100%;object-fit:cover}

/* ---- corpo: sumário e texto ---- */
.ts-abody{border-top:1px solid var(--hair);padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px)}
.ts-acols{display:grid;grid-template-columns:260px minmax(0,740px);gap:clamp(36px,6vw,88px);justify-content:center}
.ts-toc{position:sticky;top:28px;align-self:start;max-height:calc(100vh - 56px);overflow:auto}
.ts-toc ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:toc;border-left:1px solid var(--hair)}
.ts-toc li{counter-increment:toc}
.ts-toc a{display:block;padding:9px 0 9px 18px;margin-left:-1px;border-left:1px solid transparent;font-size:14px;line-height:1.4;color:var(--muted);transition:color .2s,border-color .2s}
.ts-toc a::before{content:counter(toc,decimal-leading-zero) "  ";font-size:11px;letter-spacing:.14em;color:var(--bronze)}
.ts-toc a:hover,.ts-toc a.on{color:var(--gold-light);border-left-color:var(--gold)}
.ts-prog{height:2px;margin-top:26px;background:var(--hair);overflow:hidden}
.ts-prog i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

.ts-prose{font-size:18px;line-height:1.8;color:rgba(247,242,232,.86)}
.ts-prose>p:first-child{font-family:var(--disp);font-weight:300;font-size:clamp(21px,2.4vw,26px);line-height:1.55;color:var(--cream)}
.ts-prose p{margin:0 0 1.15em}
.ts-prose strong{font-weight:600;color:var(--cream)}
.ts-prose a{color:var(--gold-light);text-decoration:underline;text-decoration-color:rgba(201,168,76,.45);text-underline-offset:.2em;transition:.2s}
.ts-prose a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.ts-prose h2{font-family:var(--disp);font-weight:300;font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-.01em;color:var(--cream);
  margin:clamp(54px,7vw,92px) 0 .6em;padding-top:28px;border-top:1px solid var(--hair);scroll-margin-top:24px;text-wrap:balance}
.ts-prose h3{font-family:var(--accent);font-weight:500;font-size:clamp(19px,2vw,22px);line-height:1.3;color:var(--gold-light);margin:2em 0 .5em;scroll-margin-top:24px}
.ts-prose ul,.ts-prose ol{margin:0 0 1.3em;padding-left:1.35em}
.ts-prose li{margin:.45em 0;padding-left:.2em}
.ts-prose li::marker{color:var(--gold)}
.ts-prose blockquote{margin:2em 0;padding:.3em 0 .3em 1.6em;border-left:2px solid var(--gold);font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.6vw,29px);line-height:1.4;color:var(--gold-light)}
.ts-prose .ts-fecho{color:var(--gold-light)}
.ts-prose .ts-fecho~p:last-of-type{font-size:14px;line-height:1.7;color:var(--muted);padding-top:1.2em;border-top:1px solid var(--hair);margin-top:2.4em}

.ts-resumo{margin:2.2em 0 2.6em;padding:26px 30px 14px;border:1px solid var(--hair);border-radius:3px;background:rgba(201,168,76,.06)}
.ts-resumo .kicker{display:block;margin-bottom:12px;font-size:12px}
.ts-resumo ul{margin:0 0 .6em;padding-left:1.2em}

/* ---- perguntas ---- */
.ts-qa{border-bottom:1px solid var(--hair)}
.ts-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:20px 0;
  font-family:var(--disp);font-weight:300;font-size:clamp(19px,2.1vw,23px);line-height:1.35;color:var(--cream)}
.ts-qa summary::-webkit-details-marker{display:none}
.ts-qa summary::after{content:"+";flex:none;font-family:var(--body);font-size:24px;line-height:1;color:var(--gold);transition:transform .25s}
.ts-qa[open] summary::after{transform:rotate(45deg)}
.ts-qa summary:hover{color:var(--gold-light)}
.ts-qa summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.ts-qa p{margin:0 0 1.4em;color:rgba(247,242,232,.8)}

/* ---- mais deste canal ---- */
.ts-mais{background:var(--onyx-2)}
.ts-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.ts-relc{display:flex;flex-direction:column;gap:18px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ts-relc img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 38%;border:1px solid var(--hair);border-radius:3px;filter:saturate(.9);transition:filter .3s,border-color .3s}
.ts-relc span{font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--cream);text-wrap:balance}
.ts-relc:hover{transform:translateY(-4px)}
.ts-relc:hover img{filter:none;border-color:var(--gold)}
.ts-relc:hover span{color:var(--gold-light)}
.ts-relc:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

/* ---- telas menores ---- */
@media (max-width:980px){
  .ts-agrid{grid-template-columns:1fr}
  .ts-aimg{justify-self:start;max-width:360px;max-height:none}
  .ts-acols{grid-template-columns:minmax(0,1fr)}
  .ts-toc{position:static;max-height:none;padding-bottom:28px;border-bottom:1px solid var(--hair)}
  .ts-toc ol{columns:1}
  .ts-prog{display:none}
  .ts-rel{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ts-prose{font-size:17px}
  .ts-resumo{padding:22px 20px 10px}
}
@media (prefers-reduced-motion:reduce){
  .ts-relc,.ts-relc img,.ts-qa summary::after,.ts-toc a{transition:none}
  .ts-relc:hover{transform:none}
}
/* ---- listagem de artigos (/blog?pilar=sig) ---- */
.ts-lhero{padding-bottom:clamp(36px,5vw,64px)}
.ts-lhero h1{font-weight:300;font-size:clamp(36px,5.4vw,68px);line-height:1.06;letter-spacing:-.012em;margin:.4em 0 0;max-width:15em;text-wrap:balance}
.ts-lhero h1 em{font-style:italic;color:var(--gold-light)}
.ts-lsub{max-width:56ch;margin:22px 0 0;font-size:18px;color:var(--muted)}
.ts-lista{padding-top:clamp(36px,5vw,64px)}
.ts-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,48px)}
.ts-chips a{padding:9px 18px;border:1px solid var(--hair);border-radius:999px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:.2s}
.ts-chips a b{margin-left:6px;font-weight:500;color:var(--bronze)}
.ts-chips a:hover{border-color:var(--gold);color:var(--gold-light)}
.ts-chips a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--onyx)}
.ts-chips a[aria-current] b{color:var(--onyx)}
.ts-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px) clamp(16px,2.4vw,32px)}
.ts-card{display:flex;flex-direction:column;gap:14px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ts-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 38%;border:1px solid var(--hair);border-radius:3px;filter:saturate(.9);transition:filter .3s,border-color .3s}
.ts-ck{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ts-ct{font-size:clamp(20px,2vw,24px);line-height:1.28;color:var(--cream);text-wrap:balance}
.ts-card:hover{transform:translateY(-4px)}
.ts-card:hover img{filter:none;border-color:var(--gold)}
.ts-card:hover .ts-ct{color:var(--gold-light)}
.ts-card:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.ts-pag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(40px,6vw,72px)}
.ts-pag a{min-width:42px;padding:10px 16px;text-align:center;border:1px solid var(--hair);border-radius:2px;font-size:14px;color:var(--muted);transition:.2s}
.ts-pag a:hover{border-color:var(--gold);color:var(--gold-light)}
.ts-pag a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--onyx)}
@media (max-width:980px){.ts-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ts-grade{grid-template-columns:1fr}}

@media print{
  .ts-nav,.ts-toc,.ts-mais,.wf{display:none}
  .ts-artigo,.ts-artigo .ts-ahero{background:#fff;color:#000}
  .ts-prose,.ts-prose h2,.ts-prose h3,.ts-prose blockquote,.ts-atxt h1{color:#000}
}