/* ===========================
   RESET + BASE
=========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

:root{
  --bg1:#1a2436;
  --bg2:#0b0f17;
  --card: rgba(255,255,255,0.03);
  --card2: rgba(0,0,0,0.35);
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.06);
  --shadow: rgba(0,0,0,0.35);
  --txt: #fff;

  /* 🔥 banner do frame topo (JS injeta via variável) */
  --top-frame-banner: url("logos/banner_topo.png");
  --footer-frame-banner: none;
}

body {
  background: radial-gradient(circle at top, var(--bg1), var(--bg2) 70%);
  color: var(--txt);
  overflow-x: hidden;
}

.hidden{ display:none !important; }

/* ===========================
   CONTAINER CENTRAL
=========================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}

/* ===========================
   TOPO
=========================== */
.top-area {
  padding: 25px 0 0;
}

/* ===========================
   FRAME PRETO (BANNER FININHO)
=========================== */
.top-frame{
  width: 100%;
  height: 95px;
  border-radius: 20px;

  background: #000;
  background-image: var(--top-frame-banner);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 14px 18px;
  margin-bottom: 14px;

  overflow: hidden;
}

.top-frame-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* logo por cima do banner */
.top-frame-logo{
  height: 62px;
  width: auto;
  display: block;
  border-radius: 14px;

  background: rgba(0,0,0,0.35);
  padding: 6px 10px;

  box-shadow: 0 14px 35px rgba(0,0,0,0.45);
}

/* ===========================
   BANNER CARROSSEL TOPO
=========================== */
.top-banner-carousel {
  position: relative;
  width: 100%;
  height: 330px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px var(--shadow);
}

.banner-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner-track {
  display: flex;
  height: 100%;
  transition: transform 0.55s ease;
  will-change: transform;
}

.banner-card {
  min-width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔥 NOVO: vídeo no banner */
.banner-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================
   🔥 OVERLAY DO BANNER (MAIS CLARO)
   Antes estava MUITO escuro.
   Agora fica mais vivo e ainda legível.
=========================== */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.00) 100%
  );
}

.banner-text {
  position: absolute;
  left: 24px;
  top: 56%;
  transform: translateY(-50%);
  width: 52%;
  max-width: 560px;
  z-index: 4;
}

.banner-text h3 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;

  color: #fff;

  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px  3px 10px rgba(0,0,0,0.7);
}

.banner-text p {
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.95;

  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px  3px 10px rgba(0,0,0,0.7);
}

/* Botões banner */
.banner-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}

.banner-btn.left { left: 14px; }
.banner-btn.right { right: 14px; }

.banner-btn:hover{ background: rgba(0,0,0,0.75); }

/* ===========================
   🔥 INDICADORES + PROGRESSO DO BANNER
=========================== */
.banner-ui{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 12;
  display:flex;
  flex-direction: column;
  gap: 0px;
  pointer-events: none;
}

.banner-dots{
  display:flex;
  gap: 8px;
  justify-content: center;
  pointer-events: auto;
}

.banner-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,0.22);
}

.banner-dot.active{
  background: rgba(255,255,255,0.95);
}

@media (max-width: 950px){
  .banner-ui{ left: 12px; right: 12px; bottom: 10px; }
}

/* ===========================
   LOGO SOBREPOSTA NO BANNER
   -> DESATIVADA
=========================== */
.top-logo-overlay {
  display: none;
}

/* ===========================
   LIVE TICKER
=========================== */
.live-ticker {
  margin-top: 14px;
  width: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden;
}

.live-pill {
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(255,0,60,0.95), rgba(255,120,0,0.95));
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
  white-space: nowrap;
}

.ticker-viewport {
  overflow: hidden;
  width: 100%;
}

.ticker-track {
  display: inline-flex;
  gap: 18px;
  white-space: nowrap;
  animation: tickerMove 18s linear infinite;
  font-size: 13px;
  opacity: 0.95;
}

@keyframes tickerMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===========================
   CARROSSEL DE CANAIS
=========================== */
.carousel-frame {
  margin-top: 18px;
  background: rgba(0,0,0,0.55);
  border-radius: 18px;
  padding: 15px 55px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: visible;
}

.carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 5px 0;
  width: 100%;
  white-space: nowrap;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.channel-card {
  flex: 0 0 auto;
  min-width: 140px;
  height: 90px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.2s ease;
  user-select: none;
}

.channel-card:hover {
  transform: scale(1.04);
  background: rgba(255, 255, 255, 0.09);
}

.channel-card.active{
  transform: scale(1.06);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}

.channel-card img {
  max-width: 90px;
  max-height: 55px;
  object-fit: contain;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
}

.carousel-btn.left { left: 10px; }
.carousel-btn.right { right: 10px; }

.carousel-btn:hover{ background: rgba(0,0,0,0.82); }

