:root{
  --papel:#fff; --superficie:#f1f3f3; --filete:#d3d8d9; --filete-forte:#b4bcbf; --tinta:#0e1315; --cinza:#5b6366; --ciano:#00ffff; --noite:#010508;
  --f-texto:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-micro:"Archivo SemiCondensed","Archivo","Helvetica Neue",Arial,sans-serif;
  --f-nome:"Archivo Condensed","Archivo","Helvetica Neue",Arial,sans-serif;
  --gut:2.6rem; --calha:1rem; --topo:3.5rem;
  --ease:cubic-bezier(.22,.7,.2,1);
}
[data-cat="todos"]{--sup:var(--ciano);--vivo:var(--ciano);--ink:var(--tinta)}
[data-cat="opiniao"]{--sup:#ffd9bd;--vivo:#ff7a1a;--ink:var(--tinta)}
[data-cat="noticias"]{--sup:#ffd0e5;--vivo:#ff5fa8;--ink:var(--tinta)}
[data-cat="bastidores"]{--sup:#dcc2ff;--vivo:#a24dff;--ink:var(--tinta)} 
[data-cat="guias"]{--sup:#ffeaf4;--vivo:#ffc2dd;--ink:var(--tinta)} 

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1rem/1.5 var(--f-texto);overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--gut);top:.5rem;z-index:50;background:var(--papel);padding:.5rem .75rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.topo{position:sticky;top:0;z-index:20;height:var(--topo);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);background:var(--papel)}
.topo .marca{display:block;width:7.5rem;line-height:0}
.topo .marca svg{width:100%;height:auto;fill:var(--tinta)}
.topo nav{display:flex;gap:clamp(1rem,2.6vw,2.6rem)}
.topo nav a{font:500 .9375rem/1 var(--f-texto);text-decoration:none;text-transform:uppercase;padding:.65rem 0}
.topo nav a:hover,.topo nav a:focus-visible,.topo nav a[aria-current]{text-decoration:underline;text-decoration-thickness:.1rem;text-underline-offset:.4em}

.tt{font-family:var(--f-nome)}
.tt .f{font-weight:900;text-transform:uppercase;letter-spacing:-.005em}
.tt .l{font-weight:300;letter-spacing:0}

.tag{display:inline-flex;align-items:center;gap:.5rem;height:1.875rem;padding:0 .7rem 0 .55rem;border:1.5px solid var(--tinta);border-radius:.4rem;background:transparent;color:var(--tinta);text-decoration:none;white-space:nowrap;font:500 .8125rem/1 var(--f-micro);transition:background-color .25s var(--ease)}
.tag::before{content:"";width:.6rem;height:.6rem;background:var(--vivo);border:1.5px solid var(--tinta);flex:none}
a.tag:hover,a.tag:focus-visible{background:var(--sup)}

.capa{position:relative;overflow:hidden;isolation:isolate;background:var(--vivo,var(--filete));margin:0}
.capa img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%)}
[data-img="duotone"] .capa img{filter:grayscale(1) contrast(1.1) brightness(1.06);mix-blend-mode:multiply}
[data-img="pb"] .capa img{filter:grayscale(1) contrast(1.05)}
.capa.cor-sempre img{filter:none;mix-blend-mode:normal}

.filtro ul{display:flex;gap:.625rem;margin:0;padding:.25rem var(--gut);list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;scroll-padding-inline:var(--gut)}
.filtro ul::-webkit-scrollbar{display:none}
.filtro li{flex:none;scroll-snap-align:start}
.pilula{--h:2.75rem;position:relative;display:flex;align-items:center;height:var(--h);padding:0 1.1rem 0 calc(var(--h) + .375rem + .9rem);text-decoration:none;white-space:nowrap;font:500 1rem/1 var(--f-texto);color:var(--ink);border-radius:.6rem;-webkit-tap-highlight-color:transparent}
.pilula .forma{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pilula .corpo{fill:var(--papel);stroke:var(--ink);stroke-width:1.5;transition:fill .4s var(--ease)}
.pilula .ponto{fill:var(--vivo);stroke:var(--ink);stroke-width:1.5;transition:fill .4s var(--ease)}
.pilula span{position:relative}
.pilula:hover .corpo{fill:color-mix(in srgb,var(--vivo) 35%,var(--papel))}
.pilula[aria-current] .corpo{fill:var(--vivo)}
.pilula[aria-current] .ponto{fill:var(--ink)}
.pilula:focus-visible{outline-offset:4px}

.by{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font:500 .9375rem/1.2 var(--f-texto)}
.by .nm{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:.09rem;transition:text-decoration-color .2s var(--ease)}
.by:hover .nm,.by:focus-visible .nm{text-decoration-color:currentColor}
.by:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
span.by{cursor:default}
.av{flex:none;display:grid;place-items:center;width:1.875rem;height:1.875rem;background:var(--superficie);overflow:hidden;font:700 .8125rem/1 var(--f-nome);color:var(--tinta)}
.av img{width:100%;height:100%;object-fit:cover;display:block}

.painel{position:fixed;right:1rem;bottom:1rem;z-index:30;display:flex;align-items:center;gap:.25rem;padding:.35rem;background:var(--tinta);color:#fff;border-radius:.5rem;font:500 .8125rem/1 var(--f-micro)}
.painel .g{display:flex;align-items:center;gap:.25rem}
.painel .g+.g{margin-left:.5rem}
.painel .r{padding:0 .4rem 0 .3rem;opacity:.7}
.painel button,.painel a{all:unset;cursor:pointer;padding:.45rem .55rem;border-radius:.3rem}
.painel button[aria-pressed="true"],.painel a[aria-current]{background:var(--ciano);color:var(--tinta)}
.painel :focus-visible{outline:2px solid var(--ciano);outline-offset:1px}

@media (max-width:1024px){:root{--gut:1.5rem}}
@media (max-width:767px){
  :root{--gut:1rem;--calha:.75rem;--topo:3.25rem}
  .topo .marca{width:6.25rem}
  .topo nav{gap:.9rem}
  .topo nav a{font-size:.8125rem}
  .pilula{--h:2.5rem;font-size:.9375rem}
  .painel{left:1rem;right:1rem;flex-wrap:wrap;justify-content:center}
}
@media (max-width:420px){.topo nav a:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}