/* ==========================================================================
   Streamings — landing (/streamings/) e página de app (/streamings/{slug}/)
   e páginas de serviço genéricas.
   ========================================================================== */

/* ---- Banda de topo das páginas internas (breadcrumb + título + botões, centralizado) ---- */
.page-hero { padding-top: 0; }
.page-hero__band { width: min(1820px, 96vw); margin-inline: auto; background: #f3f3f5; border-radius: var(--in-radius-lg, 24px); padding: 46px 20px; text-align: center; }
.page-hero__crumb { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--in-muted); margin-bottom: 12px; }
.page-hero__crumb a { color: var(--in-muted); text-decoration: none; }
.page-hero__crumb a:hover { color: var(--in-red); }
.page-hero__crumb i { font-style: normal; opacity: .45; }
.page-hero__crumb span { color: var(--in-red); font-weight: 600; }
.page-hero__title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--in-red); margin: 0 0 8px; }
.page-hero__sub { color: var(--in-muted); margin: 0 auto 22px; max-width: 640px; }
.page-hero__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ---- Variação com imagem: MESMAS cores do hero claro, mas com a foto à
       direita e o texto à esquerda. (O hero escuro é só da empresarial.)
       Ativa quando a página tem imagem destacada; sem imagem, segue
       centralizado (acima). ---- */
/* Folga no topo p/ a foto transbordar SEM invadir o menu (mesma da empresarial,
   `.b2b-shero`). O header é estático, então sem essa folga a imagem (que vem
   depois no DOM) é pintada por cima da barra de produtos. */
/* Espaçamento do menu NORMAL (como nas páginas sem foto): a faixa começa logo
   após o menu; a foto apenas VAZA um pouco pra cima e pra baixo da faixa, como
   efeito, sem invadir o menu. */
.page-hero.page-hero--media { padding-top: 10px; }
.page-hero--media .page-hero__band { text-align: left; padding: 0; overflow: visible; }
.page-hero--media .page-hero__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; min-height: 320px; }
.page-hero--media .page-hero__text { padding: 50px 0; }
.page-hero--media .page-hero__crumb { justify-content: flex-start; }
.page-hero--media .page-hero__sub { margin-left: 0; margin-right: 0; max-width: 460px; }
.page-hero--media .page-hero__cta { justify-content: flex-start; }
/* Foto à direita TRANSBORDA a faixa em cima e embaixo (igual à empresarial),
   mas a faixa continua clara — só o "para empresas" é escuro. */
.page-hero--media .page-hero__media { position: relative; align-self: center; display: flex; align-items: center; justify-content: center; }
.page-hero--media .page-hero__media img { width: 100%; height: 500px; object-fit: cover; object-position: center 18%; border-radius: 18px; margin: -8px 0 -62px; }

@media (max-width: 900px) {
  .page-hero--media .page-hero__inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .page-hero--media .page-hero__text { padding: 40px 0 6px; text-align: center; }
  .page-hero--media .page-hero__crumb { justify-content: center; }
  .page-hero--media .page-hero__sub { margin-left: auto; margin-right: auto; }
  .page-hero--media .page-hero__cta { justify-content: center; }
  .page-hero--media .page-hero__media img { height: auto; max-height: 340px; margin: 0 0 -26px; }
}

/* Botão outline neutro (ex.: "Ver planos") */
.in-btn--outline { background: #fff; color: var(--in-ink); border: 1.5px solid var(--in-line, #e0e0e5); }
.in-btn--outline:hover { border-color: var(--in-red); color: var(--in-red); }

/* ---- Hero (serviço / streamings landing) ---- */
/* Hero branca: sem a linha do menu, uma borda no topo do conteúdo separa
   visualmente o menu da página (as demais internas usam faixa colorida). */
.servico__hero, .stream-app__hero { padding: 44px 0 8px; border-top: 1px solid var(--in-border-soft); }
.servico__title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; margin: 8px 0 8px; color: var(--in-ink); }
.servico__intro { max-width: 680px; color: var(--in-muted); }
.servico__intro p { margin: 0 0 10px; }

/* ---- Breadcrumb ---- */
.stream-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--in-muted); margin-bottom: 18px; }
.stream-crumb a { color: var(--in-muted); text-decoration: none; }
.stream-crumb a:hover { color: var(--in-red); }
.stream-crumb strong { color: var(--in-ink); }

