@font-face{font-family:"Vinila";src:url('../fonts/vinila-700-900-normal-3d36be76.otf') format("opentype");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Vinila";src:url('../fonts/vinila-700-900-italic-5f268c34.otf') format("opentype");font-weight:700 900;font-style:italic;font-display:swap}
@font-face{font-family:"Alte Haas";src:url('../fonts/alte-haas-400-normal-45cda920.ttf') format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Alte Haas";src:url('../fonts/alte-haas-700-normal-6294f6b1.ttf') format("truetype");font-weight:700;font-display:swap}
/* fontes da Feirinha: uso exclusivo na barra de publicidade */
@font-face{font-family:"AlteHaas180";src:url('../fonts/altehaas180-700-normal-b1f676ed.ttf') format("truetype");font-weight:700;font-display:swap}
/* ================= TOKENS ================= */
:root{
  --bege:#FFF3E2; --preto:#000; --verde:#D2F779;
  --papel:#FFF3E2;          /* fundo da página */
  --tinta:#000;             /* texto principal */
  --suave:#000;             /* texto secundário: sempre cor cheia, nunca cinza */
  --linha:rgba(0,0,0,.16);  /* divisórias finas */
  --inv-bg:#000;            /* faixas invertidas (submenu, cinema) */
  --inv-fg:#FFF3E2;
  --inv-suave:#FFF3E2;
  --inv-linha:rgba(255,243,226,.22);
  --moldura:#D2F779;        /* moldura das fotos */
  --ph-bg:#000;
  --mais-hbg:#000; --mais-hfg:#D2F779; --hov-fg:#FFF3E2;
  --f-titulo:"Vinila","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --f-sub:"Alte Haas","Helvetica Neue",Arial,sans-serif;
  --f-texto:"Alte Haas","Helvetica Neue",Arial,sans-serif;
  --hd-extra:0px;
  --max:1320px; --gut:clamp(16px,3vw,32px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#000; --tinta:#FFF3E2; --suave:#FFF3E2; --linha:rgba(255,243,226,.2);
    --inv-bg:#FFF3E2; --inv-fg:#000; --inv-suave:#000; --inv-linha:rgba(0,0,0,.18);
    --ph-bg:#1a1a1a; --mais-hbg:#FFF3E2; --mais-hfg:#000; --hov-fg:#000;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papel:#000; --tinta:#FFF3E2; --suave:#FFF3E2; --linha:rgba(255,243,226,.2);
  --inv-bg:#FFF3E2; --inv-fg:#000; --inv-suave:#000; --inv-linha:rgba(0,0,0,.18);
  --ph-bg:#1a1a1a; --mais-hbg:#FFF3E2; --mais-hfg:#000; --hov-fg:#000;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
/* impede o celular de aumentar a fonte sozinho em blocos largos (ticker, tabelas e listas que rolam de lado) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font:400 16px/1.55 var(--f-texto);-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
::selection{background:var(--verde);color:#000}
.ticker ::selection,.cob ::selection,footer ::selection,.busca ::selection,.rank .n::selection{background:#000;color:var(--verde)}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px;box-shadow:0 0 0 5px #000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= TIPOGRAFIA ================= */
.t-titulo{font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;margin:0;text-wrap:balance}
/* título das páginas (em alta, recentes, categoria, tag, equipe, contato, envie, créditos, privacidade, termos): 115px no computador */
h1.t-titulo.pg-tit{font-size:clamp(46px,8vw,115px)!important}
.t-sub{font-family:var(--f-sub);font-weight:700;letter-spacing:-.01em;line-height:1.18;margin:0;text-wrap:balance}
/* detalhe: Alte Haas Bold, maiúsculo e sublinhado (substitui a Farnham por enquanto) */
.t-det{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px;line-height:1.2;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.t-texto{font-size:16px;line-height:1.55;color:var(--suave);margin:0}
.hl{background:linear-gradient(var(--verde),var(--verde)) 0 88%/0 38% no-repeat;transition:background-size .28s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone}
a:hover .hl,a:focus-visible .hl{background-size:100% 38%}
[data-theme="dark"] .hl{color:inherit}

/* ================= PUBLI FEIRINHA (topo) ================= */
.publi{background:#FBAEFF;color:#33001A;position:relative}
.publi .wrap{display:flex;align-items:center;justify-content:center;gap:28px;min-height:46px;padding-block:5px}
.publi .pb-link::after{content:"";position:absolute;inset:0}
.publi .pb-link:focus-visible{outline-offset:-3px}
.publi .meio{display:flex;align-items:center}
.publi .marca{width:96px;height:auto;flex:none;color:#33001A;display:block}
.publi .frase{margin:0;display:flex;align-items:baseline;gap:.28em;line-height:1;text-transform:uppercase;white-space:nowrap}
.publi .fc,.publi .fw{font:italic 700 22px/1 var(--f-titulo);letter-spacing:0;text-transform:uppercase}

@keyframes gira{to{transform:rotate(360deg)}}
.publi .cta{display:inline-flex;align-items:center;gap:8px;color:#33001A;font:700 13px/1 var(--f-sub);text-transform:uppercase;letter-spacing:-.5px;padding:6px 0;text-decoration:none}
.publi .cta svg{width:20px;height:20px;flex:none;transform-origin:30% 90%}
.publi .pb-link:hover .cta,.publi .pb-link:focus-visible .cta{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.publi .pb-link:hover .cta svg,.publi .pb-link:focus-visible .cta svg{animation:balanca .6s ease-in-out}
@keyframes balanca{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
@media (max-width:1180px){.publi .rot{display:none}}
.publi .rot{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:700 9px var(--f-sub);letter-spacing:.08em;text-transform:uppercase}
.publi .rot-esq{right:auto;left:10px;color:inherit;text-decoration:none;z-index:1}
.publi .rot-esq:hover,.publi .rot-esq:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* barra de rolagem da página (computador): a do navegador some e entra só uma barrinha verde flutuando sobre a página, sem fundo */
.rolagem{display:none}
@media (hover:hover) and (pointer:fine){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none;width:0;height:0}
  .rolagem{display:block;position:fixed;top:0;right:0;bottom:0;width:16px;z-index:48;pointer-events:none}
  .rolagem[hidden]{display:none}
  .rolagem i{position:absolute;top:0;right:5px;width:6px;border-radius:99px;background:var(--verde);pointer-events:auto;touch-action:none}
  .rolagem i::before{content:"";position:absolute;inset:0 -5px}
  body.rolando{user-select:none;-webkit-user-select:none}
}

/* ================= CABEÇALHO ================= */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--papel)}
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:95px;padding-block:8px}
.head-l,.head-r{display:flex;align-items:center;gap:6px}
.head-r{justify-content:flex-end}
.ico{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--tinta);background:none;cursor:pointer;flex:none;transition:background .2s,color .2s}
.ico:hover{background:var(--verde);color:#000;border-color:#000}
.head .ico{border-color:transparent}
.head .ico:hover,.head .ico:focus-visible,.head .ico[aria-expanded="true"]{background:var(--verde);color:#000;border-color:#000}
.ico svg{width:15px;height:15px}
.logo{display:block;width:140px;color:var(--tinta)}
.logo svg{display:block;width:100%;height:auto}
.burger{display:none}

/* campo de busca do cabeçalho: no topo da página é só a lupa; depois de rolar (no computador) a lupa dá lugar ao campo */
.hd-busca{display:none}
@media (min-width:901px){
  header.site.rolou{box-shadow:0 1px 0 var(--tinta)}
  #btn-busca{max-width:32px;overflow:hidden;transition:max-width .3s,opacity .2s,visibility .3s,background .2s,color .2s}
  .hd-busca{display:flex;align-items:center;gap:9px;position:relative;min-width:0;width:260px;max-width:0;opacity:0;visibility:hidden;overflow:hidden;white-space:nowrap;color:var(--tinta);border-bottom:0 solid var(--tinta);padding:0;margin-left:-6px;transition:max-width .45s cubic-bezier(.7,0,.2,1),opacity .3s,visibility .45s,box-shadow .2s}
  .hd-busca svg{width:15px;height:15px;flex:none}
  .hd-busca input{appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:none;color:inherit;min-width:0;width:100%;padding:0;margin:0;font:700 10px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.05em}
  .hd-busca input:focus,.hd-busca input:focus-visible{outline:none;box-shadow:none}
  .hd-busca input::-webkit-search-cancel-button,.hd-busca input::-webkit-search-decoration{-webkit-appearance:none;display:none}
  .hd-busca input::placeholder{color:transparent;opacity:1}
  .hd-busca:focus-within input::placeholder{color:var(--tinta)}
  .hd-busca .rola{position:absolute;left:32px;right:2px;top:50%;height:1.3em;margin-top:-.65em;overflow:hidden;pointer-events:none;font:700 10px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.05em}
  .hd-busca .rola span{display:block;height:1.3em;overflow:hidden;text-overflow:ellipsis;transition:transform .45s cubic-bezier(.7,0,.2,1);transform:translateY(calc(var(--i,0) * -1.3em))}
  .hd-busca .rola b{font-weight:400}
  .hd-busca:focus-within .rola,.hd-busca.tem .rola{display:none}
  .hd-busca:focus-within{box-shadow:0 1px 0 var(--tinta)}
  header.site.rolou .hd-busca{max-width:260px;opacity:1;visibility:visible;border-bottom-width:1px;padding:8px 2px 7px 8px;margin-left:0}
  header.site.rolou #btn-busca{max-width:0;min-width:0;padding-inline:0;border-width:0;margin-right:-6px;opacity:0;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.hd-busca,#btn-busca,.hd-busca .rola span{transition:none}}

/* menu em preto dentro do cabeçalho preso (computador): segunda linha que desce quando o menu preto sai da tela */
.hd-menu{display:none}
@media (min-width:901px){
  :root{--hd-extra:43px}
  .hd-menu{display:block;position:absolute;left:0;right:0;top:100%;height:43px;overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
  .hd-menu ul{display:flex;justify-content:safe center;align-items:center;list-style:none;margin:0;padding:0 var(--gut);height:43px;background:var(--papel);color:var(--tinta);border-block:1px solid var(--tinta);overflow-x:auto;scrollbar-width:none;transform:translateY(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .hd-menu ul::-webkit-scrollbar{display:none}
  .hd-menu a{display:flex;align-items:center;gap:6px;height:41px;padding:0 11px;font:700 11px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;color:inherit;text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:4px}
  .hd-menu a:hover,.hd-menu a:focus-visible{text-decoration:underline}
  .hd-menu a:focus-visible{outline-offset:-3px}
  .hd-menu .i-envie{width:15px;height:15px;flex:none}
  header.site.rolou .hd-menu{visibility:visible;pointer-events:auto;transition:visibility 0s}
  header.site.rolou .hd-menu ul{transform:none}
}
@media (prefers-reduced-motion:reduce){.hd-menu,.hd-menu ul{transition:none}}

/* submenu preto */
.submenu{background:#000;color:#FFF3E2}
.submenu ul{display:flex;justify-content:center;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap;min-height:65px}
.submenu a{display:flex;align-items:center;height:65px;font:700 11px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:3px;padding:0 16px;transition:color .15s}
.submenu a:hover,.submenu a:focus-visible{color:var(--verde);text-decoration:underline}

/* gaveta do menu (hambúrguer) */
.gaveta{position:fixed;inset:0;z-index:50;background:var(--inv-bg);color:var(--inv-fg);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gut) 32px;transform:translateX(-100%);transition:transform .3s ease;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.gaveta > *{flex-shrink:0}
.gaveta.aberta{transform:none;visibility:visible}
.gaveta .fechar{align-self:flex-end;border-color:var(--inv-fg);width:42px;height:42px}
.gaveta ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.gaveta ul a{display:block;font:900 44px/1 var(--f-titulo);letter-spacing:-.04em;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--inv-linha)}
.gaveta ul a:hover{color:var(--verde)}
.submenu a.envie{gap:7px}
.submenu a.envie .i-envie{width:16px;height:16px;flex:none}
.gaveta ul a.envie{display:flex;align-items:flex-start;gap:12px}
.gaveta ul a.envie .i-envie{width:26px;height:26px;flex:none;margin-top:6px}
.gaveta .redes{display:flex;gap:6px;margin-top:auto;padding-top:24px}
.gaveta .redes .ico{color:var(--inv-fg)}

/* ================= TELA DE PESQUISA ================= */
.busca{position:fixed;inset:0;z-index:60;background:var(--verde);color:#000;overflow-y:auto;padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.busca.aberta{opacity:1;visibility:visible}
.busca-in{max-width:980px;margin:0 auto;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr auto 1fr}
/* espaço acima da barra: o X fica no meio dele e o "Pesquise no escutai" logo acima da barra */
.busca-topo{display:grid;grid-template-rows:minmax(16px,1fr) auto minmax(16px,1fr);justify-items:center;padding-top:env(safe-area-inset-top,0px)}
/* espaço abaixo da barra: as sugestões ficam no meio dele (como o X no de cima); com resultados, sobem para logo abaixo da barra */
.busca-baixo{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:16px 0 calc(env(safe-area-inset-bottom,0px) + 16px)}
.busca.com-res .busca-baixo{justify-content:flex-start;padding:24px 0 48px}
.busca.com-res .busca-in{grid-template-rows:auto auto 1fr}
.busca.com-res .busca-topo{padding-top:calc(env(safe-area-inset-top,0px) + 60px)}
.busca .fechar{grid-row:2;position:relative;width:56px;height:56px;border:1px solid #000;background:none;display:grid;place-items:center;cursor:pointer;color:#000}
.busca .fechar:hover{background:#000;color:var(--bege)}
/* com resultados na tela, o X sobe e fica preso no topo enquanto se rola a lista */
.busca.com-res .fechar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 20px);left:50%;transform:translateX(-50%);z-index:2}
.busca .fechar svg{width:24px;height:24px}
.busca form{position:relative;display:flex;flex-direction:column;align-items:center}
.busca .campo{position:relative;display:flex;align-items:center;gap:14px;width:100%;border:1px solid #000;background:var(--bege);padding:6px 6px 6px 22px}
.busca input{flex:1;min-width:0;width:100%;background:transparent;border:0;border-radius:0;color:#000;font:700 clamp(17px,2vw,22px)/1.2 var(--f-sub);letter-spacing:-.01em;text-transform:uppercase;text-align:left;padding:12px 0}
.busca input::placeholder{color:transparent}
/* sugestão que vai sendo "escrita" dentro de um fundo bege, por cima do campo vazio */
.busca .dig{position:absolute;left:22px;right:62px;top:50%;transform:translateY(-50%);pointer-events:none;white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:.35em;font:400 clamp(17px,2vw,22px)/1.2 var(--f-sub);letter-spacing:-.01em;text-transform:uppercase;color:#000}
.busca .dig-t{font-weight:700;background:var(--verde);padding:.12em .3em}
.busca .dig-t:empty{padding:0}
.busca .campo.tem .dig{display:none}
/* lupa do botão: procurando, num movimento curto e contínuo */
@keyframes lupa-procura{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(2px,-2px) rotate(-10deg)}50%{transform:translate(0,-3px) rotate(0)}75%{transform:translate(-2px,-1px) rotate(10deg)}}
.busca .ir svg{animation:lupa-procura 2.8s ease-in-out infinite;transform-origin:45% 45%}
@media (prefers-reduced-motion:reduce){.busca .ir svg{animation:none}}
.busca input::-webkit-search-cancel-button,.busca input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.busca input:focus,.busca input:focus-visible{outline:none;box-shadow:none}
.busca .ir{width:48px;height:48px;border-radius:0;background:#000;color:var(--verde);border:0;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .2s}
.busca .ir svg{width:18px;height:18px}
.busca .ir:hover,.busca .ir:focus-visible{transform:scale(1.07)}
.busca .sug-g{display:flex;flex-direction:column;align-items:center;gap:20px}
.busca .sug-tit{margin:0;font:700 11px/1.2 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.busca .sug{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;max-width:640px}
.busca .sug button{background:var(--bege);color:#000;border:1px solid #000;padding:7px 10px 6px;font:700 11px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .2s,color .2s}
.busca .sug button:hover,.busca .sug button:focus-visible{background:#000;color:var(--bege)}
.busca .msg:empty,.busca .res:empty{display:none}
/* computador: bloco "em alta" e tags 20% maiores */
@media (min-width:901px){.busca .sug-g{gap:24px}.busca .sug-tit{font-size:13.2px}.busca .sug{gap:10px;max-width:780px}.busca .sug button{font-size:13.2px;padding:8.4px 12px 7.2px}}
.busca .msg{font:700 15px var(--f-sub);margin:0;min-height:1.3em;text-align:center}
.res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.res a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding-block:14px;border-top:1px solid #000}
.res .media{aspect-ratio:1;border:1px solid #000}
.res a > div{display:flex;flex-direction:column;gap:6px}
.res .t-sub{font-size:17px}
.res a:hover .hl{background-size:100% 38%}
.res .hl{background-image:linear-gradient(var(--bege),var(--bege))}

/* ================= TICKER ================= */
.ticker{position:relative;background:var(--verde);color:#000;overflow:hidden;border-block:1px solid #000}
.tk-selo{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;background:var(--verde);border-right:1px solid #000;padding:0 22px 0 calc(22px + .06em);font:700 14px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.06em}
.tk-move{display:flex;width:max-content;animation:tk var(--tk-dur,60s) linear infinite}
.ticker:hover .tk-move{animation-play-state:paused}
.tk-set{display:flex;align-items:center;flex:none}
.tk-set a,.tk-selo{-webkit-text-size-adjust:100%;text-size-adjust:100%;max-height:999999px}
.tk-set a{font:700 14px/1 var(--f-sub);letter-spacing:-.35px;text-transform:uppercase;padding:19.5px 0;white-space:nowrap;transition:color .15s}
.tk-set a:hover,.tk-set a:focus-visible,.tk-set a:active{color:#000;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tk-set .estrela{width:14px;height:14px;margin-inline:21px;flex:none;color:var(--bege);animation:gira 6s linear infinite}
@keyframes tk{to{transform:translateX(-50%)}}

/* ================= GENÉRICOS ================= */
section{padding-block:clamp(40px,5vw,68px)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-head h2{font-size:clamp(36px,5vw,60px)}
.sec-head a.mais{flex:none;margin-bottom:6px;background:var(--verde);color:#000;text-decoration:none;padding:10px 14px;transition:background .2s,color .2s}
.sec-head a.mais:hover,.sec-head a.mais:focus-visible{background:var(--mais-hbg);color:var(--hov-fg)}
.cine .sec-head a.mais:hover,.cine .sec-head a.mais:focus-visible{background:var(--inv-fg);color:var(--inv-bg)}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--suave)}
.data{display:inline-flex;align-items:baseline;text-decoration:none}
.data::before{content:"";display:inline-block;width:24px;border-bottom:1px solid currentColor;margin-right:8px;transform:translateY(-3px)}
.cat{font-size:9px;color:var(--tinta)}
.cine .cat{color:var(--inv-fg)}
.cob .cat,.busca .cat{color:#000}
/* nota da crítica nas chamadas: cinco estrelinhas na linha da categoria, alinhadas à direita */
.nt-est{display:inline-flex;gap:2.5px;flex:none;margin-left:auto;padding-inline:1px}
.nt-est svg{width:11px;height:11px;display:block;overflow:visible}
.nt-est .vz{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.nt-est .ch{fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;clip-path:inset(0 calc(100% - var(--f) * 100%) 0 0)}
.cat-n{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.cat-n .cat{white-space:nowrap}
.cat-n .nt-est{margin-left:0}
.t-sub > .nt-est{margin-left:8px;vertical-align:1px}
.cs-topo{display:flex;align-items:center;gap:12px}
.cs-topo .nt-est{color:var(--verde)}
.novo{display:inline-block;background:var(--tinta);color:var(--papel);font:700 11px var(--f-sub);padding:3px 7px;letter-spacing:.06em}

.media{position:relative;overflow:hidden;background:var(--ph-bg);aspect-ratio:3/2;max-width:100%}
.media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.media.sem .ph,.media.erro .ph{opacity:1}
.media .carrega{position:absolute;inset:0;display:grid;place-items:center;background:var(--papel);z-index:0;transition:opacity .3s}
.media .carrega svg{width:clamp(14px,12%,24px);height:auto;aspect-ratio:1;color:var(--tinta);animation:gira 1.4s linear infinite}
.media.ok .carrega,.media.erro .carrega,.media.sem .carrega{opacity:0;pointer-events:none}
.media.ok .carrega svg,.media.erro .carrega svg,.media.sem .carrega svg{animation:none}
@media (prefers-reduced-motion:reduce){.media .carrega svg{animation:none}}
.media .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:transform .5s ease,opacity .35s ease}
.media.ok .foto{opacity:1}
a:hover .media .foto{transform:scale(1.035)}
.bordada{border:1px solid var(--tinta)}
.frame{background:var(--moldura);padding:clamp(10px,1.2vw,16px);transition:background-color .35s ease}
a:hover .frame,a:focus-visible .frame{background:var(--tinta)}
.card{display:flex;flex-direction:column;gap:12px}
.card .t-sub{font-size:19px}

/* ================= HERO ================= */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);padding-top:clamp(28px,3vw,44px)}
.duo-item{display:flex;flex-direction:column;background:var(--verde);padding:clamp(10px,1.2vw,16px);color:#000;transition:background-color .35s ease,color .35s ease}
.duo-item .media{aspect-ratio:16/9}
.duo-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding:16px 6px 6px}
.duo-item .meta,.duo-item .cat{color:inherit}
.duo-cap h2{font-size:clamp(26px,2.6vw,38px);margin-top:8px}
.duo-cap .seta{font:700 22px var(--f-sub);transition:transform .25s}
.duo-item .hl{background:none}
.duo-item:hover,.duo-item:focus-visible{background:var(--tinta);color:var(--papel)}
.duo-item:hover .seta,.duo-item:focus-visible .seta{transform:translateX(5px)}
.hero{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);padding-top:clamp(28px,3vw,44px)}
.hero-main{display:flex;flex-direction:column;gap:18px}
.hero-fig{display:grid;grid-template-columns:minmax(0,1fr) 14px;gap:10px;align-items:start}
.hero-fig .frame{padding:clamp(12px,1.6vw,24px)}
.hero-fig .media{aspect-ratio:16/10}
.vcred,.vlabel{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;justify-self:center}
.vcred{font:700 10px var(--f-sub);letter-spacing:.04em;text-transform:uppercase;align-self:end;margin-bottom:4px}
.vlabel{font:700 26px/1 var(--f-sub);letter-spacing:-.02em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;align-self:center}
.hero-main h2{font-size:clamp(37px,5.3vw,77px)}
.hero-main .t-texto{font-size:18px;max-width:62ch}
.hero-side{display:flex;flex-direction:column}
.hero-side .lbl{padding-block:12px}
.hero-side .side-ad{min-height:100px;margin-top:39px}
.side-item{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:16px;padding-block:16px;border-top:1px solid var(--linha);align-items:start}
.side-item .media{aspect-ratio:1}
.side-item .t-sub{font-size:18px}
.side-item > div{display:flex;flex-direction:column;gap:8px}

/* ================= PUBLICIDADE ================= */
.ad{position:relative;display:grid;place-items:center;color:var(--suave);text-align:center;gap:4px;padding:10px;margin-top:21px}
/* rótulo fixo: etiqueta centralizada, logo acima do anúncio (sem encostar nele: o Google não permite cobrir o anúncio).
   O Google só aceita "Anúncios" ou "Links patrocinados" como rótulo. O espaço em si não tem cor nem moldura. */
.ad::before{content:"anúncios";position:absolute;left:50%;transform:translateX(-50%);bottom:100%;background:var(--mais-hbg);color:var(--mais-hfg);font:700 10px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.09em;padding:5px 8px 4px;white-space:nowrap}
/* o espaço tem a largura do anúncio, para a etiqueta ficar centralizada nele */
.ad.leader{min-height:90px;width:100%;max-width:728px;margin-inline:auto}
.ad.box,.ad.side-ad,.ad.mini{margin-inline:auto}
.ad.box{width:300px;max-width:100%}
.ad.side-ad{width:100%;max-width:320px}
/* anúncio dentro do texto (in-article): ocupa a largura da coluna, sem linhas, só a etiqueta "anúncios" */
.ad.artigo{width:100%;min-height:200px}
/* anúncio carregado ocupa o espaço inteiro; sem anúncio para mostrar, o espaço inteiro some */
.ad[data-pronto]{padding:0}
.ad:has(ins[data-ad-status="unfilled"]){display:none}
.ad-sep{padding-top:clamp(40px,5vw,68px)}
.ad ins{display:block;width:100%}
.ad.box{min-height:250px}
.ad small{font:400 12px var(--f-texto)}

/* ================= MAIS RECENTES ================= */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}

/* ================= EM ALTA ================= */
.lst-sec{padding-top:0}
.lst{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;padding:clamp(24px,3vw,40px);border:1px solid var(--tinta)}
.lst-h{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.lst-h h2{font-size:clamp(44px,5vw,72px);line-height:.84}
.lst-h p{margin:0;font-size:17px;line-height:1.45}
.lst-h .mais{background:var(--verde);color:#000;text-decoration:none;padding:10px 14px;margin-top:6px;transition:background .2s,color .2s}
.lst-h .mais:hover,.lst-h .mais:focus-visible{background:var(--mais-hbg);color:var(--hov-fg)}
.lst-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.lst{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){.lst-g{grid-template-columns:minmax(0,1fr);gap:28px}}
.tit-troca{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.1em .25em}
.troca{display:inline-flex;align-items:center;gap:.2em;background:var(--verde);color:#000;border:0;cursor:pointer;padding:.16em .26em .1em .32em;font:900 .5em/1 var(--f-titulo);letter-spacing:-.04em;text-transform:uppercase;margin-bottom:.06em;transition:background .2s,color .2s}
.troca:hover,.troca:focus-visible{background:var(--mais-hbg);color:var(--hov-fg)}
.troca .jan{display:block;height:1.15em;overflow:hidden;text-align:left}
.troca .pal{display:block;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.troca .pal span{display:block;height:1.5em;line-height:1.25em;white-space:nowrap}
.troca.m .pal{transform:translateY(-1.5em)}
.troca svg{width:.8em;height:.8em;flex:none;transition:transform .35s}
.troca.m svg{transform:rotate(180deg)}
.per{font:700 10px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;color:var(--tinta);margin:-18px 0 18px}
.lidas .per{margin:0 0 6px}
.troca-lista{transition:opacity .2s}
.troca-lista.saindo{opacity:0}
.rank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.rank a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding-block:20px;border-top:1px solid currentColor}
.rank .n{display:grid;place-items:center;min-width:64px;height:72px;background:var(--verde);color:#000;font:900 60px/1 var(--f-titulo);letter-spacing:-.04em;padding-inline:6px}
.rank .t-sub{font-size:20px}
.rank > a > div{display:flex;flex-direction:column;gap:8px}

/* ================= CRÍTICAS DE ÁLBUM ================= */
.cine .hl{background-position:0 100%;background-size:0 3px}
.cine a:hover .hl,.cine a:focus-visible .hl{background-size:100% 3px}
/* críticas de álbum: estante de discos — lombadas que andam, a do meio abre */
.alb{--lomb:96px;--ab:720px}
.estante{position:relative;overflow:hidden;height:590px;touch-action:pan-y}
.estante .trilho{display:flex;height:100%;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.estante .lp{flex:none;width:var(--lomb);height:100%;background:var(--verde);color:#000;border:1px solid #000;margin-right:-1px;position:relative;overflow:hidden;transition:width .8s cubic-bezier(.6,0,.2,1)}
.estante .lomb{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding:16px 0;background:none;border:0;color:#000;cursor:pointer;transition:opacity .3s;font:inherit}
.estante .lomb:hover .v,.estante .lomb:focus-visible .v{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.estante .num{font:900 30px/.8 var(--f-titulo);letter-spacing:-.04em}
.estante .lomb .v{writing-mode:vertical-rl;transform:rotate(180deg);font:900 26px/1 var(--f-titulo);text-transform:uppercase;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;max-height:calc(100% - 70px)}
.estante .aberto{position:absolute;inset:0;width:var(--ab);display:grid;grid-template-columns:minmax(0,544px) minmax(260px,1fr);gap:28px;padding:22px;color:#000;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.estante .aberto .media{aspect-ratio:1;align-self:start;max-height:100%}
.estante .aberto .lado{display:flex;flex-direction:column;gap:12px;min-width:0}
.estante .est-topo{display:flex;justify-content:space-between;align-items:start}
.estante .aberto .cat{color:#000}
.estante .art{font:700 13px/1.2 var(--f-sub);text-transform:uppercase;letter-spacing:.03em}
.estante .disco{font:400 14px/1.2 var(--f-texto)}
.estante .aberto h3{font:900 clamp(30px,3vw,46px)/.88 var(--f-titulo);text-transform:uppercase;letter-spacing:-.04em;margin:0;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.estante .aberto p{margin:0;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.estante .ler{margin-top:auto;display:inline-flex;gap:8px;width:max-content;font:700 12px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #000;padding-bottom:4px}
.estante .ler span{transition:transform .25s}
.estante .aberto:hover .ler span,.estante .aberto:focus-visible .ler span{transform:translateX(4px)}
.estante .lp.on{width:var(--ab)}
.estante .lp.pub .lomb .v{font-size:22px}
.estante .aberto-pub{grid-template-columns:minmax(0,1fr)!important;place-items:center}
.estante .aberto-pub .ad{width:300px;max-width:100%;min-height:250px;color:#000}
.estante .lp.on .lomb{opacity:0;pointer-events:none}
.estante .lp.on .aberto{opacity:1;visibility:visible;transition-delay:.35s}

/* ================= COBERTURAS (destaque verde) ================= */
.cob{background:var(--verde);color:#000}
.cob .intro{max-width:52ch;margin:-12px 0 28px;color:#000}
.cob-anos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.cob-anos button{background:none;border:1px solid #000;color:#000;padding:8px 12px;font:700 14px/1 var(--f-sub);letter-spacing:.02em;cursor:pointer;transition:background .2s,border-color .2s}
.cob-anos button:hover,.cob-anos button:focus-visible{background:var(--bege)}
.cob-anos button[aria-pressed="true"]{background:var(--bege);color:#000;border-style:solid}
.chips{display:flex;flex-wrap:wrap;gap:12px;transition:opacity .2s}
.chips.saindo{opacity:0}
.chips a{display:flex;align-items:center;gap:14px;border:1px solid #000;padding:16px 18px;font:700 15px/1.15 var(--f-sub);text-transform:uppercase;letter-spacing:.02em;background:var(--verde);transition:background .2s,color .2s,transform .2s}
.chips a{flex:none}
.chips .ic,.chips .ic-st{width:30px;height:30px;flex:none}
.chips .ic-st{display:none;padding:4px;animation:gira 1.6s linear infinite}
.chips .ar{font:700 17px/1 var(--f-sub);opacity:0;transform:translateX(12px);transition:opacity .25s,transform .3s ease}
.chips a:hover,.chips a:focus-visible{background:var(--bege)}
.chips a:hover .ic,.chips a:focus-visible .ic{display:none}
.chips a:hover .ic-st,.chips a:focus-visible .ic-st{display:block}
.chips a:hover .ar,.chips a:focus-visible .ar{opacity:1;transform:none}

/* ================= LIVROS + MAIS LIDAS ================= */
.split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.list-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding-block:18px;border-top:1px solid var(--linha);align-items:center}
.list-row:first-child{border-top:0;padding-top:0}
.list-row .t-sub{font-size:21px}
.list-row > div{display:flex;flex-direction:column;gap:8px}
.aside{display:flex;flex-direction:column;gap:28px}
.lidas{counter-reset:l}
.lidas h2{font-size:40px;margin-bottom:8px}
.lidas a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding-block:14px;border-top:1px solid var(--linha)}
.lidas a::before{counter-increment:l;content:counter(l);font:900 40px/.85 var(--f-titulo);letter-spacing:-.04em}
.lidas .t-sub{font-size:17px}

/* ================= CINEMA (faixa invertida) ================= */
.cine{background:var(--inv-bg);color:var(--inv-fg)}
.cine .t-texto,.cine .meta{color:var(--inv-suave)}
.cine-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,3vw,44px)}
.cine-grid .cine-big{order:2}
.cine-grid .cine-side{order:1}
.cine-big{display:flex;flex-direction:column;gap:16px}
.cine-big .media{aspect-ratio:4/3;background:transparent;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.cine-big h3{font-size:clamp(34px,4vw,56px)}
.cine-side{display:flex;flex-direction:column;gap:28px}
.cine .ad{color:var(--inv-suave)}
.cine .ad::before{background:var(--inv-fg);color:var(--inv-bg)}
.cine-list{display:flex;flex-direction:column}
.cine-list a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding-block:18px;border-top:1px solid var(--inv-linha)}
.cine-list a:first-child{border-top:0;padding-top:0}
.cine-list .media{aspect-ratio:1;border:5px solid var(--inv-fg)}
.cine-list > a > div{display:flex;flex-direction:column;gap:8px}
.cine .t-sub{font-size:19px}

/* ================= TEATRO ================= */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.grid3 .media{aspect-ratio:16/10}

/* ================= RODAPÉ ================= */
/* ================= RODAPÉ (centralizado, em camadas; logo embaixo como assinatura) ================= */
footer{background:var(--verde);color:#000}
.foot{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:52px 28px}
.foot .ft-tr{width:100%;border-top:1px solid #000;margin:32px 0}
.foot .estrela{width:9px;height:9px;flex:none;color:#000;animation:gira 6s linear infinite}
/* seções: lado a lado, separadas pela estrelinha; a estrelinha que cairia na ponta de uma linha vira quebra (.qb, via JS) */
.ft-menu{display:flex;flex-direction:column;align-items:center;font:700 13px/1.15 var(--f-sub);text-transform:uppercase;letter-spacing:.04em}
.ft-menu div{display:flex;align-items:center;justify-content:center;gap:0 14px}
.ft-menu a{padding-block:6px;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ft-menu a:hover,.ft-menu a:focus-visible{text-decoration:underline}
.ft-menu .ft-so-cel{display:none}
.foot .qb{flex-basis:100%;width:0;height:0;margin:0;visibility:hidden}
.ft-soc{display:flex;gap:6px;margin-top:22px}
.ft-soc a{width:36px;height:36px;display:grid;place-items:center;border:1px solid #000;transition:background .2s,color .2s}
.ft-soc a svg{width:16px;height:16px}
.ft-soc a:hover,.ft-soc a:focus-visible{background:#000;color:var(--bege)}
.mails{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.mails a{display:inline-flex;align-items:center;gap:7px;font:700 12px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.03em;text-decoration:underline;text-underline-offset:3px}
.mails a:hover{background:#000;color:var(--bege)}
.mails a.ok{background:#000;color:var(--verde);text-decoration:none}
.mails svg{width:16px;height:16px;flex:none}
.foot .legal{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;justify-content:center;gap:0 9px;margin-top:18px}
.foot .legal a,.foot .legal button{background:none;border:0;padding:3px 0;color:#000;cursor:pointer;font:700 10.5px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.foot .legal a:hover,.foot .legal button:hover,.foot .legal a:active,.foot .legal button:active,.foot .legal a:focus-visible,.foot .legal button:focus-visible{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.foot .logo2{width:min(340px,70vw);color:#000}
.foot .logo2 svg{width:100%;height:auto;display:block}
.powered{display:inline-flex;align-items:baseline;gap:10px}
.powered span{font:700 7.2px/1 var(--f-sub);position:relative;top:-3.4px;text-decoration:underline;text-underline-offset:3px;text-transform:uppercase;letter-spacing:.05em}
.powered b{font:900 18px/1 var(--f-titulo);display:block;letter-spacing:-.04em;text-transform:lowercase}
.foot .ft-pow-cel{display:none}
.ft-base{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;border-top:1px solid #000;margin-top:36px;padding-top:18px}
.foot .dir{font:700 11px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.03em;margin:0;color:#000}
.foot .dir i{font-style:normal}
@media (max-width:700px){
  .foot{padding-block:40px 26px}
  .foot .ft-tr{margin:26px 0}
  .ft-menu{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 12px}
  .ft-menu div{display:contents}
  .ft-menu .ft-so-cel{display:block}
  .mails{flex-direction:column;align-items:center}
  .foot .legal{flex-wrap:wrap;white-space:normal}
  .foot .ft-pow-cel{display:inline-flex;margin-top:20px}
  .ft-base{justify-content:center;margin-top:28px}
  .ft-base .powered{display:none}
  .foot .dir{line-height:1.5}
  .foot .dir span{display:block}
  .foot .dir i{display:none}
}
@media (prefers-reduced-motion:reduce){.foot .estrela{animation:none}}
/* aviso de cookies: cartão tracejado no canto, biscoito mordido girando */
.cookies{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;width:340px;max-width:calc(100% - 32px);display:grid;gap:12px;background:var(--bege);color:#000;border:1px solid #000;padding:16px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s,transform .3s,visibility .3s}
.cookies.on{opacity:1;visibility:visible;transform:none}
.cookies .ck-t{display:flex;align-items:center;gap:10px;margin:0;font:700 16px/1.1 var(--f-sub);text-transform:uppercase;letter-spacing:.02em}
.cookies .bisc{width:26px;height:26px;flex:none;color:#000;animation:gira 8s linear infinite}
.cookies p{margin:0;font:400 14px/1.45 var(--f-texto)}
.cookies p a{color:#000;text-decoration:underline;text-underline-offset:3px}
.cookies p a:hover{background:var(--verde)}
.cookies .bts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookies button{font:700 12px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;padding:11px 10px;cursor:pointer;border:1px solid #000;color:#000;transition:background .2s,color .2s}
.cookies .nao{background:none;border-style:solid}
.cookies .nao:hover,.cookies .nao:focus-visible{background:#fff}
.cookies .sim{background:var(--verde)}
.cookies .sim:hover,.cookies .sim:focus-visible{background:#000;color:var(--bege)}
@media (max-width:560px){.cookies{left:12px;right:12px;width:auto;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.cookies .bisc{animation:none}}

/* ================= FLUTUANTES ================= */
.status{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;background:#000;color:var(--bege);padding:8px 8px 8px 14px;font:700 12px var(--f-sub);max-width:calc(100% - 90px);box-shadow:0 0 0 1px var(--verde)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none;animation:pulse 2s infinite}
.status.off .dot{background:#999;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(210,247,121,.7)}70%{box-shadow:0 0 0 8px rgba(210,247,121,0)}100%{box-shadow:0 0 0 0 rgba(210,247,121,0)}}
.status button{background:var(--verde);color:#000;border:0;padding:5px 10px;font:700 11px var(--f-sub);cursor:pointer;flex:none}
.topo{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;border:0;background:var(--tinta);color:var(--papel);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
.topo.on{opacity:1;pointer-events:auto}

/* ================= RESPONSIVO ================= */
@media (max-width:1080px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rank{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .submenu{display:none}
  .burger{display:grid}
  .hero,.split,.cine-grid,.duo{grid-template-columns:minmax(0,1fr)}
  /* telas empilhadas: nunca dois espaços de publicidade seguidos (o bloco de cima já termina com um) */
  .ad-dup-cel{display:none}
  .cine-grid .cine-big,.cine-grid .cine-side{order:0}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .head .soc{display:none}
  /* celular: menu à esquerda, logo no centro, pesquisa e modo escuro à direita */
  .head{display:flex;align-items:center;position:relative;gap:6px}
  .head-l{display:contents}
  .head .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  #btn-menu{order:0}
  #btn-busca{order:1;margin-left:auto}
  #btn-tema{order:2}
  .head-r{order:3}
  .head{min-height:75px}
  .logo{width:110px}
}
@media (max-width:560px){
  .tk-set a{font-size:11px;padding:18.5px 0}
  .tk-selo{font-size:11px;padding:0 14px 0 calc(14px + .06em)}
  .tk-set .estrela{width:13px;height:13px;margin-inline:15px}
  .cob-anos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .cob-anos::-webkit-scrollbar{display:none}
  .cob-anos button{flex:none}
  .chips a{flex:0 1 auto;max-width:100%}
  .grid4,.grid3,.rank{grid-template-columns:minmax(0,1fr)}
  /* celular: estante na vertical — disco aberto em cima, próximas lombadas deitadas embaixo */
  .alb{--lomb:56px}
  .estante{height:660px}
  .estante .trilho{flex-direction:column}
  .estante .lp{width:100%;height:var(--lomb);margin:0 0 -1px;border-inline:0;transition:height .8s cubic-bezier(.6,0,.2,1)}
  .estante .lp.on{width:100%;height:var(--ab)}
  .estante .lomb{flex-direction:row;align-items:center;gap:14px;padding:0 var(--gut)}
  .estante .num{font-size:24px}
  .estante .lomb .v{writing-mode:horizontal-tb;transform:none;font-size:22px;max-height:none;max-width:calc(100% - 50px);text-overflow:ellipsis}
  .estante .aberto{width:100%;height:var(--ab);bottom:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px;padding:16px var(--gut)}
  .estante .aberto .media{aspect-ratio:16/10}
  .estante .aberto h3{font-size:28px;display:block;-webkit-line-clamp:unset;overflow:visible}
  .estante .aberto-pub{min-height:282px}
  .estante .aberto p{-webkit-line-clamp:3}
  .ad.leader{min-height:100px;max-width:320px}
  .list-row{grid-template-columns:110px minmax(0,1fr);gap:14px}
  .list-row .t-sub{font-size:17px}
  .hero-fig{grid-template-columns:minmax(0,1fr)}
  .vcred{display:none}
  .publi .marca{width:78px}
  .publi .meio,.publi .rot{display:none}
  .publi .cta{font-size:12px}
  .res{grid-template-columns:minmax(0,1fr)}
  .status span.txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ticker{overflow-x:auto}
}

/* bloco "crítica destaque": slide de críticas na largura total da tela */
.cs-todas{margin-left:auto;background:var(--verde);color:#000;text-decoration:none;padding:12px 15px;font:700 11px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.05em;transition:background .15s,color .15s;white-space:nowrap}
.cs-todas:hover,.cs-todas:focus-visible{background:var(--bege);color:#000;outline:none}
.cs{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);background:#000;color:var(--bege);min-height:clamp(420px,42vw,600px);touch-action:pan-y;user-select:none}
.cs-img{position:relative;overflow:hidden;display:block}
.cs-img .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.cs-img .media img{width:100%;height:100%;object-fit:cover}
.cs-lado{display:flex;flex-direction:column;padding:clamp(24px,3vw,44px) var(--gut) clamp(22px,2.6vw,36px) clamp(24px,3vw,44px)}
.cs-lado .cs-cat{align-self:flex-start;font:700 11px/1 var(--f-sub);text-transform:uppercase;letter-spacing:.07em;color:var(--verde);border-bottom:1px solid var(--verde);padding-bottom:3px}
.cs-lado h3{font:700 clamp(24px,2.6vw,42px)/1.04 "AlteHaas180",var(--f-sub);letter-spacing:-.1em;padding-right:.1em;margin:14px 0 12px;text-decoration:underline;text-decoration-color:var(--bege);text-decoration-thickness:.07em;text-underline-offset:.12em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.cs-lado h3{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:1.2}
.cs-lado h3 a{color:inherit;text-decoration:inherit}
.cs-lado p{margin:0;font-size:16px;line-height:1.5;max-width:46ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-base{margin-top:auto;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding-top:18px;border-top:1px solid rgba(255,243,226,.3)}
.cs-seta{width:48px;height:48px;border-radius:50%;border:1px solid var(--bege);background:transparent;color:var(--bege);display:grid;place-items:center;cursor:pointer;font:700 18px/1 var(--f-sub);transition:background .15s,color .15s,border-color .15s}
.cs-seta:hover,.cs-seta:focus-visible{background:var(--verde);color:#000;border-color:var(--verde);outline:none}
.cs-cont{font:700 12px/1 var(--f-sub);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.cs-anim{animation:cs-entra .45s ease}
@keyframes cs-entra{from{opacity:0;transform:translateX(var(--cs-dx,24px))}}
.cs-img .media.cs-anim{animation:cs-foto .6s ease}
@keyframes cs-foto{from{opacity:.2}}
@media (max-width:900px){.cs{grid-template-columns:minmax(0,1fr);min-height:0}.cs-img{aspect-ratio:16/10}.cs-lado{padding:22px var(--gut) 20px}}
@media (prefers-reduced-motion:reduce){.cs-anim,.cs-img .media.cs-anim{animation:none}}

/* ícone do "envie sua música": coração pulsando */
.i-envie{animation:env-pulsa 1.1s ease-in-out infinite;transform-origin:50% 60%}
@keyframes env-pulsa{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.i-envie{animation:none}}

/* barra de anúncio: fundo bordô, textos em rosa */
.publi{background:#3a0016;color:#fbaeff}
.publi .marca,.publi .cta{color:#fbaeff}
.publi .fc,.publi .fw{color:#fbaeff}
/* tema claro: anúncio bege com preto, header verde, ticker bege, menu preto */
.publi,:root .publi{background:#FFF3E2;color:#000}
.publi .marca,.publi .cta,.publi .fc,.publi .fw{color:#000} /* barra de anúncio igual nos dois temas */
:root:not([data-theme="dark"]) header.site{background:var(--verde)}
:root:not([data-theme="dark"]) .ticker{background:#FFF3E2;color:#000}
:root:not([data-theme="dark"]) .tk-set .estrela{color:#000}
:root:not([data-theme="dark"]) .tk-set a:hover{color:#000}
@media (prefers-color-scheme:dark){
  
  
  :root:not([data-theme="light"]) header.site{background:var(--papel)}
  :root:not([data-theme="light"]) .ticker{background:var(--verde);color:#000}
  :root:not([data-theme="light"]) .tk-set .estrela{color:var(--bege)}
}


:root[data-theme="dark"] header.site{background:var(--papel)}
:root[data-theme="dark"] .ticker{background:var(--verde);color:#000}
:root[data-theme="dark"] .tk-set .estrela{color:var(--bege)}
/* sem linhas no topo ao rolar: nem embaixo do header nem na faixa do menu fixo (nem durante a animação) */
header.site.rolou{box-shadow:none}
.hd-menu ul{border:0!important}
/* barra de leitura logo abaixo do menu fixo */
@media (min-width:901px){body:has(header.site.so-menu) .progresso{top:56px}}
/* ===== topo e rodapé (vindos do teste da página envie sua música) ===== */
/* no computador, ao rolar, só a faixa do menu fica fixa no topo (o header rola junto com a página); faixa com 56px */
@media (min-width:901px){
  header.site{position:relative}
  header.site .hd-menu,header.site .hd-menu ul{height:56px}
  header.site .hd-menu a{height:54px}
  header.site.so-menu .hd-menu{position:fixed;top:0;left:0;right:0;z-index:40;visibility:visible;pointer-events:auto;transition:visibility 0s}
  .hd-acoes{display:none}
  header.site.so-menu .hd-acoes{position:absolute;left:calc(max(0px,(100% - var(--max))/2) + var(--gut));top:0;height:56px;display:flex;align-items:center;gap:4px;z-index:2}
  .hd-acoes .ico{border-color:transparent;color:inherit}
  header.site.so-menu .hd-acoes{color:var(--tinta)}
  .hd-acoes .ico:hover,.hd-acoes .ico:focus-visible{background:#000;color:#FFF3E2}
  :root[data-theme="dark"] .hd-acoes .ico:hover,:root[data-theme="dark"] .hd-acoes .ico:focus-visible{background:#FFF3E2;color:#000}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-acoes .ico:hover,:root:not([data-theme="light"]) .hd-acoes .ico:focus-visible{background:#FFF3E2;color:#000}}
  :root[data-theme="dark"] header.site.so-menu .hd-menu ul{background:#000;color:#FFF3E2}
  :root[data-theme="dark"] header.site.so-menu .hd-acoes{color:#FFF3E2}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) header.site.so-menu .hd-menu ul{background:#000;color:#FFF3E2}
    :root:not([data-theme="light"]) header.site.so-menu .hd-acoes{color:#FFF3E2}
  }
  header.site.so-menu .hd-menu ul{transform:none;border:0;background:var(--papel);color:var(--tinta)}
}
/* ticker na Vinila Bold (um pouco maior, porque a Vinila é mais estreita) */
.tk-set a,.tk-selo{font-family:var(--f-titulo);font-weight:700;letter-spacing:0;font-size:18px;line-height:14px}
@media (max-width:900px){.tk-set a,.tk-selo{font-size:14px;line-height:11px}}
/* frase da barra de anúncio menor e mais junta */
.publi .fc,.publi .fw{font-size:17px;letter-spacing:-.03em}
/* ticker sem o selo "news" */
.tk-selo{display:none}
.ticker{border-block:0}
/* linhas do rodapé sólidas, num verde levemente mais escuro (preto 7% por cima) */
footer .foot .ft-tr,footer .foot .ft-base,footer .ft-base{border-top:1px solid rgba(0,0,0,.07)}

/* ===== ajustes do tema (WordPress) ===== */
.status{display:none!important}
/* barra preta do WordPress (só para quem está logado): o menu fixo e o topo no celular descem para não ficar embaixo dela */
@media (min-width:901px){body.admin-bar header.site.so-menu .hd-menu{top:32px}}
@media (min-width:783px) and (max-width:900px){body.admin-bar header.site{top:32px}}
@media (min-width:601px) and (max-width:782px){body.admin-bar header.site{top:46px}}
.esc-busca-sub{margin:10px 0 0;font:700 15px/1.3 var(--f-sub);text-transform:uppercase;letter-spacing:.04em}
.lg-pg{padding-block:clamp(24px,3vw,40px) clamp(48px,6vw,80px);max-width:760px}
.lg-pg img{max-width:100%;height:auto}
/* vídeos incorporados: sem o espaço extra que o WordPress coloca para manter a proporção */
.corpo .wp-block-embed__wrapper::before{content:none!important;display:none!important;padding:0!important}
.corpo .wp-block-embed iframe{position:static!important;max-width:100%;display:block}
/* vídeos de tela deitada (YouTube, Vimeo, Dailymotion…): proporção 16:9 na largura toda */
.corpo .wp-block-embed.esc-169 iframe{width:100%!important;height:auto!important;aspect-ratio:16/9}
.corpo .wp-block-embed.esc-169.wp-embed-aspect-4-3 iframe{aspect-ratio:4/3}
.corpo .wp-block-embed.esc-169.wp-embed-aspect-21-9 iframe{aspect-ratio:21/9}
/* players e posts (Spotify, SoundCloud, Deezer, Bandcamp, Apple Music, Instagram, X, TikTok…): largura da moldura, altura do próprio player */
.corpo .wp-block-embed.esc-rico iframe{width:100%}
/* posts de redes (Instagram, X, TikTok) chegam como citação até o script deles carregar: sem o estilo de citação do texto */
.corpo .wp-block-embed blockquote{margin:0 auto!important;border-left:0!important;padding:0!important;font:400 15px/1.5 var(--f-texto)!important;transform:none!important}