/* ===== Extensões: subpáginas, matérias, gráficos ===== */
:root{--cell-off:var(--gray-200)}
.on-gray-2{--cell-off:#C6CCD5}
.on-gray .prior{background:var(--gray-200)}
nav.main a[aria-current="page"]{border-color:var(--steel);color:#fff}
.btn.dark{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn.dark:hover{background:var(--navy-700);border-color:var(--navy-700)}
.fmt h3 a{color:inherit;text-decoration:none}
.fmt h3 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cabeçalho de subpágina */
.page-head{background:var(--navy-800);color:var(--gray-100);position:relative;overflow:hidden}
.page-head .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,6vw,72px)}
.page-head h1{font-size:clamp(3rem,8vw,6.2rem);color:#fff}
.page-head p.sub{max-width:52ch;color:var(--gray-200);font-size:1.2rem;margin:1.2rem 0 0}
.dotfield{width:240px;height:170px;background-image:radial-gradient(circle,#B9C7DD 2.4px,transparent 2.7px);background-size:16px 16px;-webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent);opacity:.65}
.crumb{font-size:.98rem;color:var(--steel);margin:0 0 1.2rem}
.crumb a{color:var(--steel)}
.chip{display:inline-block;font-weight:600;font-size:.88rem;background:var(--steel);color:var(--navy-900);padding:2px 10px;margin:0 8px 8px 0}

/* Matérias: lista */
.cards{margin-top:0;border-top:2px solid var(--navy-800)}
.card{display:grid;grid-template-columns:1fr 2.2fr;gap:32px;padding:34px 0;border-bottom:1px solid var(--gray-400);text-decoration:none;color:inherit}
.card h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4vw,3rem);line-height:.98;margin:0 0 .7rem}
.card:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.card .meta{font-size:.98rem;color:var(--gray-600);margin:0}
.card .dek{max-width:56ch;color:var(--gray-600);margin:0 0 .8rem}
.card .more{font-weight:600}
.list-note{margin-top:28px;color:var(--gray-600)}

/* Matéria */
#progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--steel);z-index:60}
.article-head .wrap{display:block}
.article-head h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;max-width:20ch}
.article-head .dek{font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--gray-200);max-width:46ch;margin:1.4rem 0 1.6rem;line-height:1.4}
.byline{font-size:.98rem;color:var(--gray-400);display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.article-body{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,100px)}
.prose{max-width:680px;margin:0 auto;font-size:1.22rem;line-height:1.72}
.prose p{margin:0 0 1.35rem}
.pullquote{margin:2.8rem 0;padding:0 0 0 24px;border-left:6px solid var(--navy-800);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.08;text-transform:uppercase}
.pullquote cite{display:block;margin-top:.9rem;font-family:"Barlow",sans-serif;font-weight:500;font-size:1rem;text-transform:none;font-style:normal;color:var(--gray-600)}
.refs{max-width:680px;margin:48px auto 0;border-top:2px solid var(--navy-800);padding-top:18px;font-size:1rem;color:var(--gray-600)}
.refs h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:1.3rem;color:var(--ink);margin:0 0 .6rem}
.refs ul{margin:0;padding-left:1.1rem}
.refs li{margin-bottom:.35rem}
.art-nav{max-width:680px;margin:36px auto 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.linkbtn{font:inherit;font-weight:600;background:none;border:2px solid var(--navy-800);color:var(--navy-800);padding:11px 20px;cursor:pointer;text-decoration:none;display:inline-block}
.linkbtn:hover{background:var(--navy-800);color:#fff}

/* Áudio */
.eps{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy-800)}
.ep{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start;padding:26px 0;border-bottom:1px solid var(--gray-400)}
.ep .n{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:2.8rem;line-height:.9;color:var(--navy-800)}
.ep h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:1.7rem;line-height:1.05;margin:0 0 .3rem}
.ep p{margin:0;color:var(--gray-600)}
.player{display:flex;align-items:center;gap:14px;margin-top:14px;max-width:520px}
.play{width:44px;height:44px;border:2px solid var(--gray-400);background:none;display:grid;place-items:center;color:var(--gray-400);flex:none}
.pbar{flex:1;height:6px;background:var(--gray-200)}
.ptime{font-size:.9rem;color:var(--gray-600)}