/* ===========================
   PLAYER + CHAT
=========================== */
.main-content {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.player-box {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);

    position: relative;
    overflow: hidden;          /* 🔥 impede vazamento */
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-box video,
.yt-player {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* mantém proporção bonita */
    border: none;
}

.yt-player{
  width: 100%;
  height: 420px;
  border-radius: 14px;
  border: 0;
  background: #000;
  display: block;
}

.channel-title {
  margin-top: 12px;
  font-size: 18px;
  font-weight: bold;
  flex: 0 0 auto;
}

/* CHAT */
.chat-box {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  padding: 0px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
  flex: 0 0 auto;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  margin-bottom: 10px;
}

.msg {
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.msg.bot { background: rgba(255, 255, 255, 0.07); }
.msg.user { background: rgba(0, 140, 255, 0.25); text-align: right; }

/* =========================================================
   CHAT INPUT - CORREÇÃO DEFINITIVA (SEM OVERFLOW)
   ========================================================= */

.chat-box {
    overflow: hidden;
    box-sizing: border-box;
}

.chat-input {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: 10px;

    /* ESSENCIAL */
    overflow: hidden;
}

.chat-input input {
    flex: 1 1 auto;

    width: 100%;
    max-width: 100%;

    min-width: 0; /* ESSENCIAL */

    box-sizing: border-box;

    padding: 10px;
    border-radius: 12px;
    border: none;
    outline: none;
}

.chat-input button {
    flex: 0 0 auto;

    width: 85px;
    max-width: 85px;

    box-sizing: border-box;

    padding: 10px 0;
    border-radius: 12px;
    border: none;

    cursor: pointer;

    background: rgba(0, 0, 0, 0.6);
    color: #fff;

    white-space: nowrap;
}

.chat-input button:hover {
    background: rgba(0, 0, 0, 0.85);
}


/* =========================================================
   BREAKING NEWS TICKER
========================================================= */
.breaking-ticker {
  margin-top: 18px;
  width: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden;
}

.breaking-pill {
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(255,0,60,0.95), rgba(255,180,0,0.95));
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
  white-space: nowrap;
}

.breaking-viewport {
  overflow: hidden;
  width: 100%;
}

.breaking-track {
  display: inline-flex;
  gap: 18px;
  white-space: nowrap;
  animation: breakingMove 55s linear infinite;
  font-size: 13px;
  opacity: 0.95;
}

.breaking-ticker:hover .breaking-track {
  animation-play-state: paused;
}

.breaking-track a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  opacity: 0.9;
}

.breaking-track a:hover {
  opacity: 1;
  text-decoration: underline;
}

.breaking-track .sep {
  opacity: 0.45;
}

@keyframes breakingMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===========================
   NOTÍCIAS
=========================== */
.news-section {
  margin-top: 22px;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* =====================================================
   FUNDO DO FOOTER APENAS NA NEWS-SECTION (SEM VAZAR)
===================================================== */
.news-section{
  position: relative;
  overflow: hidden;     /* impede sair pra fora */
  isolation: isolate;   /* impede efeitos “contaminarem” fora do card */
}

/* imagem por baixo do conteúdo, mas dentro do card */
.news-section::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--footer-frame-banner);
  background-size: cover;
  background-position: center;

  opacity: 0.55;        /* aumenta a cor real aqui */
  z-index: 0;
  pointer-events: none;
}

/* tudo do card fica acima da imagem */
.news-section > *{
  position: relative;
  z-index: 1;
}

.news-header h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 5px;
}

.news-header p {
  opacity: 0.85;
  margin-bottom: 18px;
}

.news-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.news-featured {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  padding: 18px;
  min-height: 180px;
  position: relative;
}

.news-featured-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.news-featured h3 {
  font-size: 20px;
  margin-bottom: 10px;

  /* 🔥 BORDA PRETA (legibilidade total) */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px  2px 8px rgba(0,0,0,0.85);
}


.news-featured p {
  opacity: 0.95;
  line-height: 1.45;

  /* 🔥 BORDA PRETA (subtítulo legível) */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px  2px 8px rgba(0,0,0,0.85);
}


.news-meta {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  font-size: 13px;
  opacity: 0.7;
}

.news-list {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  padding: 18px;
}

.news-list-title {
  font-size: 16px;
  margin-bottom: 12px;
}

/* =========================================
   NOTÍCIAS DA RESENHA – PADRÃO RÁDIO
========================================= */

.news-item{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 22px;
  cursor: pointer;

  background: linear-gradient(
      145deg,
      rgba(40,30,10,0.55),
      rgba(20,15,5,0.45)
  );

  border: 1px solid rgba(255,200,80,0.15);

  transition:
    transform 0.35s cubic-bezier(.22,.61,.36,1),
    background 0.35s ease,
    box-shadow 0.35s ease,
    border 0.35s ease;
}

.news-thumb{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,200,80,0.25);

  transition:
    transform 0.45s cubic-bezier(.22,.61,.36,1),
    filter 0.45s ease;
}

