/* =========================================================================
   TrendsTops — Site público — Tema escuro moderno + responsivo (v2)
   Totalmente escuro (cards escuros, texto claro), elegante, fonte Inter.
   Cor padrão: #009688.  Camada de override, carregada por último.
   ========================================================================= */

:root{
  --bg:        #0d1117;   /* fundo da página */
  --shell:     #0a0e13;   /* cabeçalho / linkbar / rodapé */
  --card:      #161d27;   /* cards de conteúdo */
  --card-2:    #1c2632;   /* superfície de hover / rodapé do card */
  --line:      #242e3b;
  --line-soft: rgba(255,255,255,.06);
  --text:      #e7edf3;
  --muted:     #93a0ae;
  --accent:    #009688;
  --accent-2:  #1ec8b0;
  --accent-d:  #00715f;
  --gold:      #ffc20e;
  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 10px 30px rgba(0,0,0,.40);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.30);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html, body{ background: var(--bg) !important; }
body{
  color: var(--text); font-family: var(--font); letter-spacing: .1px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#wrapper{ background: var(--bg); overflow-x: hidden; }
body, p, span, div, a, li, h1, h2, h3, h4, h5, input, button, textarea, select{ font-family: var(--font); }
a{ transition: color .18s ease, background-color .18s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
img{ max-width: 100%; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-thumb{ background: #2a3644; border-radius: 8px; }
::-webkit-scrollbar-track{ background: var(--shell); }

/* ---------- Utilidades/grid do Bootstrap (perdido na migração) ---------- */
.clearfix::before, .clearfix::after, .row::before, .row::after{ content: " "; display: table; }
.clearfix::after, .row::after{ clear: both; }
.pull-left{ float: left !important; }
.pull-right{ float: right !important; }
.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }
.hide, .hidden{ display: none !important; }
.list-inline{ padding-left: 0; margin-left: -5px; list-style: none; }
.list-inline > li{ display: inline-block; padding-left: 5px; padding-right: 5px; }
.row{ margin-left: -15px; margin-right: -15px; }
[class*="col-md-"], [class*="col-sm-"]{ position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.col-md-12{ width: 100%; }
@media (min-width: 768px){
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{ float: left; }
  .col-sm-12{width:100%}.col-sm-11{width:91.66%}.col-sm-10{width:83.33%}.col-sm-9{width:75%}.col-sm-8{width:66.66%}.col-sm-7{width:58.33%}.col-sm-6{width:50%}.col-sm-5{width:41.66%}.col-sm-4{width:33.33%}.col-sm-3{width:25%}.col-sm-2{width:16.66%}.col-sm-1{width:8.33%}
}
/* Dropdown (ASSUNTOS) — Bootstrap JS adiciona .open; o CSS de exibição vinha do Bootstrap */
#linkbar li.dropdown{ position: relative; }
.dropdown.open > .dropdown-menu,
#linkbar li.dropdown.open > .assuntos-dropdown{ display: block !important; }

/* ---------- Containers fluidos (eram 1000px fixos) ---------- */
#header, #linkbar, #linkbar .content, #conteudo, #permalink, #permalink > .content,
#footer, #footer > .content, .linha, .linha-links,
.coluna-3, .coluna-4, .coluna-5, .coluna-6, .coluna-12,
.link-bloco-335, .link-bloco-235, .link-bloco-175,
.publicidade-links-300, .publicidade-links-970, .publicidade-video{ box-sizing: border-box; }

#header, #linkbar .content, #conteudo, #permalink > .content, #footer > .content{
  width: 100% !important; max-width: 1060px !important; margin: 0 auto !important;
  padding-left: 16px !important; padding-right: 16px !important;
}
.linha-links{ width: 100% !important; max-width: 100% !important; }
#conteudo{ overflow: visible !important; padding-bottom: 40px; }
.faixa-publicidade, .publicidade-links-970-titulo{ color: var(--muted) !important; }

/* ---------- Cabeçalho ---------- */
#header{
  height: auto !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 14px 16px !important; background: var(--shell);
}
#header_links{ order: -1; flex: 1 1 100%; height: auto !important; line-height: 1.9 !important; text-align: right; }
#header_links ul{ float: none !important; margin: 0; }
#header_links li{ background: none !important; }
#header_links a{ color: var(--muted) !important; font-size: 12.5px; }
#header_links a:hover{ color: var(--accent-2) !important; text-decoration: none; }
/* logo como "chip" branco elegante (a logo é colorida sobre branco) */
.header_logo{ position: static !important; flex: 0 0 auto; }
.header_logo a{ display: inline-block; background: #fff; padding: 8px 13px; border-radius: 12px;
  box-shadow: var(--shadow-sm); line-height: 0; }
.header_logo img{ height: 42px; width: auto; }
.header_publicidade{ float: none !important; flex: 1 1 300px; min-width: 0; width: auto !important;
  max-width: 100%; text-align: right; }
.header_publicidade > .titulo{ color: var(--muted) !important; }
.header_publicidade img{ height: auto; max-width: 100%; border-radius: 8px; }

/* ---------- Linkbar / menu ---------- */
#linkbar{
  background: var(--shell) !important; border-bottom: 1px solid var(--line) !important;
  height: auto !important; position: relative;
}
#linkbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, var(--accent), transparent 55%); }
#linkbar.menu-fixo{ width: 100% !important; height: auto !important; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
#linkbar a{ color: var(--text) !important; font-weight: 600; }
#linkbar a:hover{ color: var(--accent-2) !important; }
.btn-enviar-link{ background: var(--accent) !important; color: #fff !important; border-radius: 9px;
  height: auto !important; padding: 9px 18px !important; font-size: 14px !important; box-shadow: var(--shadow-sm); }
.btn-enviar-link:hover{ background: var(--accent-d) !important; transform: translateY(-1px); }
.form-buscar{ border: 1px solid var(--line) !important; background: var(--card) !important; border-radius: 9px !important; }
.ipt-buscar{ background: transparent !important; color: var(--text) !important; border: 0 !important; }
.ipt-buscar::placeholder{ color: var(--muted); }
.assuntos-dropdown{
  position: absolute !important; z-index: 1000; top: calc(100% + 8px) !important; left: 0 !important;
  width: 620px !important; max-width: calc(100vw - 24px) !important; padding: 14px !important;
  background: var(--card) !important; border: 1px solid var(--line) !important; border-top: 2px solid var(--accent) !important;
  border-radius: 12px; box-shadow: var(--shadow);
}
.assuntos-dropdown ul.menu-assuntos{ margin: 0 !important; padding: 0 !important; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px; line-height: 1.5 !important; }
.assuntos-dropdown ul.menu-assuntos li{ margin: 0 !important; height: auto !important; list-style: none; }
.assuntos-dropdown ul.menu-assuntos li a{ display: inline-block; padding: 6px 12px !important;
  border-radius: 8px; color: #fff !important; font-size: 13px !important; font-weight: 500 !important;
  text-transform: capitalize !important; box-shadow: var(--shadow-sm); }
.assuntos-dropdown ul.menu-assuntos li a:hover{ filter: brightness(1.18); transform: translateY(-1px); }

/* ---------- Títulos de seção (categoria / busca) ---------- */
.categoria-titulo, .busca-titulo{ background: var(--accent) !important; border-radius: 10px;
  box-shadow: var(--shadow-sm); }
.categoria-titulo a{ color: #fff !important; }

/* =========================================================================
   GRADE DE LINKS — cards escuros, modernos, com espaçamento
   ========================================================================= */
#links{ margin-top: 26px; }

/* gaps verticais consistentes */
.link-bloco-335, .link-bloco-235, .link-bloco-175{ margin-bottom: 26px !important; }
.linha-links{ margin-bottom: 6px !important; }

/* badges de cliques/categoria */
a.link-categoria, a.link-cliques, .destaque-compartilhar,
.link-bloco-235 > .cliques, .link-bloco-175 > .cliques, #permalink .cliques{
  background-color: rgba(0,0,0,.62) !important; border-radius: 6px;
}
a.link-categoria{ background-color: var(--accent) !important; }

/* Card destaque 335 (imagem + título sobreposto) */
.link-bloco-335{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--card); }
.link-bloco-335 > .imagem, .link-bloco-335 > .imagem img{ border-radius: var(--radius); }
.link-bloco-335 > .imagem::after{ content:""; position:absolute; inset:0; border-radius: var(--radius);
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 42%, transparent 70%); }
.link-bloco-335 > .info{ z-index: 2; }
.link-bloco-335 > .info > .row > .titulo > a{ color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.link-bloco-335:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.link-bloco-335{ transition: transform .2s ease, box-shadow .2s ease; }

/* Card 235 (imagem em cima + título + compartilhar) */
.link-bloco-235{
  background: var(--card) !important; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); height: auto !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.link-bloco-235:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: #2f3b4a; }
.link-bloco-235 > .imagem{ height: auto !important; overflow: hidden; }
.link-bloco-235 > .imagem img{ width: 100% !important; height: 160px !important; object-fit: cover; display: block;
  transition: transform .35s ease; }
.link-bloco-235:hover > .imagem img{ transform: scale(1.05); }
.link-bloco-235 > .titulo{
  height: auto !important; min-height: 64px; padding: 12px 14px !important;
  background: var(--card) !important; border: 0 !important;
}
.link-bloco-235 > .titulo a{ color: var(--text) !important; font-size: 13.5px !important; font-weight: 600; line-height: 1.4; }
.link-bloco-235 > .titulo a:hover{ color: var(--accent-2) !important; }
.link-bloco-235 > .compartilhar{
  background: var(--card-2) !important; border: 0 !important; border-top: 1px solid var(--line-soft) !important;
  padding: 4px 8px;
}
.link-bloco-235 > .compartilhar > ul > li{ border-color: var(--line-soft) !important; }
.link-bloco-235 > .compartilhar > ul > li > a{ color: var(--muted) !important; opacity: 1 !important; filter: none !important; }
.link-bloco-235 > .compartilhar > ul > li > a:hover{ color: var(--accent-2) !important; }

/* Card 175 (retangular: imagem à esquerda + info) */
.link-bloco-175{
  background: var(--card) !important; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); height: auto !important; min-height: 130px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.link-bloco-175:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.link-bloco-175 > .info > .titulo a{ color: var(--text) !important; font-weight: 600; }
.link-bloco-175 > .info > .titulo a:hover{ color: var(--accent-2) !important; }
.link-bloco-175 > .info > .data{ color: var(--muted) !important; }
.link-bloco-175 > .info > .compartilhar a{ color: var(--muted) !important; }
.link-bloco-175 > .info > .compartilhar a:hover{ color: var(--accent-2) !important; }

/* Áreas de anúncio: moldura discreta (deixa o anúncio respirar) */
.publicidade-links-300, .publicidade-video, .publicidade-links-970 > .anuncio{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.publicidade-links-970 > .titulo, .publicidade-links-300-titulo, .titulo:not(.row .titulo){ color: var(--muted) !important; }

/* ---------- Permalink ---------- */
#permalink{
  background: var(--card) !important; color: var(--text); border-radius: var(--radius);
  border: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow); padding: 24px !important;
}
#permalink > .imagem, #permalink > .imagem img{ border-radius: var(--radius-sm); }
#permalink .titulo > a{ color: var(--accent-2) !important; }
#permalink .descricao{ color: var(--text); }
#permalink .data{ color: var(--muted) !important; }
#permalink .compartilhar > ul > li > a{ color: var(--muted) !important; }
#permalink .compartilhar > ul > li > a:hover{ color: var(--accent-2) !important; }
#permalink .compartilhar .titulo{ color: var(--accent-2) !important; }
a.permalink-ver-conteudo-completo{ background: var(--accent) !important; color: #fff !important; border-radius: 9px; }

/* ---------- Páginas (.htm) ---------- */
#pagina{ background: var(--card) !important; color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: var(--radius); }
#pagina, #pagina *{ color: var(--text); }
#pagina a{ color: var(--accent-2) !important; }

/* ---------- Rodapé ---------- */
#footer{ background: var(--shell) !important; border-top: 1px solid var(--line) !important; }
#footer::before{ content:""; display:block; height:2px; background: linear-gradient(90deg, var(--accent), transparent 55%); }
#footer .bloco-titulo{ color: var(--text) !important; }
#footer .bloco-conteudo a{ color: var(--muted) !important; }
#footer .bloco-conteudo a:hover{ color: var(--accent-2) !important; }
.copyright{ color: var(--muted) !important; }
.vitalves a{ color: var(--gold); }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

/* Desktop: linkbar em flex (menu numa linha) */
@media (min-width: 769px){
  #linkbar .linha{ display: flex; align-items: center; gap: 18px; }
  #linkbar .coluna-5, #linkbar .coluna-3{ width: auto !important; flex: 0 0 auto; }
  #linkbar .coluna-4{ width: auto !important; flex: 0 1 320px; margin-left: auto; }
  #linkbar ul.menu-default{ white-space: nowrap; }
  #linkbar ul.menu-default li{ margin-right: 18px; }
  .form-buscar.pull-right{ float: none !important; width: 100%; }

  /* Grade: cards de altura igual por linha (alinhamento perfeito).
     Só nas colunas de card único (coluna-3/4); coluna-6 empilha retangulares. */
  .linha-links{ display: flex; flex-wrap: wrap; align-items: stretch; margin-bottom: 26px !important; }
  .linha-links > .coluna-3, .linha-links > .coluna-4{ display: flex; }
  .linha-links > .coluna-3 > .link-bloco-235, .linha-links > .coluna-4 > .link-bloco-235{ width: 100%; margin-bottom: 0 !important; }
  .linha-links .link-bloco-235{ display: flex; flex-direction: column; }
  .linha-links .link-bloco-235 > .titulo{ flex: 1 1 auto; }
}

@media (max-width: 1024px){
  .linha-links{ display: flex; flex-wrap: wrap; }
  .publicidade-links-970, .publicidade-links-970 > .anuncio{ width: 100% !important; height: auto !important; }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px){
  #header{ justify-content: center; text-align: center; }
  #header_links{ flex: 1 1 100%; text-align: center !important; }
  #header_links ul{ text-align: center; padding-left: 0; }
  #header_links li{ padding: 0 8px; }
  .header_logo{ flex: 1 1 100%; margin: 4px auto 8px; }
  /* >>> remove o banner do topo no mobile <<< */
  .header_publicidade{ display: none !important; }

  #linkbar .content{ display: flex; flex-direction: column; gap: 8px; padding: 8px 16px; }
  #linkbar ul, #linkbar ul.menu-default{ float: none !important; width: 100% !important; height: auto !important;
    line-height: 1.9 !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2px 4px; }
  #linkbar li, #linkbar ul.menu-default > li{ float: none !important; margin-right: 0 !important; display: inline-flex; }
  #linkbar li a{ display: inline-block; padding: 4px 8px; font-size: 13px; white-space: nowrap; }
  .btn-enviar-link{ display: inline-block !important; width: auto; align-self: center; }
  .assuntos-dropdown{ position: static !important; width: 100% !important; left: 0 !important; }
  .form-buscar, .coluna-4 .form-buscar{ width: 100% !important; margin: 4px 0 0 !important; }
  .ipt-buscar{ width: calc(100% - 40px) !important; }
  .btn-buscar{ width: 40px !important; }
  .form-buscar.pull-right{ float: none !important; }

  /* grade: coluna única */
  .link-bloco-335 .row, .link-bloco-235 .row, .link-bloco-175 .row, .info .row{ margin-left: 0 !important; margin-right: 0 !important; }
  .coluna-3, .coluna-4, .coluna-5, .coluna-6, .coluna-12{ width: 100% !important; float: none !important; padding-left: 0; padding-right: 0; }
  .linha, .linha-links{ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }

  .link-bloco-335{ width: 100% !important; height: auto !important; margin: 0 0 18px !important; aspect-ratio: 16/10; }
  .link-bloco-335 > .imagem{ position: absolute; inset: 0; }
  .link-bloco-335 > .imagem img{ width: 100% !important; height: 100% !important; object-fit: cover; }
  .link-bloco-335 > .info, .link-bloco-335 > .info > .row > .titulo{ width: auto !important; left: 14px; right: 14px; }

  .link-bloco-235{ width: 100% !important; margin: 0 0 18px !important; }
  .link-bloco-235 > .imagem img{ height: 200px !important; }
  .link-bloco-175{ width: 100% !important; margin: 0 0 18px !important; }

  .publicidade-links-300, .publicidade-video, .publicidade-links-970, .publicidade-links-970 > .anuncio{
    width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; }
  .publicidade-links-300{ margin: 0 0 18px; }
  .publicidade-links-300 iframe, .publicidade-video iframe, .publicidade-links-970 iframe, .publicidade-links-970 img{ max-width: 100%; }
  .publicidade-links-970 > .titulo{ display: none; }

  #permalink{ padding: 16px !important; }
  .permalink-col-1, .permalink-col-2, .permalink-col-3{ width: 100% !important; float: none !important; margin: 0 0 14px !important; }
  #permalink > .imagem, #permalink > .imagem img{ width: 100% !important; height: auto !important; }
  .permalink-col-2 .info, .permalink-col-2 .acoes{ height: auto !important; }
  #permalink .data, #permalink .compartilhar, #permalink .acessar-link, #permalink .cliques{ position: static !important; }
  a.permalink-ver-conteudo-completo{ padding: 9px 16px !important; float: none !important; text-align: center; }

  .categoria-titulo{ width: auto !important; display: block; }

  #footer .footer-assuntos-coluna{ width: 50% !important; margin-bottom: 14px; }
  #footer .bloco-conteudo{ height: auto !important; }
  #footer .logo-footer{ padding: 16px 0 0 !important; text-align: center; }
  .copyright, .vitalves{ text-align: center !important; float: none !important; margin: 8px 0 0 !important; }
}

@media (max-width: 480px){
  #header_links li{ padding: 0 5px; font-size: 11px; }
  #linkbar li a{ font-size: 12px; padding: 4px 6px; }
  #footer .footer-assuntos-coluna{ width: 100% !important; }
  .link-bloco-335 > .info > .row > .titulo{ font-size: 15px !important; }
}