/* Clipes */
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.clip{aspect-ratio:9/16;background-color:var(--navy-800);background-image:radial-gradient(circle,#B9C7DD 2px,transparent 2.3px);background-size:16px 16px;color:var(--gray-200);display:flex;align-items:flex-end;padding:16px;position:relative}
.clip::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--navy-900) 8%,transparent 70%)}
.clip div{position:relative;z-index:1}
.clip strong{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-size:1.4rem;color:#fff;margin-bottom:.3rem}

/* Dados */
.dsec{padding:clamp(48px,7vw,88px) 0}
.dgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:start}
.dgrid > div{min-width:0}
.dsec h2.display{font-size:clamp(2rem,4vw,3rem)}
.take{font-size:1.15rem;max-width:34ch;margin:1rem 0 1.4rem}
.sub-h{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:1.4rem;margin:2.6rem 0 .6rem}
.src{font-size:.92rem;color:var(--gray-600);margin:14px 0 0}
.foot{font-size:.98rem;color:var(--ink);margin:14px 0 0}
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--navy-800);margin-bottom:22px}
.seg button{font:inherit;font-weight:600;padding:9px 18px;background:none;border:0;color:var(--navy-800);cursor:pointer}
.seg button+button{border-left:2px solid var(--navy-800)}
.seg button[aria-pressed="true"]{background:var(--navy-800);color:#fff}
.wrow{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:32px;align-items:center}
.waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.cell{aspect-ratio:1;border-radius:50%;background:var(--cell-off);transition:background .3s;transition-delay:calc(var(--i)*7ms)}
.cell.on{background:var(--navy-800)}
.wbig{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(3.6rem,8vw,5.6rem);line-height:.9}
.wtext p{margin:.6rem 0 0;max-width:30ch}
.wtext p.src{max-width:none}
.hbars{display:grid;gap:8px}
.hb{display:grid;grid-template-columns:minmax(130px,230px) 1fr;gap:16px;align-items:center;background:none;border:0;padding:4px 0;font:inherit;text-align:left;cursor:pointer;color:inherit;width:100%}
.hb .l{font-weight:500;line-height:1.25}
.hb .t{display:block;height:42px;background:var(--cell-off)}
.hb .f{display:flex;align-items:center;justify-content:flex-end;height:100%;width:0;min-width:3.4rem;padding-right:10px;background:var(--navy-800);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.35rem;transition:width .9s cubic-bezier(.2,.7,.2,1),background .2s}
.hbars.has-sel .hb[aria-pressed="false"] .f{background:var(--gray-600)}
.hb[aria-pressed="true"] .t{outline:3px solid var(--navy-800);outline-offset:2px}
.detail{margin-top:18px;padding:16px 20px;background:#fff;border-left:6px solid var(--navy-800);min-height:5.4em}
.detail strong{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-size:1.25rem;line-height:1.1;margin-bottom:.3rem}
.detail p{margin:0}
.dumb{position:relative;height:92px;margin:6px 18px 0}
.dumb .axis{position:absolute;left:0;right:0;top:46px;height:2px;background:var(--gray-400)}
.dumb .link{position:absolute;top:43px;height:8px;width:0;background:var(--navy-800);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.dumb .tick{position:absolute;top:62px;transform:translateX(-50%);font-size:.85rem;color:var(--gray-600)}
.dumb .vlab{position:absolute;top:0;transform:translateX(-50%);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.5rem;line-height:1}
.dot{position:absolute;top:33px;width:28px;height:28px;border-radius:50%;transform:translateX(-50%);border:3px solid #fff;background:var(--navy-800);cursor:pointer;padding:0}
.dot.b{background:var(--gray-600)}
.dot[aria-pressed="true"]{box-shadow:0 0 0 3px var(--navy-800)}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.98rem;margin:14px 0 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px;background:var(--navy-800)}
.legend i.b{background:var(--gray-600)}
.tl-track{display:flex;overflow-x:auto;border-top:2px solid var(--gray-400);margin-top:18px;scroll-snap-type:x proximity;padding-bottom:6px}
.tl-node{flex:0 0 200px;scroll-snap-align:start;position:relative;padding:26px 18px 6px 0;text-align:left;background:none;border:0;font:inherit;cursor:pointer;color:var(--gray-600)}
.tl-node::before{content:"";position:absolute;top:-10px;left:0;width:18px;height:18px;border-radius:50%;background:var(--gray-400);border:3px solid var(--gray-100)}
.tl-node b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:1.45rem;text-transform:uppercase;line-height:1;margin-bottom:.3rem}
.tl-node span{display:block;line-height:1.3}
.tl-node[aria-pressed="true"]{color:var(--ink)}
.tl-node[aria-pressed="true"]::before{background:var(--navy-800)}
.tl-hint{font-size:.92rem;color:var(--gray-600);margin:10px 0 0}
.sources{margin-top:0}

@media (max-width:900px){
  .page-head .wrap{grid-template-columns:1fr}
  .dotfield{display:none}
  .card{grid-template-columns:1fr;gap:10px}
  .clips{grid-template-columns:repeat(2,1fr)}
  .dgrid{grid-template-columns:1fr}
  .wrow{grid-template-columns:1fr}
  .waffle{max-width:340px}
  .hb{grid-template-columns:1fr;gap:6px}
  .ep{grid-template-columns:52px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .cell,.hb .f,.dumb .link{transition:none}
  .cell{transition-delay:0s}
}