.news-item:hover{
  transform: translateY(-6px) scale(1.02);
  background: rgba(255,180,0,0.08);
  border: 1px solid rgba(255,180,0,0.45);

  box-shadow:
    0 10px 30px rgba(255,180,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.news-item:hover .news-thumb{
  transform: scale(1.08);
  filter: brightness(1.1) saturate(1.1);
}

.news-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.news-item span {
  font-size: 12px;
  opacity: 0.7;
}

/* ===========================
   STATUS BAR
=========================== */
.status-bar {
  margin-top: 18px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0px;
  font-size: 13px;
  opacity: 0.92;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 12px rgba(255,255,255,0.15);
}

.status-dot.green { background: #00ff95; box-shadow: 0 0 14px rgba(0,255,150,0.35); }
.status-dot.blue { background: #00aaff; box-shadow: 0 0 14px rgba(0,170,255,0.35); }
.status-dot.orange { background: #ffb100; box-shadow: 0 0 14px rgba(255,180,0,0.35); }
.status-dot.red { background: #ff3b3b; box-shadow: 0 0 14px rgba(255,60,60,0.35); }

/* ===========================
   RODAPÉ
=========================== */
.site-footer {
  margin-top: 40px;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 🔥 FRAME DO RODAPÉ IGUAL AO TOPO */
.footer-frame{
  width: 100%;
  height: auto;
  border-radius: 20px;

  background: #000;
  background-image: var(--footer-frame-banner);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);

  margin: 20px auto 25px;
  overflow: hidden;

  padding: 12px 12px;
}

/* 🔥 conteúdo dentro do frame */
.footer-frame-inner{
  display: grid;

  /* 6 blocos viram 3 colunas x 2 linhas */
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;

  background: rgba(0,0,0,0.62);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;

  padding: 18px 18px;
  backdrop-filter: blur(8px);
}

.footer-map-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
  text-shadow: 0 4px 14px rgba(0,0,0,0.75);
}

.footer-map-links a{
  display: block;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 13px;
}

.footer-map-links a:hover{
  opacity: 1;
  text-decoration: underline;
}

.footer-frame .footer-legal{
  opacity: 0.9;
  font-size: 13px;
  line-height: 1.4;
}

.footer-brand-col{
  padding-right: 10px;
}

.footer-bottom-inline{
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 12px;

  border-top: 1px solid rgba(255,255,255,0.10);

  text-align: center;
  font-size: 13px;
  opacity: 0.8;
}

/* ===========================
   RESPONSIVO
=========================== */
@media (max-width: 950px) {
  .container { padding: 0 18px; }

  .top-banner-carousel { height: 250px; }

  .banner-text { width: 85%; top: 60%; }
  .banner-text h3 { font-size: 20px; }

  .top-frame{
    height: 80px;
    border-radius: 18px;
    padding: 12px 14px;
  }

  .top-frame-logo{
    height: 54px;
    border-radius: 12px;
  }

  .main-content { grid-template-columns: 1fr; }

  .news-grid { grid-template-columns: 1fr; }

  .footer-frame{
    border-radius: 18px;
    padding: 18px 16px;
  }

  .footer-frame-inner{
    grid-template-columns: 1fr;
    border-radius: 16px;
  }
}

/* =========================================================
   NOTÍCIAS DA RESENHA - IMAGENS
========================================================= */
.news-featured{
  position: relative;
  overflow: hidden;
}

#featuredImg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transform: scale(1.02);
  z-index: 0;
}

.news-featured::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.75)
  );
  z-index: 1;
}

.news-featured *{
  position: relative;
  z-index: 2;
}

.news-item{
  display:flex;
  gap:12px;
  align-items:center;
}

.news-thumb{
  width:52px;
  height:52px;
  border-radius:14px;
  background:#000;
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.news-item .info{
  flex:1;
  min-width:0;
}

.news-item strong{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-item .mini{
  opacity:.75;
  font-size:13px;
  margin-top:4px;
}

.news-item{
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}

.news-item:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.04);
}
/* =========================
   ESTILO GLOBAL (ORIGINAL)
   ========================= */

/* (todo o seu CSS original continua aqui exatamente igual) */
/* ↓↓↓ NÃO REMOVI NADA DO SEU CSS ↓↓↓ */

/* =========================
   BANNER PRINCIPAL – AJUSTES
   ========================= */

.top-banner-carousel {
  position: relative; /* já existia, mantido */
  transition: transform .6s ease, box-shadow .6s ease, filter .6s ease;
}

.top-banner-carousel:hover {
  transform: scale(1.008);
  filter: brightness(1.04);
  box-shadow: 0 12px 35px rgba(255,255,255,0.10);
}

/* =========================
   FLOCO DE NEVE – SOBRE O BANNER
   ========================= */

.banner-snow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;

  /* 🔥 força acima de imagens/vídeos */
  z-index: 999;
}

.banner-snow span {
  position: absolute;
  top: -10px;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  filter: blur(0.4px);
  animation: snow-fall linear infinite;
}

@keyframes snow-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(120%); }
}
/* ===============================
   NEWS FEATURED – EFEITO TIPO BANNER
=============================== */

.news-featured {
  position: relative;
  overflow: hidden;

  /* efeito base */
  transform: scale(1);
  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease,
    filter 0.6s ease;
}

/* camada virtual da imagem (clone visual) */
.news-featured::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: inherit; /* 🔥 pega o mesmo background */
  background-size: cover;
  background-position: center;

  transform: scale(1);
  transition: transform 0.6s ease;

  z-index: 0;
}

/* gradiente por cima (mantém legibilidade) */
.news-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.75)
  );
  z-index: 1;
}

/* conteúdo sempre acima */
.news-featured * {
  position: relative;
  z-index: 2;
}

/* HOVER – efeito igual ao banner */
.news-featured:hover {
  filter: brightness(1.05);
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
}

.news-featured:hover::before {
  transform: scale(1.06); /* zoom suave */
}
/* ===============================
   NEWS FEATURED – MAIS CLARA + HOVER FORTE
=============================== */

.news-featured {
  position: relative;
  overflow: hidden;

  /* deixa a imagem mais clara por padrão */
  filter: brightness(1.15) contrast(1.05);

  transition:
    filter 0.6s ease,
    box-shadow 0.6s ease;
}

/* camada da imagem */
.news-featured::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: inherit;
  background-size: cover;
  background-position: center;

  transform: scale(1);
  transition:
    transform 0.6s ease,
    filter 0.6s ease;

  /* imagem clara por padrão */
  filter: brightness(1.1) contrast(1.05);

  z-index: 0;
}

/* gradiente MAIS SUAVE (menos escuro) */
.news-featured::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.45)
  );

  z-index: 1;
}

/* conteúdo acima */
.news-featured * {
  position: relative;
  z-index: 2;
}

/* 🔥 HOVER – CLAREIA AO MÁXIMO */
.news-featured:hover {
  filter: brightness(1.35) contrast(1.1);
  box-shadow: 0 22px 55px rgba(0,0,0,0.6);
}

.news-featured:hover::before {
  transform: scale(1.08);
  filter: brightness(1.4) contrast(1.1);
}
/* ❄️ Flocos de neve — Notícias da Resenha */
.news-featured-photo {
  position: relative;
  overflow: hidden;
}