/* ---- Landing: categorias + cards ---- */
.stream-cat { padding-top: 20px; }
.stream-cat__title { font-size: 1.35rem; font-weight: 700; margin: 0 0 18px; color: var(--in-ink); }
.stream-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.stream-card {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: #fff; border: 1px solid var(--in-line, #ececf0); border-radius: var(--in-radius-lg, 18px);
  padding: 18px; transition: .18s ease;
}
.stream-card:hover { border-color: var(--in-red); box-shadow: 0 12px 34px rgba(20,20,30,.08); transform: translateY(-2px); }
.stream-card__logo { flex: 0 0 auto; width: 60px; height: 60px; display: grid; place-items: center; }
.stream-card__logo img { width: 60px; height: 60px; object-fit: contain; border-radius: 12px; }
.stream-card__logo strong { font-size: .9rem; color: var(--in-ink); }
.stream-card__body { display: flex; flex-direction: column; gap: 4px; }
.stream-card__name { font-size: 1.05rem; color: var(--in-ink); }
.stream-card__desc { font-size: .86rem; color: var(--in-muted); line-height: 1.4; }
.stream-card__link { font-size: .82rem; font-weight: 600; color: var(--in-red); margin-top: 2px; }

/* ---- Página do app ---- */
.stream-app__head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.stream-app__logo { flex: 0 0 auto; width: 88px; height: 88px; display: grid; place-items: center; }
.stream-app__logo img { width: 88px; height: 88px; object-fit: contain; border-radius: 18px; }
.stream-app__cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--in-radius-pill, 999px); margin-bottom: 6px; }
.stream-app__cat--premium { background: #f3e8ff; color: #6b21a8; }
.stream-app__cat--standard { background: #e6f0fb; color: #1e5aa8; }
.stream-app__title { font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 700; margin: 0 0 6px; color: var(--in-ink); }
.stream-app__desc { max-width: 620px; color: var(--in-muted); margin: 0; }

/* ---- Cabeçalho da seção de planos ---- */
.stream-plans__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.stream-plans__head h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: var(--in-ink); }
.stream-plans__sub { color: var(--in-muted); margin: 0; }

/* ---- Grid de planos (reaproveita .plan-card do home.css) ---- */
.stream-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; align-items: start; }
.stream-plans > .plan-card { flex: none; width: auto; max-width: none; }

.stream-empty { background: #f7f7f9; border-radius: var(--in-radius-lg, 18px); padding: 40px 24px; text-align: center; color: var(--in-muted); }
.stream-empty p { margin: 0 0 16px; }

/* ---- Outros streamings (rodapé da página do app) ---- */
.stream-others__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 16px; color: var(--in-ink); }
.stream-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.stream-tile {
  flex: 0 0 auto; width: 72px; display: grid; place-items: center; gap: 6px;
  text-decoration: none; transition: .16s ease;
}
.stream-tile:hover { transform: translateY(-3px); }
.stream-tile img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; }
.stream-tile span { font-size: .8rem; color: var(--in-ink); text-align: center; }

/* ---- Submenu de Streamings no header ---- */
.products-nav__list li.has-submenu { position: relative; }
.products-nav__submenu {
  position: absolute; top: 100%; left: 0; z-index: 40; min-width: 230px;
  background: #fff; border: 1px solid var(--in-line, #ececf0); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20,20,30,.14); padding: 8px; margin-top: 6px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s ease;
}
.products-nav__list li.has-submenu:hover .products-nav__submenu,
.products-nav__list li.has-submenu:focus-within .products-nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.products-nav__submenu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: .92rem; font-weight: 400; color: #242424; text-decoration: none; }
.products-nav__submenu a:hover { background: var(--in-red-50, #fdeaec); color: var(--in-red); }

/* Submenu de Ajuda (2 colunas: Ajuda + Atendimento) */
.products-nav__submenu--help { left: auto; right: 0; min-width: 640px; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden; }
.products-nav__help-col { padding: 22px 26px; }
.products-nav__help-col--att { background: #f4f4f5; }
.products-nav__help-col h4 { color: var(--in-red); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.products-nav__help-col a { padding: 7px 0; font-size: .95rem; font-weight: 400; color: #242424; border-radius: 0; }
.products-nav__help-col a:hover { background: none; color: var(--in-red); }
.products-nav__help-col--att p { margin: 0 0 12px; color: var(--in-muted); font-size: .9rem; line-height: 1.4; white-space: nowrap; }
.products-nav__help-col--att p strong { color: var(--in-ink); }
.products-nav__help-wa { color: var(--in-ink); }
.products-nav__help-wa svg { color: var(--in-green, #65922D); }
.products-nav__help-sac { display: block; padding: 7px 0; font-size: .9rem; color: var(--in-muted); }
.products-nav__help-sac strong { color: var(--in-ink); }

@media (max-width: 900px) {
  /* No mobile os submenus (hover) não aparecem — os itens estão nas próprias páginas. */
  .products-nav__submenu { display: none; }
}