/* ============================================================
   LZ-COMPONENT: HOME / LZ-C12-MEDIA-HUB
   v1.7.0 — Botões "Abrir tela cheia / Abrir Estação MaisQTV / Ouvir
   agora" no mobile deixaram de ser "faixas" esticadas (width:100%)
   e voltaram a ter tamanho normal de botão, centralizados
   (max-width: 260px + margin: 0 auto). Seção de rádio também passou
   a empilhar/centralizar no mobile igual as outras duas.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ---------- Revista Digital ---------- */
.lz-revista { font-family: 'Poppins', sans-serif; background: #ffffff; padding: 8px 24px 48px; }

.lz-revista__faixa {
  max-width: 1200px;
  margin: 0 auto 32px;
  background: #001b3a;
  color: #ffffff;
  border-radius: 16px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.lz-revista__faixa strong { display: block; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.lz-revista__faixa p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }

.lz-revista__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.lz-revista__frame {
  width: 300px;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.22);
  flex-shrink: 0;
  background: #eef1f0;
}
.lz-revista__frame iframe { width: 100%; height: 100%; border: 0; }

.lz-revista__texto { max-width: 380px; }
.lz-revista__nome { display: block; font-size: 26px; font-weight: 800; color: #003c96; line-height: 1.2; margin-bottom: 14px; }
.lz-revista__texto p { font-size: 14px; line-height: 1.6; color: #174078; margin: 0 0 20px; }
.lz-revista__botao {
  display: inline-flex; align-items: center; gap: 8px;
  background: #20cf55; color: #ffffff; font-weight: 700; font-size: 14px;
  padding: 13px 26px; border-radius: 30px; text-decoration: none; transition: transform 0.2s;
}
.lz-revista__botao:hover { transform: scale(1.04); }

/* ---------- Estação MaisQTV ---------- */
.lz-webtv { font-family: 'Poppins', sans-serif; background: #f3f6fb; padding: 40px 24px; }

.lz-webtv__faixa {
  max-width: 1200px;
  margin: 0 auto 32px;
  background: #001b36;
  color: #ffffff;
  border-radius: 16px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.lz-webtv__faixa strong { display: block; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.lz-webtv__faixa p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }

.lz-webtv__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.lz-webtv__player {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
/* Redimensiona o widget da JMV por fora, sem mexer na posição interna
   dele (o script pseudoPip.min.js espera a estrutura original — nada
   de position:absolute em cima do iframe, senão ele se confunde e
   chega a duplicar o player). A caixa de fora (.lz-webtv__player) e'
   quem define a proporcao 16:9 real; o iframe so preenche 100% dessa
   caixa (sem esticar o video: se o conteudo da JMV for vertical, ele
   aparece com faixas pretas dos lados/topo, do jeito que o proprio
   player da JMV desenha por dentro — a gente so' controla o tamanho
   da janela, nao o conteudo). */
#jmvplayer--pseudo_pip { width: 100%; height: 100%; }
#jmvplayer--pseudo_pip iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

.lz-webtv__texto { max-width: 380px; }
.lz-webtv__nome { display: block; color: #003b91; font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.lz-webtv__texto p { color: #003078; font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.lz-webtv__botao {
  display: inline-flex; align-items: center; gap: 8px;
  background: #00d45a; color: #ffffff; font-weight: 700; font-size: 14px;
  padding: 13px 24px; border-radius: 30px; text-decoration: none; transition: transform 0.2s;
}
.lz-webtv__botao:hover { transform: scale(1.04); }

/* ---------- Rádio Estação MaisQTV (player Brascast) ---------- */
.lz-radio { font-family: 'Poppins', sans-serif; background: #ffffff; padding: 40px 24px 48px; }

.lz-radio__faixa {
  max-width: 1200px;
  margin: 0 auto 32px;
  background: #001b3a;
  color: #ffffff;
  border-radius: 16px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.lz-radio__faixa strong { display: block; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.lz-radio__faixa p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }

.lz-radio__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

/* O player-mini da Brascast nasce com tamanho fixo (250x165) — não dá
   pra só esticar via width/height (o widget interno é feito nesse
   tamanho e distorce/perde as áreas de clique). Em vez disso, o
   iframe fica no tamanho nativo e o script.js aplica um "zoom"
   proporcional (transform: scale) até preencher a caixa de fora,
   sem esticar nada — cresce igual nos dois eixos. */
.lz-radio__player-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.lz-radio__player {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 250 / 165;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.22);
  flex-shrink: 0;
  background: #000000;
}
.lz-radio__player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 165px;
  border: 0;
  transform-origin: top left;
}
.lz-radio__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(0,0,0,0.6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: 20px;
  pointer-events: none;
}
.lz-radio__dica {
  margin: 0;
  font-size: 13px;
  color: #174078;
  text-align: center;
  max-width: 340px;
}
.lz-radio__dica strong { color: #003c96; }

.lz-radio__texto { max-width: 380px; }
.lz-radio__nome { display: block; font-size: 26px; font-weight: 800; color: #003c96; line-height: 1.2; margin-bottom: 14px; }
.lz-radio__texto p { font-size: 14px; line-height: 1.6; color: #174078; margin: 0 0 20px; }
.lz-radio__botao {
  display: inline-flex; align-items: center; gap: 8px;
  background: #20cf55; color: #ffffff; font-weight: 700; font-size: 14px;
  padding: 13px 26px; border-radius: 30px; text-decoration: none; transition: transform 0.2s;
}
.lz-radio__botao:hover { transform: scale(1.04); }

@media (max-width: 760px) {
  .lz-revista { padding: 8px 16px 40px; }
  .lz-revista__faixa, .lz-webtv__faixa { flex-direction: column; text-align: center; padding: 22px; }
  .lz-revista__inner, .lz-webtv__inner, .lz-radio__inner { flex-direction: column; text-align: center; }
  .lz-revista__frame { width: 100%; height: auto; aspect-ratio: 5 / 7; max-width: none; }
  .lz-webtv__player { width: 100%; }
  .lz-revista__nome, .lz-webtv__nome, .lz-radio__nome { font-size: 21px; }
  .lz-revista__botao, .lz-webtv__botao, .lz-radio__botao { width: auto; max-width: 260px; margin: 0 auto; justify-content: center; }
}