.news-featured-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;

  background-image:
    radial-gradient(2.5px 2.5px at 5% 10%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 10% 30%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(3px 3px at 15% 20%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(2.2px 2.2px at 20% 45%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(2.8px 2.8px at 25% 65%, rgba(255,255,255,.9) 50%, transparent 52%),

    radial-gradient(2px 2px at 30% 15%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(3px 3px at 35% 35%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2.4px 2.4px at 40% 55%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(2.6px 2.6px at 45% 75%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 50% 25%, rgba(255,255,255,.75) 50%, transparent 52%),

    radial-gradient(3px 3px at 55% 10%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2.3px 2.3px at 60% 30%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(2.7px 2.7px at 65% 50%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 70% 70%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(3px 3px at 75% 85%, rgba(255,255,255,.9) 50%, transparent 52%),

    radial-gradient(2.4px 2.4px at 80% 20%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(2.6px 2.6px at 85% 40%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(3px 3px at 95% 80%, rgba(255,255,255,.9) 50%, transparent 52%);

  animation: snow-fall-news 6s linear infinite;
  transition: opacity .4s ease;
}




.news-featured-photo:hover::after {
  opacity: 1;
}

@keyframes snow-fall-news {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 120px;
  }
}
/* === BANNER CARROSSEL – CAMADA BASE === */
.top-banner-carousel {
  position: relative;
  overflow: hidden;
}

/* garante imagem e vídeo abaixo dos flocos */
.top-banner-carousel img,
.top-banner-carousel video {
  position: relative;
  z-index: 1;
}

/* === FLOCO DE NEVE NO BANNER === */
.top-banner-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;

  background-image:
    radial-gradient(2.5px 2.5px at 5% 10%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 15% 30%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(3px 3px at 25% 20%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(2.2px 2.2px at 35% 45%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(2.8px 2.8px at 45% 65%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2.4px 2.4px at 55% 15%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(3px 3px at 65% 35%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 75% 55%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(2.6px 2.6px at 85% 75%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(3px 3px at 95% 85%, rgba(255,255,255,.9) 50%, transparent 52%);

  animation: snow-fall-banner 6s linear infinite;
  transition: opacity .4s ease;
}

/* ativa no hover */
.top-banner-carousel:hover::after {
  opacity: 1;
}

/* animação */
@keyframes snow-fall-banner {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}
/* === AJUSTE FINAL: capa ocupa ~50% do frame === */
.news-section .news-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 50% / 50% */
  gap: 18px !important;
  align-items: stretch;
}

/* garante que a capa não estique nem encolha demais */
.news-section .news-featured{
  width: 100%;
  min-width: 0;
}

/* lista respeita o espaço */
.news-section .news-list{
  min-width: 0;
}

/* Mobile continua empilhado */
@media (max-width: 950px){
  .news-section .news-grid{
    grid-template-columns: 1fr !important;
  }
}
/* 🔥 Remove nome do canal abaixo do player */
.player-channel-name,
.channel-title,
#channelName {
    display: none !important;
}
/* =====================================
   PLAYER MODERNO (mantendo controls)
===================================== */

/* Painel inferior */
video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.65) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Remove fundo cinza chapado */
video::-webkit-media-controls-enclosure {
  background: transparent !important;
}

/* Tempo */
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  color: #fff !important;
  font-weight: 600;
}

/* Barra de progresso mais fina */
video::-webkit-media-controls-timeline {
  height: 4px !important;
  border-radius: 999px;
}

/* Volume */
video::-webkit-media-controls-volume-slider {
  height: 4px !important;
}

/* Ícones mais claros */
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button {
  filter: brightness(1.2);
}

/* Firefox */
video {
  accent-color: #ffffff;
}





/* =========================================================
   🔥 CARROSSEL PREMIUM (COMPACTO E ELEGANTE)
========================================================= */
.premium-carousel{
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: hidden;
}

.premium-track-wrapper{
  width: 100%;
  overflow: hidden;
}

.premium-track{
  display: flex;
  gap: 18px;
  align-items: center;
  width: max-content;
  animation: premiumScroll 65s linear infinite;
}

.premium-track:hover{
  animation-play-state: paused;
}

@keyframes premiumScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.premium-chip{
  flex: 0 0 auto;
  width: 130px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.premium-chip img{
  max-height: 46px;
  max-width: 90%;
  object-fit: contain;
  filter: brightness(.95) saturate(.95);
  transition: filter .25s ease, transform .25s ease;
}

.premium-chip:hover{
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255, 215, 0, .4);
  box-shadow: 0 16px 35px rgba(0,0,0,.35);
}

.premium-chip:hover img{
  filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 10px rgba(255,215,0,.4));
  transform: scale(1.05);
}


/* ===========================
   CHAT TWITCH STYLE (TVSUAVE)
=========================== */

.chat-box{
  display:flex;
  flex-direction:column;
}

.chat-mod{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  margin:8px 12px 0 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.08);
}

.mod-btn{
  cursor:pointer;
  border:none;
  border-radius:12px;
  padding:8px 12px;
  font-weight:800;
  font-size:13px;
  color:#fff;
  background:rgba(255,255,255,0.12);
}

.mod-btn:hover{
  background:rgba(255,255,255,0.18);
}

.mod-btn.danger{
  background:rgba(255,0,0,0.18);
  border:1px solid rgba(255,0,0,0.25);
}

.mod-hint{
  font-size:12px;
  opacity:0.8;
  margin-left:auto;
}

.chat-messages{
  padding:12px;
}

.chat-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:8px 8px;
  border-radius:12px;
}

.chat-line:hover{
  background:rgba(255,255,255,0.06);
}

.chat-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
  color:#fff;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.14);
}

.chat-body{
  flex:1;
  min-width:0;
}

.chat-meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.chat-badge{
  font-size:11px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.10);
}

.chat-name{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
}

.chat-time{
  font-size:11px;
  opacity:0.6;
}

.chat-text{
  margin-top:2px;
  font-size:14px;
  line-height:1.25;
  word-break:break-word;
  opacity:0.95;
}

.chat-line.deleted .chat-text{
  opacity:0.55;
  font-style:italic;
}

.chat-line.selected{
  outline:2px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.20);
}

/* ===== TÍTULO PREMIUM CAROUSEL ===== */

.premium-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    padding-left: 5px;
    letter-spacing: 0.5px;
	
}

.premium-icon {
    font-size: 9px;
    background: linear-gradient(135deg, #ffcc00, #ff8800);
    padding: 4px 7px;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.6);
}



/* ===============================
   🎧 RÁDIO DA RESENHA (1+4)
================================= */

.radio-carousel{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  height: 420px;
}

/* lista */
.radio-list{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.radio-item{
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
}

.radio-item img{
  width: 70px;
  height: 70px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.08);
}

.radio-mini-text h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.radio-mini-text p{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .8;
}

/* capa */
.radio-cover{
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.35);
}

.radio-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.radio-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78),
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.00)
  );
  pointer-events:none;
}

.radio-cover-overlay{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.radio-cover-title{
  font-size: 24px;
  font-weight: 900;
}

.radio-cover-desc{
  margin-top: 6px;
  font-size: 14px;
  opacity: .9;
}


/* ===============================
   🎬 YOUTUBE DENTRO DA CAPA (RÁDIO)
================================= */
.radio-youtube-wrap{
  position:absolute;
  inset:0;
  z-index:1; /* abaixo do overlay e acima da imagem */
  overflow:hidden;
  opacity:0;
  transform: scale(1.05); /* efeito cinema */
  transition: opacity .35s ease, transform .6s ease;
  pointer-events:none; /* por padrão: sem clique */
}

.radio-youtube-wrap iframe{
  width:100%;
  height:100%;
  border:0;
}

.radio-youtube-wrap.active{
  opacity:1;
}

.radio-cover.youtube-active .radio-youtube-wrap{
  pointer-events:none;
}

/* 🎛️ CONTROLES VISÍVEIS NO HOVER */
.radio-cover.youtube-active:hover .radio-youtube-wrap{
  pointer-events:auto; /* permite clicar nos controles */
}

/* Quando hover, deixa 100% interativo e remove leve blur do overlay */
.radio-cover.youtube-active:hover .radio-youtube-wrap{
  opacity:1;
}

/* garante que overlay e player fiquem acima */
.radio-cover-overlay,
.radio-player{
  z-index: 3;
}


/* ===============================
   🎛️ PLAYER DE RÁDIO (sobre a capa)
================================= */


.radio-player{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px; /* agora quase rente ao final */
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}


.radio-play{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.radio-player-info{
  flex: 1;
  min-width: 0;
}

.radio-player-now{
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-player-sub{
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-player-right{
  flex: 0 0 auto;
}

.radio-volume{
  width: 120px;
}

@media(max-width: 950px){
  .radio-carousel{
    grid-template-columns: 1fr;
    height: auto;
  }
  .radio-cover{
    height: 320px;
  }
}



/* ===============================
   🎧 TÍTULO RÁDIO DA RESENHA
================================= */

/* ==========================================
   🎧 Ajuste de alinhamento da Rádio
========================================== */

.radio-section-header {
  padding-left: 24px; /* Alinha com a margem interna da capa */
}

.radio-section-title {
  font-size: 24px;   /* novo tamanho */
  font-weight: 900;
  margin-bottom: 5px;
}

.radio-section-subtitle {
  font-size: 16px;   /* novo tamanho */
  opacity: 0.8;
}
/* ==========================================
   🎧 Alinhar header com a lista de rádios
========================================== */

/* FORÇA tamanho correto do título da Rádio */
#radioSectionTitle {
  font-size: 22px !important;
  font-weight: 700;
}


.radio-section-header {
  padding-left: 32px; /* ajuste fino */
  margin: 25px 0;
}

.radio-section-title,
.radio-section-subtitle {
  margin: 0;
}




/* ==========================================
   🎧 RADIO PREMIUM UPGRADE
========================================== */

.radio-carousel{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  height: 460px;
}

/* LISTA COM SCROLL */
.radio-list{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Scrollbar Premium */
.radio-list::-webkit-scrollbar{
  width: 10px;
}

.radio-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}

.radio-list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#ffaa00,#ff7a00);
  border-radius: 10px;
}

.radio-list::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#ffbf40,#ff8f1f);
}

/* MINIATURA PREMIUM */
.radio-item{
  flex: 0 0 95px;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.06);
  transition: all .25s ease;
}

.radio-item:hover{
  transform: translateX(6px);
  border: 1px solid rgba(255,170,0,0.5);
}

.radio-item.active{
  border: 1px solid #ffaa00;
  box-shadow: 0 0 18px rgba(255,170,0,0.3);
}

.radio-item img{
  width: 78px;
  height: 78px;
  border-radius: 18px;
  object-fit: cover;
}

.radio-mini-text h3{
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

.radio-mini-text p{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .85;
}

/* CAPA PREMIUM */
.radio-cover{
  position: relative;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.35);
}

.radio-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.radio-cover:hover img{
  transform: scale(1.04);
}



/* ============================================
   🎧 RADIO ULTRA PREMIUM - TVSUAVE EDITION
   Dourado / Bronze - Delicado e Rebuscado
============================================ */

.radio-carousel{
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  height: 400px; /* menor e mais delicado */
}

/* LISTA */
.radio-list{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Scroll elegante bronze */
.radio-list::-webkit-scrollbar{
  width: 12px;
}

.radio-list::-webkit-scrollbar-track{
  background: rgba(255,215,0,0.05);
  border-radius: 12px;
}

.radio-list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#c28a00,#8a5a00);
  border-radius: 12px;
}

.radio-list::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#e6b800,#a66a00);
}

/* MINIATURAS MAIS DELICADAS */
.radio-item{
  flex: 0 0 88px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 26px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(40,30,10,0.65), rgba(20,15,5,0.55));
  border: 1px solid rgba(255,200,80,0.15);
  transition: all .35s ease;
}

.radio-item:hover{
  transform: translateX(6px);
  border: 1px solid rgba(255,200,80,0.45);
  box-shadow: 0 0 25px rgba(255,180,40,0.15);
}

.radio-item.active{
  border: 1px solid #d4a017;
  box-shadow: 0 0 30px rgba(212,160,23,0.35);
}

.radio-item img{
  width: 60px; /* ícones menores */
  height: 60px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,200,80,0.25);
}

.radio-mini-text h3{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.radio-mini-text p{
  margin: 6px 0 0;
  font-size: 12px;
  opacity: .85;
}

/* CAPA MENOR E MAIS REBUSCADA */
.radio-cover{
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255,200,80,0.15);
  background: radial-gradient(circle at top left, rgba(255,180,40,0.08), transparent 60%);
}

.radio-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .6s ease;
}

.radio-cover:hover img{
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Moldura interna elegante */
.radio-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.65);
  pointer-events: none;
}

/* Player delicado no rodapé */
.radio-player{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(0,0,0,0.75), rgba(30,20,5,0.75));
  border: 1px solid rgba(255,200,80,0.2);
  backdrop-filter: blur(12px);
}

.radio-play{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,200,80,0.4);
  background: linear-gradient(180deg,#c28a00,#8a5a00);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease;
}

.radio-play:hover{
  transform: scale(1.08);
}

.radio-player-now{
  font-weight: 900;
  font-size: 13px;
}

.radio-player-sub{
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.85;
}

.radio-volume{
  width: 110px;
}

@media(max-width: 950px){
  .radio-carousel{
    grid-template-columns: 1fr;
    height: auto;
  }
  .radio-cover{
    height: 300px;
  }
}



/* ============================================
   🎧 RADIO FRAME UPGRADE - BORDAS + GLASS
============================================ */

/* Moldura geral do carrossel */
#radioResenha{
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 26px;
    border-radius: 38px;
    border: 1px solid rgba(255,190,60,0.25);

    background: transparent; /* remove qualquer interferência */

}

#radioResenha::before{
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--footer-frame-banner);
    background-size: cover;
    background-position: center;

    opacity: 0.75; /* AQUI está o segredo */
    filter: saturate(1.3) contrast(1.1);

    z-index: 0;
    pointer-events: none;
}
#radioResenha > *{
    position: relative;
    z-index: 1;
}

/* Borda individual lista */
.radio-list{
  border-radius: 30px;
  border: 1px solid rgba(255,190,60,0.15);
  padding: 20px;
  background: rgba(0,0,0,0.25);
}

/* Scroll extremamente transparente */
.radio-list::-webkit-scrollbar{
  width: 12px;
}

.radio-list::-webkit-scrollbar-track{
  background: transparent;
}

.radio-list::-webkit-scrollbar-thumb{
  background: rgba(255,190,60,0.25);
  border-radius: 12px;
}

.radio-list::-webkit-scrollbar-thumb:hover{
  background: rgba(255,190,60,0.45);
}

/* Borda elegante na capa */
.radio-cover{
  border-radius: 36px;
  border: 1px solid rgba(255,190,60,0.2);
  box-shadow:
     inset 0 0 60px rgba(0,0,0,0.6),
     0 0 35px rgba(255,160,20,0.08);
}

/* Player MUITO transparente */
.radio-player{
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(255,200,80,0.15);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 25px rgba(255,170,40,0.1);
}

/* Botão ainda mais delicado */
.radio-play{
  background: linear-gradient(180deg,#c28a00,#8a5a00);
  opacity: 0.9;
}

/* Volume mais clean */
.radio-volume{
  opacity: 0.75;
}



/* ============================================
   AJUSTE PARA EXIBIR 4 MINIATURAS FIXAS
============================================ */

.radio-carousel{
  height: 420px; /* altura ajustada */
}

.radio-list{
  gap: 14px;
  padding: 18px;
}

/* Cada item menor para caber 4 */
.radio-item{
  flex: 0 0 78px; /* altura reduzida */
  padding: 12px 14px;
}

.radio-item img{
  width: 54px;
  height: 54px;
}

.radio-mini-text h3{
  font-size: 14px;
}

.radio-mini-text p{
  font-size: 11px;
}



/* ============================================
   TRANSPARÊNCIA AVANÇADA (AJUSTE FINO)
============================================ */

/* Scroll quase invisível */
.radio-list::-webkit-scrollbar-track{
  background: transparent !important;
}

.radio-list::-webkit-scrollbar-thumb{
  background: rgba(255,190,60,0.12) !important;
}

.radio-list::-webkit-scrollbar-thumb:hover{
  background: rgba(255,190,60,0.22) !important;
}

/* Player com 20% opacidade */
.radio-player{
  background: rgba(0,0,0,0.20) !important; /* 20% */
  border: 1px solid rgba(255,200,80,0.12) !important;
  backdrop-filter: blur(22px);
  box-shadow: 0 0 20px rgba(255,170,40,0.06);
}

/* Volume ainda mais suave */
.radio-volume{
  opacity: 0.65;
}



/* ============================================
   AJUSTE HEADER INLINE + PLAYER 30%
============================================ */

/* Título e subtítulo lado a lado */
.radio-header-inline{
  display: flex;
  align-items: center;
  gap: 12px;
}

.radio-title{
  font-size: 14px !important;
  margin: 0;
}

.radio-subtitle{
  font-size: 10px !important;
  margin: 0;
  opacity: 0.8;
}

/* Player 30% opacidade */
.radio-player{
  background: rgba(0,0,0,0.30) !important;
  backdrop-filter: blur(24px);
}



/* ============================================
   FIX DEFINITIVO - HEADER RÁDIO DA RESENHA
   (Título + subtítulo lado a lado)
============================================ */

.radio-section-header{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-section-title{
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.1;
}

.radio-section-subtitle{
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.1;
  opacity: 0.85;
}

/* Player com 30% opacidade (mais visível) */
.radio-player{
  background: rgba(0,0,0,0.30) !important;
}


/* 🔥 Rádio da Resenha: capa em vídeo */
.radio-cover video{width:100%;height:100%;object-fit:cover;display:block;}


/* ================================================= */
/* ✨ HOVER PREMIUM RADIO ITEM */
/* ================================================= */

.radio-item {
    transition: 
        transform 0.35s cubic-bezier(.22,.61,.36,1),
        background 0.35s ease,
        box-shadow 0.35s ease,
        border 0.35s ease;
}

.radio-item img {
    transition: 
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        filter 0.45s ease;
}

.radio-item:hover {
    transform: translateY(-6px) scale(1.02);
    background: rgba(255, 180, 0, 0.08);
    border: 1px solid rgba(255, 180, 0, 0.4);
    box-shadow: 
        0 10px 30px rgba(255, 180, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.radio-item:hover img {
    transform: scale(1.08);
    filter: brightness(1.1) saturate(1.1);
}

/* ================================================= */
/* 🎧 RADIO PLAYER PREMIUM */
/* ================================================= */

.radio-player {
    background: linear-gradient(
        135deg,
        rgba(20,20,20,0.85),
        rgba(40,40,40,0.75)
    );

    border: 1px solid rgba(255, 180, 0, 0.3);
    backdrop-filter: blur(12px);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.6),
        0 0 20px rgba(255,180,0,0.15);
    
    transition: all 0.35s ease;
}

.radio-player:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 40px rgba(0,0,0,0.7),
        0 0 30px rgba(255,180,0,0.3);
}



/* =========================================================
   🎧 RÁDIO DA RESENHA - CROSSFADE REAL (SEM PISCAR)
========================================================= */
.radio-cover-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  will-change: opacity;
}

.radio-cover-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* 🎬 RÁDIO - CROSSFADE (SEM PISCAR) */
.radio-cover{ position: relative; }
.radio-cover-fade{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
  z-index: 1;
}
/* overlays/player acima */
.radio-cover-overlay{ position: relative; z-index: 3; }
.radio-player{ position: absolute; z-index: 4; }
#radioMainCover{ position: relative; z-index: 0; }
.top-banner-carousel {
  position: relative;
}

.weather-box {
  position: absolute;
  top: 15px;
  right: 25px;
  z-index: 50;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 30px;
}
/* =========================================
   CLIMA NO BANNER HA HA HA (TOPO)
========================================= */

.top-frame {
    position: relative; /* necessário para posicionamento absoluto */
}

/* Caixa do clima */
.weather-box {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0.55);
    color: #fff;

    padding: 6px 14px;
    border-radius: 20px;

    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    gap: 6px;

    backdrop-filter: blur(6px);

    z-index: 5;
}

/* Responsivo */
@media (max-width: 768px) {
    .weather-box {
        font-size: 12px;
        padding: 4px 10px;
        right: 10px;
    }
}
/* ================================
   WEATHER PREMIUM DEFINITIVO
================================ */

.top-frame {
    position: relative !important;
}

.top-frame .weather-box {
    position: absolute !important;
    right: 25px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.75),
        rgba(40,40,40,0.65)
    ) !important;

    padding: 8px 18px !important;
    border-radius: 40px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(12px) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.6),
        0 0 20px rgba(255,255,255,0.05) !important;

    z-index: 9999 !important;
}
/* ============================= */
/* SEPARAÇÃO CANAIS MAIS POPULARES */
/* ============================= */

.premium-carousel {
    margin-top: 60px;
    padding: 30px 25px;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
}
/* ============================= */
/* 💹 TICKER FINANÇAS PREMIUM */
/* ============================= */

.finance-ticker {
    max-width: 1200px;
    margin: 15px auto;
    width: calc(100% - 40px);

    padding: 14px 0;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.18);
backdrop-filter: blur(12px);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.4),
        inset 0 0 0 1px rgba(255,255,255,0.05);
}


.finance-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #00ff9d;
    text-transform: uppercase;
}

.finance-track-wrapper {
    overflow: hidden;
    margin-left: 170px;
}

.finance-track {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: financeScroll 25s linear infinite;
}

.finance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
}

.finance-up {
    color: #00ff7a;
}

.finance-down {
    color: #ff4d4d;
}

@keyframes financeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.radio-cover{
    overflow: hidden;
    position: relative;
}
.radio-cover-overlay{
    position: absolute;
    left: 18px;
    right: 18px;
    top: 18px;
    z-index: 5;
}

.radio-player {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  top: auto !important;

  z-index: 20;
}

.radio-cover-overlay{
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  z-index: 5;
}





/* =====================================================
   🎬 YouTube Visual Only - Controlled by Radio Player
===================================================== */
.radio-cover iframe,
#radioYoutubeWrap iframe {
    pointer-events: none !important;
}



/* =========================================================
   🎬 Rádio YouTube: visual-only (controle pelo player da rádio)
   - impede interação direta com o iframe do YouTube
========================================================= */
#radioYoutubeWrap,
#radioYoutubeWrap iframe{
  pointer-events: none !important;
}
/* ===== HEADER RÁDIO DENTRO DO BLOCO ===== */

.radio-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* faz o título ocupar largura total */
/* ===== HEADER DA RÁDIO (TÍTULO + SUBTÍTULO EM BAIXO) ===== */

.radio-section-header{
  grid-column: 1 / -1;
  margin-bottom: 20px;

  display: flex;
  flex-direction: column; /* 👈 isso força ficar em baixo */
  gap: 6px;
}

.radio-section-title{
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0;
}

.radio-section-subtitle{
   font-size: 20px !important;
   opacity: 0.85;
   color: rgba(255,255,255,0.85);
   margin: 0;
}


.radio-carousel{
  min-height: 560px;
}

.radio-list{
  max-height: 420px;
  overflow-y: auto;
}
.radio-carousel{
   margin-bottom: 20px !important;
}

.popular-channels-section{
   margin-top: 10px !important;
}
/* deixa o container da rádio mais transparente */
#radioResenha{
  background: var(--card);
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: 22px;
}

/* =====================================================
   FUNDO DO FOOTER NA RÁDIO (SEM VAZAR)
===================================================== */

#radioResenha{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#radioResenha::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--footer-frame-banner);
  background-size: cover;
  background-position: center;

  opacity: 0.28; /* ajuste aqui */
  z-index: 0;
  pointer-events: none;
}

#radioResenha > *{
  position: relative;
  z-index: 1;
}


/* ===== CORREÇÃO DEFINITIVA: espaço entre "Canais Mais Populares" e footer ===== */

main.container{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* se tiver alguma section sobrando no final */
main.container > section:last-of-type{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* remove espaçamento do próprio footer */
footer,
.site-footer,
#footer{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ================================
   FIX: Chat mesma altura do vídeo
================================ */

.main-content {
  align-items: stretch;
}

.player-box,
.chat-box {
  height: 420px; /* mesma altura do vídeo */
}

.player-box video,
.yt-player {
  height: 100%;
}

.chat-messages {
  overflow-y: auto;
}
/* ===== FIX DEFINITIVO BOTÃO ENVIAR ===== */

/* ===== CORREÇÃO REAL DO INPUT DO CHAT ===== */

.chat-box{
  overflow: hidden;
}

/* ===== LAYOUT LIMPO DO INPUT DO CHAT ===== */

/* ===== CORREÇÃO DEFINITIVA LAYOUT INPUT ===== */

/* ===== INPUT CHAT DEFINITIVO LIMPO ===== */

.chat-input {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.chat-input input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.chat-input button {
    width: 85px;      /* largura fixa controlada */
    flex-shrink: 0;
    box-sizing: border-box;
}


/* =========================================================
   🔥 FIX FINAL - CHAT NOVO (EMBED) NO LAYOUT DO SITE
   Objetivo:
   - Chat ocupar 100% da altura do card
   - Não estourar largura
   - Não criar scroll duplo
========================================================= */

.chat-box{
  overflow: hidden; /* impede o chat vazar do card */
}

.tvsuave-chat-embed{
  flex: 1 1 auto;
  min-height: 0;   /* ESSENCIAL para flex + scroll interno */
  width: 100%;
  display: flex;
  overflow: hidden;
}

/* o chat novo usa .app como wrapper */
.tvsuave-chat-embed .app{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
}

/* remove margens externas do chat para não quebrar o layout */
.tvsuave-chat-embed .app,
.tvsuave-chat-embed .phone-frame{
  margin: 0 !important;
}

/* se o chat tiver container interno */
.tvsuave-chat-embed .phone-frame{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

/* garante que o fundo do chat não "vaze" */
.tvsuave-chat-embed *{
  box-sizing: border-box;
}

/* Mobile: chat não pode ficar gigante */
@media (max-width: 950px){
  .chat-box{
    height: 520px; /* mais confortável no mobile */
  }
}

.chat-box{
  position: relative;
}

.chat-embed-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
  z-index: 20;
}
/* ===== CHAT EMBED FINAL (CORRIGIDO) =====
   Objetivo:
   - Chat preencher 100% do card (sem “margem falsa” no topo/rodapé)
   - Mesma altura do player (grid esticando corretamente)
   - Iframe ocupando 100% (sem borda/margem/inline-gap)
========================================================= */

/* GRID: player + chat na mesma altura */
.main-content{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: stretch; /* 🔥 essencial: estica o chat até a altura do player */
}

/* Player usa aspect-ratio; a altura do grid vem dele */
.player-box{
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
}

/* vídeo/iframe do player */
.player-box video,
.player-box iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chat ocupa 100% da célula do grid */
.chat-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px; /* garante arredondamento consistente */
}

/* wrapper do iframe: precisa poder encolher e crescer */
.chat-embed-wrapper{
  flex: 1 1 auto;
  min-height: 0;     /* 🔥 evita o “gap” e scroll duplo */
  width: 100%;
  display: flex;     /* iframe vira flex-item e preenche */
  overflow: hidden;
}

/* iframe preenchendo tudo (sem espaço de elemento inline) */
.chat-iframe{
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;      /* 🔥 remove gap de inline iframe */
  border-radius: inherit; /* acompanha o arredondamento do card */
}

/* Responsivo: empilha e dá conforto no chat */
@media (max-width: 950px){
  .main-content{
    grid-template-columns: 1fr;
  }
  .chat-box{
    height: 520px; /* confortável no mobile */
  }
}



/* =====================================================
   🔥 PLAYER + CHAT WRAPPER AJUSTE FINAL
   - Remove corte do vídeo (logo SBT 100% visível)
   - Fundo igual ao container Notícias da Resenha
   - Remove tom azulado
===================================================== */

.main-content{
    margin-top: 24px;
    padding: 8px; /* margem mínima para não cortar vídeo */
    border-radius: 18px;

    /* mesma cor do .news-section */
    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.30);

    align-items: stretch;
}

/* =====================================================
   FUNDO DO FOOTER NO PLAYER + CHAT (SEM VAZAR)
===================================================== */

.main-content{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.main-content::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--footer-frame-banner);
  background-size: cover;
  background-position: center;

  opacity: 0.55; /* 🔥 mais forte */
  filter: saturate(1.2) contrast(1.1); /* 🔥 cores mais vivas */

  z-index: 0;
  pointer-events: none;
}

.main-content > *{
  position: relative;
  z-index: 1;
}

/* Cards internos mais limpos */
.player-box,
.chat-box{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.25);
    overflow: hidden;
    height: 100%;
}

/* garante que o vídeo não seja comprimido */
.player-box video,
.player-box iframe{
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 evita cortar logo do canal */
}


/* ===== FIX: CHAT preencher 100% do container (remove folga) ===== */
.chat-box{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}
.chat-embed-wrapper{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
}
.chat-iframe,
.chat-box iframe{
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  display: block !important;
}



/* =========================================================
   DESATIVAR FUNDOS PADRÃO (IMAGENS) DOS CONTAINERS
   - Rádio da Resenha (#radioResenha::before)
   - Notícias (.news-section::before)
   - Player+Chat (.main-content::before)
   Agora só aparece imagem se for selecionada no painel (inline style)
   ========================================================= */
#radioResenha::before,
.news-section::before,
.main-content::before{
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* Overlay do sistema (só é inserido via PHP quando ativo) */
.bg-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* garante que o conteúdo fique acima do overlay quando ele existir */
.main-content,
.news-section,
#radioResenha{
  position: relative;
  isolation: isolate;
}
.main-content > *,
.news-section > *,
#radioResenha > *{
  position: relative;
  z-index: 1;
}
#radioResenha {
    background: rgba(0, 0, 0, 0.20) !important;
}.premium-carousel {
    background: rgba(0, 0, 0, 0.55);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}