/* Mega TV — identidade visual do app (aplicada 02/08, a partir de
 * /opt/aplicativo_megatv/identidadevisual.md, escrita pelo Pires).
 *
 * O conceito é o contraste FOGO x GELO do logotipo:
 *   quente (laranja/vermelho) = AÇÃO — botão principal, ao vivo, destaque, urgência;
 *   frio  (azul/ciano)        = TECNOLOGIA — navegação, seleção, ícone, informação.
 * Fundo escuro domina; cor forte é ponto de atenção, nunca preenchimento.
 */
@font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/assets/exo2-500.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/assets/exo2-600.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/assets/exo2-700.woff2') format('woff2')}
@font-face{
  font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/assets/inter-latin-variable.woff2') format('woff2');
}

:root{
  color-scheme:dark;
  --fundo:#0A0F1A;            /* preto azulado — fundo geral */
  --marinho:#0D1B2A;          /* azul-marinho — cards, cabeçalhos, campos */
  /* 06/08 — a identidade define DUAS profundidades e o app só usava uma. Item de lista dentro de
     um cartão precisa subir do fundo do cartão, senão a lista some. Vinham de branco a 4,5% de
     opacidade, que sobre o marinho dá um cinza morto sem marca nenhuma. */
  --superficie:#13243B;       /* item de lista sobre o cartão (plano, conta, canal) */
  --superficie-alta:#182F4C;  /* o mesmo item quando é o escolhido/destacado */
  --tinta:#FFFFFF;            /* títulos e informação principal */
  /* cinza puro sobre fundo azulado lê como texto apagado, não como texto secundário. Puxa o
     neutro pro lado frio da marca — continua discreto e volta a pertencer à paleta. */
  --fraca:#C3D2E4;            /* textos secundários */
  --tinta-fraca:#C3D2E4;      /* apelido: havia uso de var(--tinta-fraca) sem ninguém declarar */
  /* 06/08 — 39 superfícies do app usavam BRANCO translúcido. Sobre o fundo azulado isso dá
     #161B25: um cinza sem croma nenhum, e é daí que vinha a sensação de "cor apagada" no app
     inteiro. A mesma opacidade num branco FRIO devolve o azul da marca sem mexer em layout. */
  --pelicula:rgba(123,241,255,.07);
  --pelicula-media:rgba(123,241,255,.09);
  --pelicula-forte:rgba(123,241,255,.11);
  --linha:rgba(0,229,255,.14);/* borda discreta, ciano de baixa opacidade */
  --linha-quente:rgba(255,194,77,.40); /* borda do que está escolhido — lado quente da marca */
  --vidro:linear-gradient(180deg,#0F2033,#0B1524);
  --ciano:#00E5FF;            /* ícone, borda ativa, link, seleção */
  --ciano-claro:#7BF1FF;
  --azul:#0066FF;             /* botão secundário, estado ativo, categoria */
  --laranja:#FF6A00;          /* AÇÃO: botão principal, destaque, selecionado */
  --dourado:#FFC24D;          /* o terceiro tom quente da identidade — PREÇO e selo premium.
                                 laranja sobre marinho vira barro; dourado sobre marinho brilha */
  --vermelho:#FF002E;         /* AO VIVO, alerta, urgência */
  /* o coral do time do coração. Estava chumbado no MESMO hex do laranja de ação, apesar do
     comentário dizer "torcida e não alarme" — então torcida e urgência tinham a mesma cor e
     nenhuma das duas significava nada. Este é o coral que já vivia solto em rgba(242,96,76). */
  --coral:#F2604C;
  /* 06/08 — a auditoria varreu cor por cor e achou estas soltas, repetidas em várias telas.
     Nenhuma estava errada; estavam SEM NOME, que é como cor vira acidente na próxima mão. */
  --tinta-no-claro:#04212A;   /* tinta escura sobre superfície CLARA (botão ciano, selo dourado) */
  --azul-claro:#CFE3FF;       /* texto do botão secundário azul */
  --zap:#25D366;              /* verde do WhatsApp — identifica o CANAL, nunca é status */
  --zap-tinta:#BFF3D4;
  --cat-azul:#7FB2FF; --cat-verde:#8BF7C0; --cat-roxo:#C77BFF;  /* categorias: cor é rótulo */
  --bom:#00E5A0; --atencao:#FFB020; --ruim:#FF002E;
  --raio:20px;
  --sombra:0 22px 54px -26px rgba(0,0,0,.95);
}


*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* `hidden` perde de `display:flex` — sem isto duas telas aparecem juntas. */
[hidden]{display:none!important}

html,body{height:100%}
body{margin:0;color:var(--tinta);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Céu: a nebulosa que o app já usava, atrás de tudo, sem competir com o texto. */
body::before{
  content:''; position:fixed; inset:0 0 auto; height:62vh; z-index:-2;
  background:url('/static/assets/mega-nebula-bg-mobile.webp') no-repeat center top/cover;
  opacity:.5;
  -webkit-mask-image:linear-gradient(#000 0%,#000 42%,transparent 100%);
          mask-image:linear-gradient(#000 0%,#000 42%,transparent 100%);
}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}

.env{
  width:100%; max-width:480px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 28px);
  display:flex; flex-direction:column; gap:18px;
}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{height:32px;width:auto;display:block}
.chip-instalar{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font:inherit;font-size:13px;font-weight:650;border:1px solid rgba(21,199,216,.30);border-radius:999px;padding:8px 14px;cursor:pointer}
.chip-instalar:active{background:rgba(21,199,216,.22)}

/* ---------- ícones ---------- */
/* ESCALA DE ÍCONE (auditoria 06/08). A medição achou 15 tamanhos diferentes espalhados —
   10,12,14,15,16,17,18,19,20,21,22,23,24,26,27. Isso não é escala, é deriva: cada tela foi
   ajustada no olho e o conjunto perdeu o passo. Quatro degraus, com um trabalho cada:
     12 = micro (selo de nota, "sigo")      16 = pequeno (rótulo de linha, meu time, sino)
     20 = PADRÃO (botão, lista, menu)       24 = grande (chip do cartão, atalho, balão)
   Ícone CHEIO (phosphor) pesa mais que o de TRAÇO (lucide) no mesmo tamanho — por isso o cheio
   quase sempre fica um degrau abaixo do traço equivalente. */
.ic,.icf{width:20px;height:20px;flex:0 0 auto;display:block}
.ic{fill:none;stroke:currentColor}          /* lucide  — traço */
.icf{fill:currentColor;stroke:none}         /* phosphor — cheio */

/* ---------- telas e cartões ---------- */
.tela{display:flex;flex-direction:column;gap:14px;animation:sobe .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tela{animation:none}}

.cartao{border:1px solid var(--linha);border-radius:var(--raio);padding:22px 20px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.09)}
.cartao h2{margin:12px 0 0;font-size:21px;font-weight:750;letter-spacing:-.025em;line-height:1.2}
.c-sub{margin:7px 0 0;font-size:14.5px;color:var(--fraca);line-height:1.5}
/* chip de ícone do cartão — o ciano é o SISTEMA (frio = navegação/informação, regra da
   identidade). Estava declarado aqui e de novo 1000 linhas abaixo com outro ciano. */
.c-ic{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;background:rgba(0,229,255,.10);color:var(--ciano);
  border:1px solid rgba(0,229,255,.26);
}
.c-ic .ic,.c-ic .icf{width:24px;height:24px}
.rot{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fraca);
}
.linha-rot{display:flex;align-items:center;gap:8px}
.linha-rot .ic{width:16px;height:16px;color:var(--ciano)}

/* ---------- capa da tela de instalar ---------- */
.capa{text-align:center;padding:6px 4px 0}
.marca-3d{height:auto;display:block;margin:2px auto 18px;animation:flutua 6s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.marca-3d{animation:none}}
.capa h1{
  margin:0;font-size:clamp(27px,7.6vw,33px);font-weight:800;letter-spacing:-.035em;line-height:1.12;
  text-wrap:balance;
}
.capa h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--ciano-claro),var(--ciano) 60%,#8fd8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin:12px auto 0;max-width:34ch;font-size:15px;color:var(--fraca);line-height:1.55;text-wrap:pretty}

/* ---------- cartão do aparelho detectado ---------- */
.alvo{padding:18px}
.aparelho{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ap-icone{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;
  border-radius:13px;background:rgba(255,255,255,.07);border:1px solid var(--linha);color:var(--tinta);
}
.ap-icone .ic,.ap-icone .icf{width:24px;height:24px}
.ap-nome{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.ap-nota{font-size:13px;color:var(--fraca)}

/* ---------- passos ---------- */
.passos{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:p}
.passos li{
  display:flex;align-items:center;gap:12px;padding:11px 2px;font-size:14.5px;line-height:1.4;
  border-top:1px solid rgba(255,255,255,.055);
}
.passos li:first-child{border-top:0}
.passos li::before{
  counter-increment:p;content:counter(p);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;
  background:rgba(21,199,216,.14);border:1px solid rgba(21,199,216,.28);
  color:var(--ciano-claro);font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;
}
.passos b{font-weight:680}
/* o glifo do passo (compartilhar, ⋮, +) vai dentro do texto, no tamanho da linha */
.passos .ic,.passos .icf{
  display:inline-block;width:16px;height:16px;vertical-align:-3.5px;margin:0 2px;color:var(--ciano-claro);
}
.pronto{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:12px 14px;
  background:rgba(60,240,155,.10);border:1px solid rgba(60,240,155,.28);border-radius:14px;
  font-size:14px;color:#c8ffe6;
}
.pronto .ic{color:var(--bom)}

/* ---------- ganhos ---------- */
.ganhos{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ganhos li{display:flex;align-items:flex-start;gap:13px}
.g-ic{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:12px;background:var(--pelicula-media);border:1px solid var(--linha);color:var(--ciano-claro);
}
.g-ic .ic{width:20px;height:20px}
.ganhos b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.ganhos span{display:block;font-size:13.5px;color:var(--fraca);line-height:1.45}

/* ---------- formulário ---------- */
label.rot{margin:18px 0 8px}
input{
  font:inherit;width:100%;color:var(--tinta);
  background:var(--pelicula-media);border:1px solid var(--linha);border-radius:15px;
  padding:15px 16px;font-size:17px;font-weight:600;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:rgba(157,176,198,.45);font-weight:500}
input:focus{outline:0}
.codigo{text-align:center;font-size:27px;font-weight:750;letter-spacing:.32em;padding-left:.32em}

/* 🔑 06/08 — `.primario` estava declarado DUAS vezes: uma pele ciano aqui e uma laranja 900
   linhas abaixo, que vencia. A de cima era código morto, e quem lia o arquivo via a cor errada.
   Fundidas numa só: a AÇÃO é quente (regra da identidade), a estrutura mora aqui. */
.primario{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font:inherit;font-size:14.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-decoration:none;cursor:pointer;
  border:0;border-radius:14px;padding:16px 20px;margin-top:16px;min-height:54px;
  background:linear-gradient(135deg,var(--vermelho),var(--laranja));
  box-shadow:0 14px 30px -12px rgba(255,106,0,.62), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s;
}
.primario:active{transform:translateY(1px);box-shadow:0 8px 18px -12px rgba(255,106,0,.7)}
.primario:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
/* 05/08: `opacity:.55` num botão de gradiente laranja ainda parece um botão LIGADO — o cliente
   tocava e nada acontecia. Desabilitado agora é cinza e sem gradiente: parece o que é. */
.primario:disabled{opacity:1;box-shadow:none;cursor:not-allowed;
  background:var(--pelicula-forte);color:rgba(255,255,255,.38);border:1px solid var(--linha)}
.primario .ic{stroke-width:2.3}
/* secundário: fundo escuro com borda azul (regra §9 da identidade). Também estava duplicado. */
.primario.fantasma{
  background:rgba(0,102,255,.10);color:var(--azul-claro);border:1px solid rgba(0,102,255,.45);
  box-shadow:none;text-transform:none;letter-spacing:0;font-weight:700;font-size:15px;
}
.primario.fantasma:active{background:rgba(0,102,255,.16)}

.aviso{margin:9px 0 0;min-height:19px;font-size:13.5px;line-height:1.4;color:var(--ruim)}

/* ---------- estado do acesso ---------- */
.estado{position:relative;overflow:hidden}
.estado::before{
  content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,transparent,var(--cor,var(--ciano)),transparent);opacity:.9;
}
.est-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.selo{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  color:var(--cor,var(--ciano));background:color-mix(in srgb,var(--cor,var(--ciano)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cor,var(--ciano)) 34%,transparent);
}
.grande{
  margin-top:8px;font-size:clamp(34px,10.5vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-variant-numeric:tabular-nums;color:var(--cor,var(--tinta));
}

/* ---------- dados de acesso ---------- */
.dado{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--pelicula);border:1px solid rgba(255,255,255,.07);
  border-radius:15px;padding:12px 14px;margin-top:10px;min-width:0;
}
.dado>div{min-width:0}
.dado b{display:block;margin-top:3px;font-size:16px;font-weight:700;letter-spacing:-.01em;word-break:break-all}
.dado .m3u{font-size:12px;font-weight:600;color:var(--fraca)}
.copiar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:1px solid rgba(21,199,216,.24);cursor:pointer}
.copiar:active{background:rgba(21,199,216,.24)}
.copiar.ok{background:rgba(60,240,155,.16);border-color:rgba(60,240,155,.35);color:var(--bom)}

/* ---------- rodapés ---------- */
.pe{margin:4px 0 0;text-align:center;font-size:13px;color:var(--fraca)}
.pe a{color:var(--ciano-claro);text-decoration:none;font-weight:650}
.pe a:active{opacity:.7}
.seguro{display:flex;align-items:center;justify-content:center;gap:7px}
.seguro .ic{width:16px;height:16px;color:var(--bom)}
.rodape{padding-top:2px}

/* ---------- aviso flutuante (copiado, erro rápido) ---------- */
.flutuante{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%);
  background:rgba(12,26,46,.94);border:1px solid var(--linha);border-radius:14px;
  padding:11px 18px;font-size:14px;font-weight:600;box-shadow:var(--sombra);
  backdrop-filter:blur(14px);z-index:40;animation:sobe .25s ease both;
}

/* telas curtas: menos ar, o que importa continua acima da dobra */
@media (max-height:700px){
  .marca-3d{width:66px;margin-bottom:12px}
  .capa h1{font-size:26px}
  .env{gap:14px}
}

/* ---------- medidor de internet ---------- */
.veloc-topo{display:flex;align-items:flex-start;gap:13px}
.veloc-topo h2{margin:0}
.veloc-num{display:flex;align-items:baseline;gap:7px;margin:16px 0 2px}
.num-grande{
  font-size:clamp(38px,11vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--cor,var(--ciano-claro));
}
.unid{font-size:15px;font-weight:700;color:var(--fraca)}
.barra-teste{
  height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:16px;
}
.barra-teste>i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ciano),var(--ciano-claro));
  transition:width .25s ease;
}
.nota-privacidade{margin-top:12px;font-size:11.5px;line-height:1.45;opacity:.75;text-align:left}

/* ---------- jogos de hoje ---------- */
.jogos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.jogos li{
  display:flex;align-items:center;gap:12px;padding:12px 2px;
  border-top:1px solid rgba(255,255,255,.055);
}
.jogos li:first-child{border-top:0}
.jogos .hora{
  font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ciano-claro);
  flex:0 0 auto;width:46px;
}
.jogos .partida{min-width:0;flex:1}
.jogos .partida b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.jogos .partida span{display:block;font-size:12.5px;color:var(--fraca);margin-top:2px}
/* jogo do time dele: o coral da marca, que aqui é torcida e não alarme */
.jogos li.meu{background:rgba(242,96,76,.09);border-radius:12px;padding-left:10px;padding-right:10px}
.jogos li.meu .hora{color:var(--coral)}
.meu-time{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}
.meu-time .rot{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.meu-time .ic{width:16px;height:16px;color:var(--coral)}
select{
  font:inherit;width:100%;color:var(--tinta);font-size:15px;font-weight:600;
  background:var(--pelicula-media);border:1px solid var(--linha);border-radius:14px;
  padding:13px 15px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fraca) 50%),
                   linear-gradient(135deg,var(--fraca) 50%,transparent 50%);
  background-position:calc(100% - 21px) 21px, calc(100% - 15px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
select:focus{outline:0;border-color:rgba(21,199,216,.6)}

/* ---------- novidades ---------- */
.abas{display:flex;gap:8px;margin-top:14px}
.aba{font:inherit;width:auto;flex:0 0 auto;box-shadow:none;cursor:pointer}
.aba.ativa{border-color:transparent}
.capas{
  display:flex;gap:12px;margin-top:16px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.capas::-webkit-scrollbar{display:none}
.capa{flex:0 0 108px;scroll-snap-align:start}
.capa img{
  width:108px;aspect-ratio:2/3;object-fit:cover;border-radius:14px;display:block;
  background:var(--pelicula-media);border:1px solid var(--linha);
}
.capa b{margin-top:8px;font-size:12.5px;font-weight:650;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.capa span{display:block;font-size:11.5px;color:var(--fraca);margin-top:2px}
.capa .nota{color:var(--atencao);font-weight:700}

/* ---------- busca de canal ---------- */
.canais{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.canais li{background:var(--pelicula-media);border:1px solid var(--linha);border-radius:999px}
.canais li span{font-weight:500;color:var(--fraca);font-size:11.5px}

.capa .nota{display:inline-flex;align-items:center;gap:3px}
.capa .estrela{width:11px;height:11px;display:inline-block}

/* ---------- resolver sozinho ---------- */
.acao{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;
  background:var(--pelicula);border:1px solid var(--linha);border-radius:16px;
  padding:13px 14px;text-align:left;color:var(--tinta);box-shadow:none;cursor:pointer;
}
.acao:active{background:rgba(255,255,255,.09)}
.acao:disabled{opacity:.5}
.a-ic{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:12px;background:rgba(21,199,216,.12);border:1px solid rgba(21,199,216,.22);
  color:var(--ciano-claro);
}
.a-ic .ic{width:20px;height:20px}
.a-txt{flex:1;min-width:0}
.a-txt b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.a-txt span{display:block;font-size:12.5px;color:var(--fraca);line-height:1.4;margin-top:1px;font-weight:500}
.acao .seta{width:16px;height:16px;color:var(--fraca);flex:0 0 auto}
.resultado{margin-top:14px;padding:14px;border-radius:16px;
  background:rgba(60,240,155,.09);border:1px solid rgba(60,240,155,.26)}
.resultado p{margin:0;font-size:14px;line-height:1.45;color:#c8ffe6}
.resultado .dado{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.10)}
.resultado .dado b{font-size:15px;word-break:break-all}

/* ================= MENU DE ABAS (barra de baixo) =================
   O app virou 4 lugares (Início, Jogos, Canais, Catálogo) porque uma rolagem só já não
   cabia — o cliente tinha de passar o dedo por tudo pra achar um número de canal. */
.menu{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  padding:6px 8px calc(env(safe-area-inset-bottom) + 6px);
  background:rgba(7,16,31,.86);border-top:1px solid var(--linha);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.menu-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;box-shadow:none;padding:9px 4px;border-radius:14px;
  color:var(--fraca);font-size:11px;font-weight:650;cursor:pointer;width:auto;
}
.menu-item .ic{width:20px;height:20px}
/* 96px limpava só o menu de baixo — mas o balão de suporte fica de 84px a 140px do rodapé,
   e o que caía nessa faixa ficava COBERTO (o card do teste de 6h, no print da revisão).
   150px limpa os dois. Custa um pouco de rolagem no fim; um card ilegível custa um chamado. */
body.com-menu .env{padding-bottom:150px}
.aba-tela{display:flex;flex-direction:column;gap:14px;
  animation:sobe .3s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){.aba-tela{animation:none}}
.sep{margin-top:16px}

/* ---------- meu time ---------- */
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.time{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;width:auto;
  background:var(--pelicula);border:1px solid var(--linha);border-radius:14px;
  box-shadow:none;cursor:pointer;color:var(--tinta);
}
.time:active{background:rgba(255,255,255,.09)}
.time img{width:34px;height:34px;object-fit:contain}
.time span{font-size:10.5px;font-weight:600;line-height:1.15;text-align:center;color:var(--fraca);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.time-atual{display:flex;align-items:center;gap:13px;margin-top:14px}
.time-atual img{width:46px;height:46px;object-fit:contain;flex:0 0 auto}
.tm-txt{flex:1;min-width:0}
.tm-txt b{display:block;font-size:17px;font-weight:750;letter-spacing:-.02em}
.tm-txt span{display:block;font-size:13px;color:var(--fraca);margin-top:1px}

/* ---------- agenda por competição ---------- */
.comp{margin-top:16px}
.comp-nome{opacity:.85}
.jogo{
  display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-top:1px solid rgba(255,255,255,.055);
}
.comp .jogo:first-of-type{border-top:0}
.jogo .hora{font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums;
  color:var(--ciano-claro);flex:0 0 auto;width:44px}
.jogo .partida{flex:1;min-width:0;font-size:14.5px;font-weight:650;letter-spacing:-.015em}
.jogo.meu{background:rgba(242,96,76,.10);border-radius:12px;padding-left:9px;padding-right:9px}
.jogo.meu .hora{color:var(--coral)}
.pastas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pastas span{
  font-size:12.5px;font-weight:650;background:var(--pelicula-media);
  border:1px solid var(--linha);border-radius:999px;padding:8px 13px;
}
.pastas span i{font-style:normal;color:var(--fraca);font-weight:500}

/* ---------- canais ---------- */
.canais{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.canais li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;
  border-top:1px solid rgba(255,255,255,.055);font-size:14.5px;font-weight:650;
}
.canais li:first-child{border-top:0}
.canais li em{font-style:normal;font-weight:500;color:var(--fraca);font-size:12px;display:block}
.atalhos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.atalhos button{
  width:auto;font-size:13px;font-weight:650;color:var(--ciano-claro);box-shadow:none;
  background:rgba(21,199,216,.10);border:1px solid rgba(21,199,216,.26);
  border-radius:999px;padding:9px 15px;
}

/* ---------- catálogo ---------- */
.chips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{
  width:auto;flex:0 0 auto;font-size:12.5px;font-weight:650;color:var(--fraca);box-shadow:none;
  background:var(--pelicula-media);border:1px solid var(--linha);border-radius:999px;padding:8px 14px;
}
.chips button.ativa{color:#03212a;background:linear-gradient(180deg,var(--ciano-claro),var(--ciano));border-color:transparent}
.grade .capa{flex:none}
.grade .capa img{width:100%}

/* ---------- avisos e favoritos ---------- */
.sino{
  position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,16,31,.72);border:1px solid var(--linha);color:var(--fraca);
  box-shadow:none;backdrop-filter:blur(6px);
}
.sino .ic{width:16px;height:16px}
.sino.seguindo{color:var(--atencao);border-color:rgba(255,194,71,.4);background:rgba(255,194,71,.16)}
.grade .capa{position:relative}

/* ================= REDESENHO DAS LISTAS (02/08) =================
   O Pires: "as listas ta tudo bem feio... a parte de ver as pastas nao esta legal, nem a de
   filmes e series". Eram três listas de texto empilhado, sem imagem e sem hierarquia — o olho
   não tinha onde pousar. Agora cada uma tem seu objeto: escudo no jogo, logo no canal, capa no
   catálogo. E o que era só contagem virou coisa que ABRE. */

/* ---------- jogo como cartão ---------- */
.comp{margin-top:18px}
.comp:first-child{margin-top:12px}
.comp-nome{
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
  font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--fraca);
}
.comp-nome::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}

.partida{display:flex;padding:11px 12px;margin-top:8px;background:var(--pelicula);border:1px solid rgba(255,255,255,.07);border-radius:16px}
.partida .hora{
  flex:0 0 auto;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;color:var(--ciano-claro);
  background:rgba(21,199,216,.12);border-radius:9px;padding:6px 8px;
}
.times-jogo{flex:1;min-width:0;display:flex;flex-direction:column}
.lado{display:flex;align-items:center;gap:8px;min-width:0}
.lado img,.lado .vazio-escudo{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.lado .vazio-escudo{
  border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;
  justify-content:center;font-size:9px;font-weight:800;color:var(--fraca);
}
.lado b{font-size:14px;font-weight:650;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.canal-num{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;border:1px solid rgba(21,199,216,.34);border-radius:11px;padding:7px 10px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.canal-num small{display:block;font-weight:700;text-transform:uppercase;opacity:.75}
/* Nome de emissora não é número: não cabe no mesmo corpo nem pede tabular-nums. E não pode
   roubar a largura dos times — o selo largo espremia a coluna e "Estudiantes" quebrava no meio
   da palavra (`.lado b` tem word-break). Empilhado, com teto fixo e reticência, ele fica do
   tamanho do selo de número e a linha do jogo continua legível. */
.canal-num.so-emissora{
  flex-direction:column;align-items:flex-start;gap:0;max-width:92px;
  font-size:11.5px;font-weight:750;letter-spacing:.01em;line-height:1.15;
}
.canal-num.so-emissora .qual{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* O recado que vale pra TODO MUNDO na tela do código: nem erro (nada quebrou) nem sucesso
   (não posso afirmar que enviei sem dizer quem é cliente). Discreto, por isso. */
.aviso-neutro{
  margin-top:8px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;
  background:var(--pelicula-media);border:1px solid var(--linha);opacity:.9;
}

/* a dica fica COLADA no campo: ela responde "o que eu digito aqui?", não é recado solto */
.dica{margin:6px 2px 0;font-size:12.5px;opacity:.65}

.tela-login-chat{width:100%;max-width:340px;margin:4px 0 10px;border-radius:12px;
  border:1px solid var(--linha)}

/* ---------- estrelas da avaliação ---------- */
.estrelas{display:flex;gap:6px;justify-content:center;margin:14px 0 6px}
.estrelas button{
  width:52px;height:52px;padding:0;flex:0 0 auto;border-radius:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--pelicula-media);border:1px solid var(--linha);color:rgba(255,255,255,.22);
  transition:color .12s,border-color .12s,transform .08s;
}
.estrelas .icf{width:24px;height:24px}
.estrelas button.on{color:var(--atencao);border-color:rgba(255,176,32,.42);background:rgba(255,176,32,.10)}
.estrelas button:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.estrelas button{transition:none}}

/* ---------- faixa de instabilidade (EMERGENCIA) ---------- */
/* âmbar, não vermelho: nada quebrou na conta dele e ele não perdeu nada — é aviso, não alarme.
   Vermelho aqui faria o cliente achar que perdeu o acesso e ligar pra revenda, o oposto do que
   a faixa existe pra evitar. */
.faixa-aviso{
  display:flex;align-items:flex-start;gap:11px;margin:0 0 14px;padding:13px 14px;border-radius:14px;
  background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.30);
}
.faixa-aviso .fa-ic{font-size:20px;line-height:1.2;flex:0 0 auto}
.faixa-aviso b{display:block;font-size:14px;margin-bottom:2px}
.faixa-aviso span{font-size:12.5px;color:var(--fraca);opacity:.85;line-height:1.45}

/* ---------- cartão "volta pra gente" (REMARKETING) ---------- */
.cartao.volta{border-color:rgba(255,106,0,.32);
  background:linear-gradient(180deg,rgba(255,106,0,.10),rgba(255,106,0,.02))}

/* ---------- PIX copia e cola dentro do app ---------- */
.caixa-pix{
  margin-top:14px;padding:15px;border-radius:14px;
  background:linear-gradient(180deg,rgba(0,229,160,.10),rgba(0,229,160,.03));
  border:1px solid rgba(0,229,160,.30);
}
/* o código é longo e quebra em qualquer lugar: `break-all` evita estourar a largura, e a
   fonte mono deixa o cliente conferir caractere a caractere se desconfiar */
.pix-codigo{
  margin:6px 0 12px;padding:11px 12px;border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5;
  word-break:break-all;max-height:110px;overflow-y:auto;
  background:rgba(4,8,16,.45);border:1px solid var(--linha);color:var(--fraca);
}

/* ---------- menu de suporte: cards e listas (espelho do WhatsApp) ---------- */
.cards-suporte{display:flex;flex-direction:column;gap:8px;width:100%;margin:4px 0 2px;
  max-height:40vh;overflow-y:auto;scrollbar-width:none}
.cards-suporte::-webkit-scrollbar{display:none}
.card-sup{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;text-align:left;
  background:var(--pelicula-media);border:1px solid var(--linha);border-radius:14px;
  color:var(--tinta);font-family:inherit;cursor:pointer;
}
.card-sup:active{transform:translateY(1px)}
.cs-ic{font-size:20px;line-height:1;flex:0 0 auto}
.cs-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-txt b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.cs-txt span{font-size:12px;color:var(--fraca);opacity:.75}

/* lista interativa DENTRO da conversa — o equivalente à lista do WhatsApp */
.lista-chat{display:flex;flex-direction:column;gap:7px;margin:6px 0 10px}
.lista-chat button{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;text-align:left;
  background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.22);border-radius:12px;
  color:var(--tinta);font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;
}
.lista-chat img{width:26px;height:26px;object-fit:contain;border-radius:6px;flex:0 0 auto}

/* card do app com o vídeo dentro da conversa: ele aprende sem sair da tela */
.card-app-chat{
  display:flex;flex-direction:column;gap:8px;margin:6px 0 10px;padding:13px;
  background:var(--vidro);border:1px solid var(--linha);border-radius:14px;
}
.card-app-chat .ca-logo{width:56px;height:56px;object-fit:contain;border-radius:10px}
.card-app-chat b{font-size:15px;letter-spacing:-.01em}
.card-app-chat .ca-cod{font-size:12.5px;color:var(--fraca)}
.card-app-chat .ca-cod b{font-size:16px;color:var(--ciano-claro);letter-spacing:.05em}
.card-app-chat video{width:100%;border-radius:10px;background:#000;max-height:300px}

/* ---------- funil: aparelho, vídeo, planos ---------- */
/* Emoji em vez de ícone SVG nas opções de aparelho: o lead vem do WhatsApp, é a linguagem que
   ele já lê, e um 📺 diz "TV" mais rápido que qualquer traço vetorial. */
.aparelho-op .ap-emoji{font-size:22px;line-height:1;flex:0 0 auto}
.aparelho-op .seta{margin-left:auto;opacity:.5}

.video-caixa{position:relative;margin:12px 0;border-radius:14px;overflow:hidden;border:1px solid var(--linha)}
.video-caixa video{display:block;width:100%;max-height:340px;background:#000}
.video-rot{
  position:absolute;top:9px;left:9px;font-size:11.5px;font-weight:750;letter-spacing:.01em;
  padding:5px 9px;border-radius:999px;background:rgba(4,8,16,.72);backdrop-filter:blur(3px);
}
.codigo-downloader{
  margin:10px 0 0;padding:11px 13px;border-radius:11px;font-size:13.5px;
  background:rgba(0,229,255,.09);border:1px solid rgba(0,229,255,.24);
}
.codigo-downloader b{font-size:17px;letter-spacing:.06em;color:var(--ciano-claro)}
.tela-login{margin:12px 0 0}

/* ======================= PLANOS =======================
 * 06/08 (Pires: "a parte dos planos as cores não ficou tão boa"). Ele estava certo, e a causa
 * não era escolha de cor — era o arquivo brigando consigo:
 *
 *   · `.plano-op` estava declarado DUAS vezes, com padding diferente, e o de baixo vencia;
 *   · o cartão vinha de branco a 4,5% sobre fundo azulado = cinza morto, sem marca nenhuma;
 *   · o destaque era um banho LARANJA a 16% em cima do marinho, e laranja sobre azul escuro
 *     não dá laranja: dá BARRO. Ainda por cima o preço vinha em laranja sobre esse barro, que
 *     é o pior contraste possível — a informação mais importante do cartão na cor mais fraca.
 *
 * A correção segue a identidade em vez de inventar: o item sobe do fundo usando a SEGUNDA
 * profundidade do marinho (não uma película branca), e a energia do destaque aparece onde ela
 * informa — o selo e o preço em DOURADO, que é o terceiro tom quente da marca e o único que
 * brilha sobre marinho. Nada de preenchimento quente. */
.planos-funil{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.plano-op{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;width:100%;
  padding:15px 16px;min-height:68px;cursor:pointer;text-align:left;font-family:inherit;
  background:var(--superficie);border:1px solid var(--linha);border-radius:14px;color:var(--tinta);
  transition:background .14s ease,border-color .14s ease,transform .1s ease;
}
.plano-op:active{transform:translateY(1px);background:var(--superficie-alta)}
.plano-op:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
/* 🔑 classe PRÓPRIA, não `.destaque`: esse nome já é do destaque do CATÁLOGO, que pinta um véu
   escuro `::after{inset:0}` por cima do cartão inteiro. O plano recomendado saía mais apagado
   que os outros — o recomendado lendo como desabilitado. O arquivo já avisava desse choque na
   regra dos apps; era a terceira vítima do mesmo nome. */
.plano-op.plano-top{
  background:var(--superficie-alta);border-color:var(--linha-quente);
  box-shadow:0 12px 26px -18px rgba(255,194,77,.55);
}

.plano-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.plano-nome{font-family:'Exo 2',Inter,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.005em}
.plano-unidade{font-size:11.5px;font-weight:600;color:var(--fraca);opacity:.72;
  font-variant-numeric:tabular-nums}

/* o selo substitui o ⭐ que fazia trabalho de estrutura dentro do NOME do plano: emoji não
   sobrevive a busca, a leitura em voz alta nem a quebra de linha. */
.plano-selo{
  display:inline-block;margin-left:8px;padding:3px 7px;border-radius:6px;vertical-align:2px;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#221602;background:linear-gradient(135deg,var(--dourado),#FFA92E);
}

/* o preço lidera: "R$" recua, o número manda, dígitos alinhados entre as linhas */
.plano-preco{font-size:20px;font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap}
.plano-preco i{font-style:normal;font-size:12px;font-weight:700;opacity:.55;margin-right:3px}
.plano-op.plano-top .plano-preco{color:var(--dourado)}

/* ---------- escolher em qual cadastro entrar ---------- */
.contas{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.conta{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;width:100%;
  padding:14px 14px;min-height:60px;cursor:pointer;text-align:left;font-family:inherit;
  background:var(--pelicula);border:1px solid var(--linha);border-radius:14px;color:var(--tinta);
}
.conta:active{transform:translateY(1px)}
.conta .ic{grid-row:1/3;grid-column:2;opacity:.55}
.conta-nome{font-size:15px;font-weight:750;letter-spacing:-.01em}
.conta-sub{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fraca);opacity:.8}
.conta-selo{
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.07);
}
.conta-selo.em_dia{color:var(--bom);background:rgba(0,229,160,.13)}
.conta-selo.vencido{color:var(--ruim);background:rgba(255,0,46,.13)}
.conta-selo.vence_hoje,.conta-selo.vence_logo{color:var(--atencao);background:rgba(255,176,32,.13)}
.conta-selo.revenda{color:var(--ciano);background:rgba(0,229,255,.13)}

/* ---------- confirmar que é você ---------- */
.verificar{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.verificar-fundo{position:absolute;inset:0;background:rgba(4,8,16,.72);backdrop-filter:blur(3px)}
.verificar-corpo{
  position:relative;width:100%;max-width:520px;padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  background:var(--vidro);border:1px solid var(--linha);border-radius:22px 22px 0 0;
  box-shadow:var(--sombra);animation:sobe .22s ease-out;
}
@media (min-width:560px){
  .verificar{align-items:center}
  .verificar-corpo{border-radius:22px;padding-bottom:24px}
}
@keyframes sobe{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.verificar-corpo{animation:none}}
.verificar-corpo h2{margin:10px 0 4px;font-size:20px;letter-spacing:-.02em}

/* ---------- não consegui carregar (≠ não existe) ---------- */
/* --atencao (âmbar), não --ruim: nada quebrou do lado do cliente e ele não perdeu nada — é pra
   tentar de novo. Vermelho aqui leria como problema na CONTA dele, que é o medo nº 1 de quem
   assina, e a tela ia empurrar justamente pra conclusão errada que este bloco veio consertar. */
.falha-carga{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.28);
  border-radius:12px;padding:14px 15px;margin:10px 0;
}
.falha-carga p{margin:0;font-size:13.5px;line-height:1.45;color:var(--fraca);opacity:.85}
.falha-carga .bt-tentar{
  min-height:44px;padding:0 18px;border-radius:10px;cursor:pointer;
  background:rgba(255,176,32,.15);border:1px solid rgba(255,176,32,.40);
  color:var(--atencao);font-size:14px;font-weight:750;font-family:inherit;
}
.falha-carga .bt-tentar:active{transform:translateY(1px)}
.partida.meu{
  background:linear-gradient(180deg,rgba(242,96,76,.16),rgba(242,96,76,.06));
  border-color:rgba(242,96,76,.34);
}
.partida.meu .hora{color:var(--coral);background:rgba(242,96,76,.16)}

/* ---------- pastas que ABREM ---------- */
.lista-pastas{margin-top:12px}
.pasta{
  display:flex;align-items:center;gap:11px;width:100%;padding:13px 12px;margin-top:8px;
  background:var(--pelicula);border:1px solid rgba(255,255,255,.07);border-radius:15px;
  box-shadow:none;color:var(--tinta);text-align:left;cursor:pointer;
}
.pasta b{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.pasta .qtd{font-size:12.5px;color:var(--fraca);font-variant-numeric:tabular-nums}
.pasta .seta{width:16px;height:16px;color:var(--fraca);transition:transform .2s}
.pasta.aberta .seta{transform:rotate(90deg);color:var(--ciano-claro)}
.pasta.aberta{border-color:rgba(21,199,216,.3);background:rgba(21,199,216,.07)}
.canais-da-pasta{margin:2px 0 10px;padding:0 2px}

/* ---------- canal com logo ---------- */
.canal{
  display:flex;align-items:center;gap:11px;padding:10px 2px;
  border-top:1px solid rgba(255,255,255,.055);
}
.canal:first-child{border-top:0}
.canal img,.canal .sem-logo{
  width:38px;height:38px;flex:0 0 auto;border-radius:10px;object-fit:contain;
  background:var(--pelicula-forte);border:1px solid var(--linha);padding:3px;
}
.canal .sem-logo{display:flex;align-items:center;justify-content:center;color:var(--fraca)}
.canal .sem-logo .ic{width:16px;height:16px}
.canal .nome{flex:1;min-width:0}
.canal .nome b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canal .nome span{display:block;font-size:11.5px;color:var(--fraca);margin-top:1px}

/* ---------- catálogo em trilhos ---------- */
.cartao-busca{padding:16px}
.campo-busca{position:relative;margin-top:12px}
.campo-busca .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--fraca);pointer-events:none}
.campo-busca input{margin-top:0;padding-left:42px;font-size:15px;font-weight:500}
.trilho-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.trilho-t h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.025em}
.trilho-t span{font-size:12px;color:var(--fraca);font-variant-numeric:tabular-nums}
.trilho{
  display:flex;gap:12px;overflow-x:auto;padding:2px 4px 8px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.trilho::-webkit-scrollbar{display:none}
.poster{flex:0 0 124px;scroll-snap-align:start;position:relative;cursor:pointer;
  background:none;border:0;padding:0;box-shadow:none;text-align:left;width:auto;color:var(--tinta)}
.poster img{aspect-ratio:2/3;object-fit:cover;display:block;background:var(--pelicula-media)}
.poster b{margin-top:8px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.selo-nota{position:absolute;top:7px;left:7px;display:inline-flex;align-items:center;gap:3px;background:rgba(7,16,31,.82);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:3px 6px;font-size:11px;font-weight:750;backdrop-filter:blur(6px)}
.selo-nota .ic{width:12px;height:12px}
.grade{display:grid;margin-top:14px}
.grade .poster{flex:none;width:100%}

/* ---------- ficha do título ---------- */
.ficha{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end}
.ficha-fundo{position:absolute;inset:0;background:rgba(3,8,16,.7);backdrop-filter:blur(6px)}
.ficha-corpo{
  position:relative;width:100%;max-width:480px;margin:0 auto;
  background:linear-gradient(180deg,#0e1c31,#07101f);
  border:1px solid var(--linha);border-bottom:0;border-radius:26px 26px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom) + 26px);
  display:flex;gap:16px;box-shadow:0 -20px 60px rgba(0,0,0,.6);
  animation:sobe .28s cubic-bezier(.2,.7,.3,1) both;
}
.ficha-corpo>img{width:112px;aspect-ratio:2/3;object-fit:cover;border-radius:14px;flex:0 0 auto;
  border:1px solid var(--linha)}
.ficha-txt{flex:1;min-width:0}
.ficha-txt h2{margin:0;font-size:19px;font-weight:750;letter-spacing:-.025em;line-height:1.2}
.ficha-meta{display:flex;align-items:center;gap:9px;margin:8px 0 0;font-size:13px;color:var(--fraca)}
.ficha-meta .nota{display:inline-flex;align-items:center;gap:4px;color:var(--atencao);font-weight:750}
.ficha-fechar{
  position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;box-shadow:none;
  background:rgba(255,255,255,.07);border:1px solid var(--linha);color:var(--fraca);
}

/* a busca de canal usa a mesma linha das pastas */
.canais li{display:block;padding:0;border:0;background:none}
.canais li .canal{border-top:1px solid rgba(255,255,255,.055)}
.canais li:first-child .canal{border-top:0}

/* ---------- retoques (02/08) ---------- */
.cartao-busca{padding:14px}
.cartao-busca .abas{margin-top:0}
.campo-busca input{padding-top:13px;padding-bottom:13px}
.trilho-t{margin:20px 4px 10px}
/* fileira de jogos: separa a competição do bloco anterior sem cartão dentro de cartão */
#agenda .comp:first-child{margin-top:6px}

/* o X não pode cavalgar o nome do título */
.ficha-txt h2{padding-right:40px}
.ficha-txt .primario{margin-top:14px;padding:12px 16px;font-size:14px;white-space:nowrap}
.ficha-txt .primario.seguindo{
  background:rgba(255,194,71,.14);border:1px solid rgba(255,194,71,.4);color:var(--atencao);
  box-shadow:none;
}

/* ---------- sinopse ---------- */
.ficha-corpo{flex-wrap:wrap}
.sinopse{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--fraca);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}
.sinopse.buscando{opacity:.55;font-style:italic}
.ficha-meta{flex-wrap:wrap}
.ficha-meta .gen{
  font-size:11.5px;font-weight:650;background:var(--pelicula-forte);
  border:1px solid var(--linha);border-radius:999px;padding:3px 9px;
}

/* O flex estica os filhos por padrão: a capa ganhava a altura da ficha inteira e o `cover`
   comia as laterais do pôster. Alinhar no topo devolve a proporção 2:3. */
.ficha-corpo{align-items:flex-start}
.ficha-corpo>img{align-self:flex-start}
.sinopse{-webkit-line-clamp:8}

/* ---------- nome de time inteiro (02/08) ----------
   "Defensa y Justicia" e "Columbus Crew" cortavam em "...". Numa tela de 390px, com escudo,
   hora e número na mesma linha, não cabe nome longo em UMA linha — então ele passa a quebrar
   em duas. Cortar o nome do time é pior que a fileira ficar um pouco mais alta: o cliente
   precisa saber QUEM joga. */
.lado b{
  white-space:normal;text-overflow:clip;line-height:1.18;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
.partida{align-items:center;gap:10px}
.times-jogo{gap:7px}
/* a pílula do canal devolve alguns pixels pro nome */
.canal-num{padding:6px 9px}
.canal-num small{font-size:8px;letter-spacing:.06em;margin-bottom:1px}

/* ================= BANNERS, PERFIL E INDICAÇÃO (02/08) ================= */
.banners{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.banners::-webkit-scrollbar{display:none}
.banner{
  flex:0 0 88%;scroll-snap-align:center;display:flex;align-items:center;gap:13px;
  padding:16px;border-radius:20px;border:1px solid var(--linha);cursor:pointer;
  box-shadow:0 16px 40px -22px rgba(0,0,0,.9);text-align:left;color:var(--tinta);width:auto;
}
.banner .b-ic{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
}
.banner .b-ic .ic{width:24px;height:24px}
.banner b{display:block;font-size:15.5px;font-weight:750;letter-spacing:-.02em}
.banner span{display:block;font-size:12.5px;opacity:.82;margin-top:2px;line-height:1.35}

/* ---------- perfil ---------- */
.perfil-topo{display:flex;align-items:center;gap:14px}
.avatar{
  width:58px;height:58px;flex:0 0 auto;border-radius:20px;display:flex;align-items:center;
  justify-content:center;font-size:23px;font-weight:800;color:var(--tinta-no-claro);letter-spacing:-.02em;
  background:var(--cor,var(--ciano));box-shadow:0 10px 26px -12px var(--cor,var(--ciano));
}
.cores{display:flex;gap:10px;margin-top:16px}
.cores button{
  width:32px;height:32px;flex:0 0 auto;border-radius:11px;padding:0;box-shadow:none;
  border:2px solid transparent;cursor:pointer;
}
.cores button.ativa{border-color:#fff;transform:scale(1.06)}
.placar{display:flex;gap:10px;margin-top:16px}
.placar div{
  flex:1;text-align:center;background:var(--pelicula-media);border:1px solid var(--linha);
  border-radius:15px;padding:12px 6px;
}
.placar b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ciano-claro)}
.placar span{display:block;font-size:11px;color:var(--fraca);margin-top:2px}
.indicados{list-style:none;margin:16px 0 0;padding:0}
.indicados li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;
  border-top:1px solid rgba(255,255,255,.055);font-size:14px;font-weight:600;
}
.indicados .estado{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;background:var(--pelicula-forte);color:var(--fraca)}
.indicados .estado.ativou{background:rgba(60,240,155,.14);color:var(--bom)}
.indicados .estado.premiado{background:rgba(255,194,71,.16);color:var(--atencao)}

/* ---------- chegada do aviso de vencimento ---------- */
@keyframes chama{0%,100%{box-shadow:var(--sombra),0 0 0 0 rgba(255,194,71,0)}
  50%{box-shadow:var(--sombra),0 0 0 8px rgba(255,194,71,.16)}}
.destacado{animation:chama 1.6s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.destacado{animation:none;border-color:var(--atencao)}}

/* ================= BALÃO DE SUPORTE (02/08) =================
   Fica ACIMA do menu, nunca em cima dele: botão que cobre navegação faz o cliente errar o
   toque e desistir. E some quando o teclado abre. */
.balao{
  position:fixed;right:16px;z-index:35;width:56px;height:56px;padding:0;border-radius:20px;
  bottom:calc(env(safe-area-inset-bottom) + 84px);
  display:flex;align-items:center;justify-content:center;color:var(--tinta-no-claro);
  background:linear-gradient(180deg,var(--ciano-claro),var(--ciano));
  box-shadow:0 14px 32px -10px rgba(21,199,216,.8), inset 0 1px 0 rgba(255,255,255,.5);
  animation:pulso 3.4s ease-in-out 3;
}
.balao .icf{width:24px;height:24px}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.balao{animation:none}}
body.teclado .balao{display:none}

.chat{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.chat-fundo{position:absolute;inset:0;background:rgba(3,8,16,.72);backdrop-filter:blur(6px)}
.chat-corpo{
  position:relative;width:100%;max-width:480px;margin:0 auto;height:min(78vh,620px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0e1c31,#07101f);
  border:1px solid var(--linha);border-bottom:0;border-radius:26px 26px 0 0;
  padding:18px 16px calc(env(safe-area-inset-bottom) + 14px);
  box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sobe .28s cubic-bezier(.2,.7,.3,1) both;
}
.chat-topo{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.chat-topo .c-ic{width:38px;height:38px;border-radius:12px}
.chat-topo .c-ic .ic{width:20px;height:20px}
.chat-topo .tm-txt b{font-size:15.5px}
.chat-topo .tm-txt span{font-size:12px;color:var(--bom)}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 2px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.45}
.msg.eu{align-self:flex-end;background:linear-gradient(180deg,var(--ciano-claro),var(--ciano));
  color:var(--tinta-no-claro);border-bottom-right-radius:6px;font-weight:600}
.msg.ela{align-self:flex-start;background:var(--pelicula-forte);border:1px solid var(--linha);
  border-bottom-left-radius:6px}
.msg.pensando{color:var(--fraca);font-style:italic}
.chat-atalhos{display:flex;gap:8px;overflow-x:auto;padding:6px 2px;scrollbar-width:none}
.chat-atalhos::-webkit-scrollbar{display:none}
.chat-atalhos button{
  flex:0 0 auto;width:auto;font-size:12.5px;font-weight:650;color:var(--ciano-claro);
  background:rgba(21,199,216,.10);border:1px solid rgba(21,199,216,.26);
  border-radius:999px;padding:9px 14px;box-shadow:none;
}
.chat-campo{display:flex;gap:9px;align-items:center;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07)}
.chat-campo input{margin-top:0;flex:1;padding:13px 15px;font-size:15px;font-weight:500}
.chat-campo button{
  width:46px;height:46px;flex:0 0 auto;padding:0;border-radius:15px;display:flex;
  align-items:center;justify-content:center;color:var(--tinta-no-claro);
  background:linear-gradient(180deg,var(--ciano-claro),var(--ciano));box-shadow:none;
}

/* ---------- teclado aberto: o menu fixo subia junto e ficava no meio da tela ---------- */
body.teclado .menu{display:none}
body.teclado.com-menu .env{padding-bottom:28px}

/* ================= ROTEIRO DO TESTE GRÁTIS ================= */
.passos-topo{display:flex;align-items:center;gap:12px;padding:2px 2px 4px}
.voltar-passo{
  width:38px;height:38px;flex:0 0 auto;padding:0;border-radius:12px;box-shadow:none;
  display:flex;align-items:center;justify-content:center;color:var(--fraca);
  background:var(--pelicula-forte);border:1px solid var(--linha);
}
.trilha{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.trilha>i{display:block;height:100%;width:25%;border-radius:99px;
  background:linear-gradient(90deg,var(--ciano),var(--ciano-claro));transition:width .35s ease}
.trilha-txt{font-size:12px;font-weight:650;color:var(--fraca);font-variant-numeric:tabular-nums}
.passo{animation:sobe .3s cubic-bezier(.2,.7,.3,1) both}

/* 06/08 — era grid de 2 colunas e "TV Box ou Fire Stick" quebrava em TRÊS linhas. Uma coluna:
   os nomes cabem inteiros e a lista fica com cara de botão de WhatsApp, que é de onde o lead vem. */
.aparelhos{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.aparelho-op{
  display:flex;align-items:center;gap:11px;padding:15px 14px;width:auto;text-align:left;
  background:var(--pelicula);border:1px solid var(--linha);border-radius:16px;
  box-shadow:none;color:var(--tinta);font-size:14.5px;font-weight:650;cursor:pointer;
}
.aparelho-op .ic{width:20px;height:20px;color:var(--ciano-claro);flex:0 0 auto}
.aparelho-op:active{background:rgba(21,199,216,.12);border-color:rgba(21,199,216,.35)}
.app-topo{display:flex;align-items:center;gap:14px}
.app-topo img{width:56px;height:56px;border-radius:16px;object-fit:contain;flex:0 0 auto;
  background:var(--pelicula-forte);border:1px solid var(--linha);padding:5px}
.app-topo .tm-txt b{font-size:19px}
.app-topo .tm-txt span{font-size:13px;color:var(--ciano-claro)}

/* ================= TELA INICIAL (02/08) =================
   Era uma pilha de cartões do mesmo tamanho: nada chamava porque tudo pesava igual. Agora tem
   hierarquia — quem cumprimenta, o que importa (o acesso), pra onde ir, e o que é oferta. */
.saudacao{display:flex;align-items:center;gap:12px;padding:2px 2px 0}
.saudacao b{display:block;letter-spacing:-.02em}
.saudacao span{display:block;font-size:13px;color:var(--fraca)}

.heroi{
  padding:24px 22px 22px;
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb,var(--cor,var(--ciano)) 20%,transparent), transparent 62%),
    var(--vidro);
  border-color:color-mix(in srgb,var(--cor,var(--ciano)) 26%,var(--linha));
}
.heroi .grande{font-size:clamp(38px,12vw,52px)}
.regua{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:16px}
.regua>i{display:block;height:100%;width:0;border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.3,1)}

.atalhos-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.atalho{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;width:auto;
  background:var(--pelicula);border:1px solid var(--linha);border-radius:18px;
  box-shadow:none;color:var(--tinta);font-size:12px;font-weight:650;cursor:pointer;
}
.atalho:active{background:rgba(255,255,255,.09)}
.at-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px}
.at-ic .ic{width:24px;height:24px}
/* uma cor por área: o cliente aprende o lugar pela cor antes de ler o nome */
.at-ic.j{background:rgba(21,199,216,.14);color:var(--ciano-claro);border:1px solid rgba(21,199,216,.24)}
.at-ic.c{border:1px solid rgba(138,160,220,.26)}
.at-ic.f{border:1px solid rgba(185,162,227,.26)}
.at-ic.s{border:1px solid rgba(60,240,155,.24)}

/* ---------- séries: acompanhar, não navegar ---------- */
.marcador{
  display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  background:rgba(255,194,71,.16);border:1px solid rgba(255,194,71,.4);color:var(--atencao);
  border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:750;letter-spacing:.04em;
}
.poster .fita{
  position:absolute;left:7px;bottom:44px;background:rgba(255,194,71,.94);color:#231600;
  border-radius:7px;padding:3px 7px;font-size:10.5px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.8);
}
.poster .sigo{
  position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,16,31,.82);border:1px solid rgba(255,194,71,.45);color:var(--atencao);
}
.poster .sigo .ic{width:12px;height:12px}
.vazio-series{padding:0 4px 6px}

/* ---------- último episódio na ficha ---------- */
.episodio-novo{
  display:flex;align-items:baseline;gap:8px;margin:10px 0 0;padding:9px 12px;
  background:rgba(255,194,71,.10);border:1px solid rgba(255,194,71,.30);border-radius:12px;
}
.episodio-novo b{font-size:14px;font-weight:800;color:var(--atencao);letter-spacing:-.01em;flex:0 0 auto}
.episodio-novo span{font-size:12.5px;color:var(--fraca);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ================= IDENTIDADE APLICADA (02/08) ================= */
/* Títulos em Exo 2 (a fonte tecnológica da marca); interface em Inter. */
h1,h2,h3,.marca,.grande,.num-grande,.trilho-t h3,.capa h1{
  font-family:'Exo 2',Inter,system-ui,sans-serif;letter-spacing:-.02em;
}
.rot,.comp-nome,.menu-item span{font-family:Inter,system-ui,sans-serif}
body{background:var(--fundo)}
body::before{opacity:.34}
body::after{
  background:
    radial-gradient(120% 60% at 0% -6%, rgba(255,106,0,.16), transparent 58%),
    radial-gradient(110% 60% at 100% -4%, rgba(0,229,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,15,26,.4), var(--fundo) 70%);
}
.cartao{background:linear-gradient(180deg,#0F2033,#0B1524);border-color:rgba(0,229,255,.13)}

/* AÇÃO é quente: o botão principal usa o gradiente vermelho→laranja do logotipo */
.primario.seguindo{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.45);
  color:var(--atencao);text-transform:none;letter-spacing:0}
.chip-instalar{color:var(--ciano);background:rgba(0,229,255,.10);border-color:rgba(0,229,255,.34)}

/* navegação é fria: selecionado em ciano, com linha superior */
.menu{background:rgba(13,27,42,.92);border-top-color:rgba(0,229,255,.16)}
.menu-item.ativo{color:var(--ciano);background:rgba(0,229,255,.09);position:relative}
.menu-item.ativo::before{
  content:'';position:absolute;top:0;left:26%;right:26%;height:2px;border-radius:2px;
  background:var(--ciano);box-shadow:0 0 10px var(--ciano);
}
input,select{background:rgba(13,27,42,.85);border-color:rgba(0,229,255,.16);border-radius:12px}
input:focus{border-color:var(--ciano);box-shadow:0 0 0 3px rgba(0,229,255,.16)}
.copiar{background:rgba(0,229,255,.10);border-color:rgba(0,229,255,.28);color:var(--ciano)}
.balao{background:linear-gradient(135deg,var(--vermelho),var(--laranja));color:#fff;
  box-shadow:0 14px 32px -10px rgba(255,106,0,.75)}
.selo-nota{color:var(--atencao)}
.canal-num{
  background:linear-gradient(180deg,rgba(0,102,255,.28),rgba(0,102,255,.12));
  border-color:rgba(0,229,255,.4);color:var(--ciano);
}
.c-sub,.pe,.ap-nota,.a-txt span,.ganhos span,.canal .nome span{color:var(--fraca);opacity:.72}

/* ================= JOGOS: MUNDO DE FUTEBOL ================= */
/* Aqui a identidade pede laranja/dourado pra esporte, e o Pires pediu "cores de futebol, tipo
 * Cartola". Então esta aba ganha AMBIENTE próprio: verde de gramado no fundo, faixa de campo
 * atrás do cabeçalho e o quente da marca nos horários. Não é outra marca — é a mesma paleta
 * com o esporte puxando a temperatura. */
#aba-jogos{--cor-area:#00C566}
#aba-jogos::before{
  content:'';position:fixed;inset:0 0 auto;height:52vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -10%, rgba(0,197,102,.20), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 2px, transparent 2px 46px);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);
}
#aba-jogos .cartao{
  background:linear-gradient(180deg,rgba(10,38,26,.92),rgba(9,20,26,.94));
  border-color:rgba(0,197,102,.20);
}
#aba-jogos .rot .ic,#aba-jogos .linha-rot .ic{color:#00C566}
#aba-jogos .comp-nome{color:var(--cat-verde);opacity:.9}
#aba-jogos .comp-nome::after{background:rgba(0,197,102,.22)}
#aba-jogos .partida{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border-color:rgba(0,197,102,.18);
}
/* a hora é o dado quente: é o que faz o cliente correr pra TV */
#aba-jogos .partida .hora{
  color:#fff;background:linear-gradient(135deg,var(--vermelho),var(--laranja));
  box-shadow:0 8px 18px -10px rgba(255,106,0,.8);
}
#aba-jogos .partida.meu{
  background:linear-gradient(180deg,rgba(255,106,0,.20),rgba(255,106,0,.06));
  border-color:rgba(255,106,0,.42);
}
#aba-jogos .canal-num{
  background:linear-gradient(180deg,rgba(0,197,102,.26),rgba(0,197,102,.10));
  border-color:rgba(0,197,102,.44);color:#8BF7C0;
}
#aba-jogos .pasta.aberta{border-color:rgba(0,197,102,.4);background:rgba(0,197,102,.09)}
#aba-jogos .time.escolhido,#aba-jogos .time:active{border-color:rgba(0,197,102,.5)}
#aba-jogos .primario.fantasma{background:rgba(0,197,102,.12);border-color:rgba(0,197,102,.45);color:#8BF7C0}

/* ================= CATÁLOGO: VITRINE DE STREAMING ================= */
/* Menos moldura, mais capa. O cartão em volta da faixa competia com o pôster — em app de
 * filme quem tem de brilhar é a arte, não a caixa. */
#aba-catalogo .trilho-t h3{font-size:19px;font-weight:700}
#aba-catalogo #trilhos .trilho{padding-left:2px}
.poster{flex-basis:132px}
.poster img{
  width:132px;border-radius:12px;border:0;
  box-shadow:0 18px 34px -18px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.poster:active img{transform:scale(.97)}
.poster b{font-size:12.5px;font-weight:600;color:#fff}
.grade .poster img{width:100%}
.grade{grid-template-columns:repeat(3,1fr);gap:11px}
/* aba selecionada com linha inferior laranja (regra §13 da identidade) */
.abas{gap:16px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:0}
.aba{
  background:none;border:0;border-radius:0;padding:9px 2px 10px;color:var(--fraca);opacity:.7;
  position:relative;font-size:15px;font-weight:650;
}
.aba.ativa{background:none;color:#fff;opacity:1}
.aba.ativa::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--vermelho),var(--laranja));
}
.fita{background:linear-gradient(135deg,var(--vermelho),var(--laranja));color:#fff;
  box-shadow:0 6px 14px -6px rgba(255,0,46,.8)}
.marcador{background:rgba(255,106,0,.16);border-color:rgba(255,106,0,.45);color:var(--laranja)}

/* ================= INÍCIO: ÁREA DO CLIENTE ================= */
/* "Mais exclusiva": o herói deixa de ser um cartão como os outros e vira a assinatura da
 * marca — aro de luz quente-fria, como o logotipo. */
.heroi{
  position:relative;overflow:hidden;border-radius:24px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,106,0,.20), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, rgba(0,229,255,.20), transparent 55%),
    linear-gradient(180deg,#102133,#0A1420);
  border-color:rgba(0,229,255,.22);
}
.heroi::after{
  content:'';position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--laranja),var(--vermelho) 30%,transparent 55%,var(--ciano));
}
.heroi .grande{color:#fff}
.regua>i{background:linear-gradient(90deg,var(--laranja),var(--vermelho))}
.saudacao b{font-family:'Exo 2',Inter,sans-serif;font-weight:700}
.at-ic.j{background:rgba(0,197,102,.14);color:#00C566;border-color:rgba(0,197,102,.3)}
.at-ic.c{background:rgba(0,102,255,.16);color:var(--cat-azul);border-color:rgba(0,102,255,.34)}
.at-ic.f{background:rgba(0,229,255,.13);color:var(--ciano);border-color:rgba(0,229,255,.3)}
.at-ic.s{background:rgba(255,106,0,.14);color:var(--laranja);border-color:rgba(255,106,0,.32)}
.banner.jogo{background:linear-gradient(120deg,rgba(0,197,102,.24),rgba(0,197,102,.05))}
.banner.indica{background:linear-gradient(120deg,rgba(255,106,0,.26),rgba(255,0,46,.08))}
.banner.venc{background:linear-gradient(120deg,rgba(255,0,46,.24),rgba(255,106,0,.07))}

/* ================= ABERTURA (identidade §23) =================
   Duas luzes entram pelos lados — laranja pela esquerda, azul pela direita — se encontram no
   centro e revelam o símbolo. Dura menos de 1,5s e some: abertura que atrasa o app vira
   pedágio, não marca. */
.abertura{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:radial-gradient(120% 90% at 50% 50%,#0D1B2A,#050A12);
  animation:sai-abertura .42s ease 1.32s forwards;
}
.luzes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.luz{position:absolute;top:50%;width:50%;height:2px;filter:blur(1px)}
.luz.quente{left:-52%;background:linear-gradient(90deg,transparent,var(--laranja));
  animation:entra-esq .75s cubic-bezier(.2,.8,.2,1) forwards}
.luz.fria{right:-52%;background:linear-gradient(270deg,transparent,var(--ciano));
  animation:entra-dir .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes entra-esq{to{left:0}}
@keyframes entra-dir{to{right:0}}
.marca-abertura{height:auto;opacity:0;transform:scale(.86)}
.assinatura{font-family:'Exo 2',Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--fraca);opacity:0}
@keyframes revela{to{opacity:1;transform:none}}
@keyframes sai-abertura{to{opacity:0;visibility:hidden}}
/* a marca some primeiro; o fundo só abre depois que ela já saiu */
@keyframes sai-marca{to{opacity:0;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){
  .abertura{animation:sai-abertura .3s ease .5s forwards}
  .luz,.marca-abertura,.assinatura{animation:none;opacity:1;transform:none}
}

/* ---------- selo AO VIVO (identidade §12) ---------- */
.ao-vivo{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  background:var(--vermelho);color:#fff;border-radius:7px;padding:4px 8px;
  font-size:10px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 6px 16px -6px rgba(255,0,46,.9);
}
.ao-vivo i{width:5px;height:5px;border-radius:50%;background:#fff;animation:pisca 1.4s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ao-vivo i{animation:none}}
#aba-jogos .partida.rolando{border-color:rgba(255,0,46,.5);
  background:linear-gradient(180deg,rgba(255,0,46,.14),rgba(255,255,255,.02))}

/* ---------- grade de categorias (identidade §17) ---------- */
.categorias-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cat{
  display:flex;align-items:center;gap:12px;padding:15px 14px;width:auto;text-align:left;
  background:linear-gradient(180deg,#0F2033,#0B1524);border:1px solid var(--linha);
  border-radius:16px;box-shadow:none;color:var(--tinta);cursor:pointer;
}
.cat .c-ico{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:13px;background:color-mix(in srgb,var(--cor) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--cor) 38%,transparent);color:var(--cor);
}
.cat .c-ico .ic{width:20px;height:20px}
.cat b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em}
.cat span{display:block;font-size:11.5px;color:var(--fraca);opacity:.7;
  font-variant-numeric:tabular-nums;margin-top:1px}
.cat.aberta{border-color:color-mix(in srgb,var(--cor) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cor) 30%,transparent)}

/* ================= MARCA E FUNDOS DE VERDADE (02/08) =================
   Os fundos são os que o Pires gerou (/opt/aplicativo_megatv). Escolhi pelo uso, não pelo
   impacto: o do app é o mais CALMO dos oito, porque conteúdo fica em cima dele e precisa
   continuar legível; o da abertura é o único que já É a cena descrita na identidade — as duas
   luzes se encontrando no centro. */
body::before{
  background:url('/static/assets/fundo-app.webp') no-repeat center top/cover;
  opacity:.62;height:100vh;
  -webkit-mask-image:linear-gradient(#000 0%,#000 30%,transparent 92%);
          mask-image:linear-gradient(#000 0%,#000 30%,transparent 92%);
}
.abertura{
  background:url('/static/assets/fundo-abertura.webp') no-repeat center center/cover, #050A12;
}
.abertura::after{content:'';position:absolute;inset:0;background:rgba(5,10,18,.35)}
.abertura>*{position:relative;z-index:1}
.marca-abertura{
  width:150px;
  filter:drop-shadow(0 0 40px rgba(255,106,0,.45)) drop-shadow(0 0 40px rgba(0,229,255,.4));
  animation:revela .55s cubic-bezier(.2,.8,.2,1) .55s forwards,
            sai-marca .3s ease 1.05s forwards;
}
.assinatura{animation:revela .5s ease .85s forwards, sai-marca .25s ease 1.05s forwards}
.marca-topo{display:flex;align-items:center;gap:9px}
/* 04/08 (Pires: "o anel em volta não está proporcional") — a sombra era `0 4px 12px` com 32% de
   opacidade: deslocada 4px PRA BAIXO e bem forte. Como o símbolo é redondo e encosta na borda do
   arquivo, ela vazava em volta do círculo inteiro e virava um ANEL — mais grosso embaixo por causa
   do deslocamento. Agora é centrada (0 0), menor e discreta: vira brilho, não moldura. */
.marca-topo img{width:34px;height:34px;display:block;
  filter:drop-shadow(0 0 5px rgba(0,229,255,.20))}
.marca-topo b{
  font-family:'Exo 2',Inter,sans-serif;font-size:17px;font-weight:700;letter-spacing:.02em;
  color:#fff;line-height:1;
}
.marca-topo b em{font-style:normal;
  background:linear-gradient(135deg,var(--vermelho),var(--laranja));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.marca-3d{width:120px;
  filter:drop-shadow(0 14px 34px rgba(255,106,0,.34)) drop-shadow(0 6px 26px rgba(0,229,255,.3))}

/* ---------- meu aplicativo: o material que o agente já tinha ---------- */
.apps-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.app-op{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;width:auto;
  background:var(--pelicula);border:1px solid var(--linha);border-radius:14px;
  box-shadow:none;color:var(--tinta);font-size:10.5px;font-weight:650;cursor:pointer;
}
.app-op img{width:34px;height:34px;object-fit:contain;border-radius:9px}
.app-op.escolhido{border-color:var(--laranja);background:rgba(255,106,0,.12)}
.app-cab{display:flex;align-items:center;gap:13px;margin-top:18px}
.app-cab img{width:52px;height:52px;object-fit:contain;border-radius:14px;
  background:var(--pelicula-forte);border:1px solid var(--linha);padding:4px}
.app-cab .tm-txt b{font-size:17px}
.app-cab .tm-txt span{font-size:12.5px;color:var(--ciano)}
.videos{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.video-bloco b{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:var(--fraca)}
.video-bloco video{width:100%;border-radius:14px;background:#000;border:1px solid var(--linha);display:block}
.tela-login{width:100%;border-radius:14px;margin-top:12px;border:1px solid var(--linha)}

/* botão de ação dentro da conversa (o "aperta aqui" do WhatsApp) */
.chat-msgs .no-chat{
  align-self:flex-start;width:auto;margin-top:-2px;padding:10px 15px;border-radius:14px;
  font-size:13.5px;font-weight:700;color:#fff;box-shadow:none;
  background:linear-gradient(135deg,var(--vermelho),var(--laranja));
}
.chat-atalhos .faz{
  background:linear-gradient(135deg,rgba(255,0,46,.22),rgba(255,106,0,.18));
  border-color:rgba(255,106,0,.45);color:#FFD9C2;
}

/* ---------- primeira entrada ---------- */
.telas-op{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:16px}
.tela-op{
  padding:18px 14px;width:auto;text-align:left;border-radius:16px;box-shadow:none;color:var(--tinta);
  background:var(--pelicula);border:1px solid var(--linha);cursor:pointer;
}
.tela-op b{display:block;font-size:17px;font-weight:750;font-family:'Exo 2',Inter,sans-serif}
.tela-op span{display:block;font-size:12.5px;color:var(--fraca);opacity:.75;margin-top:2px}
.tela-op:active,.tela-op.escolhida{border-color:var(--laranja);background:rgba(255,106,0,.12)}
.aparelho-op.escolhido{border-color:var(--laranja);background:rgba(255,106,0,.14)}
/* 🔴 05/08 — "a primeira vez que entra no app fica bugado a parte qual aplicativo você usa" (Pires).
 * Era COLISÃO DE NOME DE CLASSE, e derrubava justamente o card do NOSSO app.
 * O card do MaxPlayer saía com `class="app-op destaque"` — e `.destaque` já era do DESTAQUE DO
 * CATÁLOGO (o pôster grande, ~40 linhas abaixo). Duas heranças indevidas caíam nele:
 *   1. `.destaque img{height:236px}` esticava o logo → cada card virava 278px de altura;
 *   2. `.destaque::after{inset:0}` fixava bottom:0 e left:0. A regra daqui só sobrescrevia
 *      `top` e `right`, então o selo esticava e virava uma BARRA VERMELHA cobrindo o card
 *      inteiro — sem o nome do app aparecer.
 * Renomeado pra `.nosso-app`, que não colide com nada. Medido antes e depois. */
#bvApps .app-op{position:relative}
#bvApps .app-op.nosso-app::after{
  /* centralizado: num card de ~71px, ancorar à direita joga o selo pra fora da grade */
  content:'exclusivo';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  right:auto;bottom:auto;width:max-content;height:auto;
  background:linear-gradient(135deg,var(--vermelho),var(--laranja));color:#fff;
  font-size:8.5px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:6px;
}
/* Cinto de segurança: mesmo que outra regra de `.destaque` volte a pegar um card de app,
   o logo não pode virar pôster de catálogo. */
#bvApps .app-op img,#appsGrade .app-op img{height:34px;width:34px}
/* Espera / lista vazia no passo do aplicativo — antes ficava um branco mudo. */
.bv-carregando{grid-column:1/-1;padding:22px 4px;text-align:center;font-size:12.5px;color:var(--fraca)}
.topo-dir{display:flex;align-items:center;gap:9px}
.avatar.peq{width:38px;height:38px;border-radius:13px;font-size:16px;padding:0;border:0;cursor:pointer}

/* ---------- tutoriais ---------- */
.filtro-apps{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:4px;scrollbar-width:none}
.filtro-apps::-webkit-scrollbar{display:none}
.filtro-apps button{
  flex:0 0 auto;width:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;
  background:var(--pelicula-media);border:1px solid var(--linha);border-radius:999px;
  padding:7px 13px;box-shadow:none;color:var(--fraca);
}
.filtro-apps button img{width:20px;height:20px;object-fit:contain;border-radius:5px}
.filtro-apps button.ativo{color:#fff;border-color:var(--laranja);background:rgba(255,106,0,.14)}
.tut{margin-top:14px}
.tut-cab{display:flex;align-items:center;gap:13px}
.tut-cab img{width:50px;height:50px;object-fit:contain;border-radius:14px;
  background:var(--pelicula-forte);border:1px solid var(--linha);padding:4px}
.tut-cab b{display:block;font-size:18px;font-weight:750;font-family:'Exo 2',Inter,sans-serif}
.tut-cab .exclusivo{
  display:inline-block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.05em;
  background:linear-gradient(135deg,var(--vermelho),var(--laranja));color:#fff;
  padding:2px 7px;border-radius:6px;
}
.tut-aparelhos{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tut-aparelhos span{font-size:11.5px;font-weight:600;color:var(--fraca);
  background:rgba(0,102,255,.12);border:1px solid rgba(0,102,255,.28);border-radius:999px;padding:5px 10px}
.tut-codigo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.26);border-radius:12px;padding:11px 14px;
}
.tut-codigo b{font-size:17px;font-weight:800;letter-spacing:.06em;color:var(--ciano);
  font-variant-numeric:tabular-nums}
.suporte-24h{background:
  radial-gradient(90% 130% at 100% 0%, rgba(0,229,255,.18), transparent 58%),
  linear-gradient(180deg,#0F2033,#0B1524)}

/* ---------- anexos na conversa ---------- */
.chat-campo .anexo{
  width:42px;height:42px;flex:0 0 auto;padding:0;border-radius:13px;box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,229,255,.10);border:1px solid rgba(0,229,255,.26);color:var(--ciano);
}
.chat-campo .anexo.gravando{background:var(--vermelho);border-color:var(--vermelho);color:#fff;
  animation:pisca 1.1s ease-in-out infinite}
.msg.anexo-msg{padding:8px;background:var(--pelicula-forte)}
.msg.anexo-msg img{max-width:180px;border-radius:12px;display:block}

/* ================= UX MOBILE (02/08) =================
   Dois defeitos que o Pires sentiu no iPhone, e os dois vêm da mesma regra do iOS. */

/* 1) ZOOM AO ABRIR O TECLADO — o Safari do iPhone dá zoom sozinho em QUALQUER campo com fonte
      menor que 16px, e depois deixa a página torta. Não é bug nosso: é regra da plataforma.
      A correção certa é a fonte, não `maximum-scale=1` — travar o zoom quebra quem precisa
      ampliar pra enxergar. */
input, select, textarea{font-size:16px !important}
.campo-busca input, .chat-campo input, select{font-size:16px}
.codigo{font-size:27px !important}
html{-webkit-text-size-adjust:100%}   /* iOS infla texto em paisagem sem isso */

/* 2) O TECLADO EMPURRANDO O CHAT — a folha usava vh, que no iPhone ignora o teclado e a barra
      do navegador. `dvh` acompanha, e o JS ainda ajusta pela área visível de verdade. */
.chat-corpo{height:min(78dvh,620px);max-height:calc(var(--visivel, 100dvh) - 24px)}
.chat-msgs{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* toque: alvo de 44px é o mínimo do iOS; e `manipulation` mata o atraso de 300ms do duplo-toque */
button, .botao, a[role="button"], .menu-item, .aba, .cat, .app-op, .time{touch-action:manipulation}
.copiar, .chat-campo .anexo, .voltar-passo, .ficha-fechar{min-width:44px;min-height:44px}
.menu-item{min-height:52px}

/* rolagem horizontal não pode "vazar" pro histórico do navegador */
.trilho, .capas, .chips, .banners, .filtro-apps, .chat-atalhos, .canais, .atalhos{
  overscroll-behavior-x:contain;
}
/* nada de seleção acidental ao segurar o dedo num botão */
button, .menu-item, .poster, .banner{-webkit-user-select:none;user-select:none}
/* imagem nunca estoura a largura, mesmo com nome comprido de canal */
img{max-width:100%}

/* o teclado ocupa a parte de baixo da tela: a folha de conversa sobe junto, senão o campo de
   escrever fica ATRÁS do teclado — que foi exatamente o que aconteceu no iPhone do Pires */
.chat-corpo{margin-bottom:var(--teclado, 0px)}
.chip-instalar{min-height:44px}
.avatar.peq{min-height:44px;min-width:44px}

/* o símbolo simplificado é quadrado (identidade §22): canto arredondado deixa com cara de
   ícone de app, que é o que ele é nesse tamanho */
.marca-topo img{width:36px;height:36px}

/* saudação sem avatar: ele agora mora no cabeçalho */
.saudacao{padding-top:2px}
.saudacao b{font-size:19px}

/* ================= O MENU QUE "SE MEXE" (02/08) =================
   Medi: o menu não muda de tamanho nem de ordem entre as abas — largura, altura e topo são
   idênticos em 375 e 390. O que se move é a BARRA DO SAFARI: ela encolhe e cresce conforme a
   rolagem, e tudo que é `position:fixed` no rodapé sobe e desce junto.

   A correção que funciona no iOS é tirar a rolagem do BODY: a tela vira altura fixa e quem
   rola é o conteúdo, por dentro. Sem rolagem no documento, o Safari não tem por que mexer na
   barra — e o menu fica parado. (No app instalado nem existe barra; isso é pro navegador.) */
body.com-menu{height:100dvh;overflow:hidden;position:fixed;inset:0;width:100%}
body.com-menu .env{
  height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;                 /* não "puxa" a página atrás */
  padding-bottom:calc(env(safe-area-inset-bottom) + 104px);
}

/* ================= DESTAQUE DO CATÁLOGO =================
   Uma grade de pôsteres do mesmo tamanho não convida ninguém: o olho precisa de um lugar pra
   pousar primeiro. O destaque é a capa da vitrine — imagem grande, degradê pra o texto ficar
   legível (regra §25 da identidade) e uma ação clara. */
.destaque{position:relative;border-radius:22px;overflow:hidden;margin-top:2px;
  border:1px solid var(--linha);box-shadow:var(--sombra)}
.destaque img{width:100%;height:236px;object-fit:cover;display:block}
.destaque::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,26,.10) 0%,rgba(10,15,26,.72) 46%,#0A0F1A 96%);
}
.dest-txt{position:relative;margin-top:-96px;padding:0 18px 18px;z-index:1}
.dest-faixa{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--vermelho),var(--laranja));color:#fff;
  padding:4px 9px;border-radius:6px;
}
.dest-txt h2{margin:9px 0 0;font-size:26px;font-weight:750;line-height:1.1;text-wrap:balance}
.dest-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0;font-size:12.5px;color:var(--fraca)}
.dest-meta .nota{display:inline-flex;align-items:center;gap:4px;color:var(--atencao);font-weight:750}
.dest-meta .gen{background:rgba(255,255,255,.08);border:1px solid var(--linha);
  border-radius:999px;padding:3px 9px;font-size:11px}
.dest-sinopse{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--fraca);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dest-txt .primario{margin-top:14px}

/* Top 10: o número faz parte da arte, como em app de streaming */
.trilho.top10 .poster{padding-left:24px;flex-basis:150px}
.trilho.top10 .poster img{width:126px}
.trilho.top10 .posicao{
  position:absolute;left:-6px;bottom:34px;font-family:'Exo 2',sans-serif;font-size:56px;
  font-weight:700;line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55);
  text-stroke:2px rgba(255,255,255,.55);pointer-events:none;
}

/* ---------- elenco e trailer na ficha ---------- */
.ficha-corpo{flex-wrap:wrap}
.elenco{
  flex:0 0 100%;display:flex;gap:12px;overflow-x:auto;margin-top:16px;padding-bottom:4px;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.elenco::-webkit-scrollbar{display:none}
.ator{flex:0 0 72px;text-align:center}
.ator img,.ator .sem-foto{
  width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;
  background:var(--pelicula-forte);border:1px solid var(--linha);
}
.ator .sem-foto{display:flex;align-items:center;justify-content:center;color:var(--fraca);
  font-size:22px;font-weight:700;font-family:'Exo 2',sans-serif}
.ator b{margin-top:7px;font-size:11.5px;font-weight:700;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ator span{font-size:10.5px;color:var(--fraca);opacity:.75;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.primario.trailer{margin-top:12px;padding:12px 16px;font-size:13.5px}

/* ---------- trailer embutido ---------- */
.video-trailer{
  flex:0 0 100%;margin-top:14px;border-radius:14px;overflow:hidden;
  border:1px solid var(--linha);background:#000;aspect-ratio:16/9;
}
.video-trailer iframe{width:100%;height:100%;border:0;display:block}
.abrir-fora{
  flex:0 0 100%;display:block;margin-top:8px;text-align:center;font-size:12px;font-weight:650;
  color:var(--ciano);text-decoration:none;opacity:.8;
}

/* ---------- botão de suporte: diz o que é ----------
   Ícone do WhatsApp ali prometia abrir o WhatsApp — e não abre, o atendimento é DENTRO do app.
   Ícone sem contexto o cliente não toca. Agora é um robozinho com o rótulo embaixo e um
   pontinho verde de "estou acordado", que é o que a identidade chama de estado ativo. */
.balao{
  width:auto;height:auto;border-radius:18px;padding:9px 14px 8px;flex-direction:column;gap:2px;
  bottom:calc(env(safe-area-inset-bottom) + 78px);
}
.balao .ic{width:24px;height:24px;stroke-width:2}
.balao b{font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1;white-space:nowrap}
.balao-luz{
  position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:#00E5A0;box-shadow:0 0 0 2px rgba(10,15,26,.65), 0 0 10px #00E5A0;
  animation:respira 2.4s ease-in-out infinite;
}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.balao-luz{animation:none}}

/* ---------- correção: o balão estava brigando com o botão principal ----------
   Ele nasceu com o mesmo gradiente vermelho→laranja do "PEDIR MEU TESTE" e flutuava por cima,
   cobrindo o texto do botão. Na identidade, laranja/vermelho é AÇÃO PRINCIPAL — e só pode haver
   uma por tela. Suporte é utilidade permanente, então vira vidro escuro com o robô em ciano;
   o que chama o olho é a luz verde piscando, não a cor de fundo. */
.balao{
  background:rgba(13,27,42,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:#fff;
  border:1px solid rgba(0,229,255,.34);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9), 0 0 22px -6px rgba(0,229,255,.35);
}
.balao .ic{color:var(--ciano)}
.balao b{color:rgba(255,255,255,.92)}
/* e o conteúdo termina ACIMA dele — flutuar não é desculpa pra esconder card */
body.com-menu .env{padding-bottom:calc(env(safe-area-inset-bottom) + 152px)}
body.com-menu.teclado .env{padding-bottom:28px}

/* ---------- o balão encolhe enquanto se rola ----------
   Botão flutuante sempre tapa alguma coisa. Rolando, o que importa é o conteúdo — então ele
   vira só o robozinho (48px) e devolve a área ao card. Parou de rolar, o rótulo volta, porque
   ícone sozinho não diz o que faz — que foi a reclamação que originou este botão. */
.balao{transition:width .18s ease, padding .18s ease, border-radius .18s ease}
.balao.encolhido{padding:11px;border-radius:50%}
.balao.encolhido b{display:none}
.balao.encolhido .balao-luz{top:5px;right:5px}
@media (prefers-reduced-motion:reduce){.balao{transition:none}}

/* ---------- consentimento e privacidade ---------- */
/* o rótulo INTEIRO é o alvo (tocar o texto marca a caixinha) — então ele é que precisa dos
   44px, não o quadradinho */
.aceite{display:flex;gap:10px;align-items:center;margin:12px 0 4px;cursor:pointer;min-height:44px}
.aceite input{width:24px;height:24px;min-width:24px;margin-top:0;accent-color:var(--ciano)}
.aceite span{font-size:13px;line-height:1.4;color:var(--fraca)}
.privacidade{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;
  min-height:44px;border-radius:14px;text-align:left;
  background:var(--pelicula);border:1px solid rgba(255,255,255,.08);color:inherit;
}
.privacidade b{display:block;font-size:14px}
.privacidade small{display:block;font-size:12px;color:var(--fraca);margin-top:1px}
/* vermelho SÓ no que não tem volta — é a regra de cor da identidade */
.privacidade.perigo{border-color:rgba(255,0,46,.32)}
.privacidade.perigo .c-ic{background:rgba(255,0,46,.10);border-color:rgba(255,0,46,.28);color:var(--vermelho)}
.privacidade.perigo b{color:var(--vermelho)}

/* botões que a Lia oferece dentro da conversa */
.acoes-lia{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.acoes-lia .no-chat{margin:0}

/* o poster do tutorial é o logo do app — que é quadrado, então centraliza sem esticar */
/* 06/08 — o `poster` destes vídeos é o LOGO do app, que é quadrado. Sem altura definida o
   navegador usava a proporção do poster e o logo virava um bloco de ~780px estourando a tela:
   parecia bug de renderização, não capa de vídeo. Trava em 16:9 e deixa o logo centralizado. */
.video-bloco video{background:#0D1B2A;object-fit:contain;aspect-ratio:16/9;height:auto}
.link-pagar{margin-top:12px;display:flex;align-items:center;justify-content:center;text-decoration:none}

/* ---------- área do revendedor ----------
   Ele não é cliente: o cartão de vencimento não diz nada pra ele. No lugar, a adesão da base
   dele — que é o motivo de estar aqui. Ciano, não laranja: é informação, não ação. */
.cartao.revenda{border-color:rgba(0,229,255,.28);background:
  linear-gradient(180deg,rgba(0,229,255,.06),transparent)}
.rev-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
.rev-numeros>div{background:var(--pelicula);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:12px 8px;text-align:center}
.rev-numeros b{display:block;font-family:'Exo 2',Inter,sans-serif;font-size:24px;
  font-weight:700;color:var(--ciano);line-height:1}
.rev-numeros small{display:block;font-size:11px;color:var(--fraca);margin-top:4px}

/* ---------- onde achar o título ----------
   Vem depois da sinopse porque é o que o cliente faz DEPOIS de decidir que quer ver. Ciano:
   é informação, não ação principal — o botão de copiar é que resolve. */
.onde{margin-top:14px;padding:12px 14px;border-radius:14px;
  background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.22)}
.onde-linha{display:flex;align-items:center;gap:11px}
.onde-linha .rot{display:block;font-size:10.5px;letter-spacing:.16em}
.onde-linha b{font-family:'Exo 2',Inter,sans-serif;font-size:16px;color:#fff}
.copiar-nome{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:10px;min-height:44px;border-radius:12px;font-size:13.5px;font-weight:600;
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.3);color:var(--ciano)}

/* outras qualidades do mesmo canal — informação secundária, nunca competindo com o número */
.canal .outras-q{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.canal .outras-q i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--fraca);
  background:var(--pelicula-media);border:1px solid var(--linha);border-radius:6px;padding:2px 6px;
  font-variant-numeric:tabular-nums}
/* a lupa dentro do campo de canal, igual à do catálogo */
#aba-canais .campo-busca input{margin-top:0;padding-left:42px}

/* 04/08 (Pires) — botão de suporte no card principal. Verde do WhatsApp, mas SECUNDÁRIO: o
   primário continua sendo pagar. Número visível dentro do botão dá confiança de que tem gente
   do outro lado. Antes o contato da revenda só existia no rodapé, em letra pequena. */
/* 06/08 — era um bloco var(--zap) CHEIO, o elemento mais chamativo da tela inicial. Dois
   problemas de uma vez:
     · o verde do WhatsApp encostava no verde de "em dia" da régua de vencimento, e dois verdes
       diferentes no mesmo cartão fazem cor nenhuma significar coisa alguma;
     · a saída pra FORA do app era mais alta que qualquer ação DENTRO dele, o contrário da
       meta de atender 99% aqui.
   Continua inteiro e com o número visível — só parou de gritar. O verde vive agora no ícone e
   na borda, que é onde ele identifica o canal sem disputar hierarquia. */
.suporte-zap{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  margin-top:.6rem;padding:.85rem 1rem;border-radius:14px;font-weight:600;font-size:.95rem;min-height:52px;
  color:var(--zap-tinta);background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.38);
  text-decoration:none;line-height:1.2}
.suporte-zap .icf{color:var(--zap)}
.suporte-zap:active{transform:translateY(1px);background:rgba(37,211,102,.17)}
.suporte-zap:focus-visible{outline:2px solid var(--zap);outline-offset:3px}
.suporte-zap .icf{width:20px;height:20px;flex:0 0 20px}
.suporte-zap b{font-weight:700;white-space:nowrap}

/* 04/08 — botão "ver a tela do cliente" no cartão da revenda (modo visualização). */
.ver-cliente{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  margin:.2rem 0 .9rem;padding:.8rem 1rem;border-radius:14px;font-weight:600;font-size:.93rem;
  color:#cfe9ff;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.35);cursor:pointer}
.ver-cliente .icf{width:20px;height:20px;flex:0 0 20px}

/* ---------- outros planos (05/08) ----------
   O `.secundario` não existe como estilo próprio (o botão do suporte é verde por causa do
   .suporte-zap). Sem classe própria o botão saía como caixa cinza com o ícone por cima do texto. */
.outro-plano{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  margin-top:.55rem;padding:.75rem 1rem;border-radius:14px;line-height:1.2;
  font-size:.9rem;font-weight:650;cursor:pointer;box-shadow:none;
  background:var(--pelicula-media);border:1px solid var(--linha);color:var(--tinta);
}
.outro-plano:active{transform:translateY(1px)}
.outro-plano .ic{width:20px;height:20px;flex:0 0 20px}

   O link do Gestor cobra o plano ATUAL. Quem quer 3 meses escolhe aqui, sem chamar o suporte. */
.planos-lista{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:10px}
/* "quero outro plano" usa o MESMO cartão — era o único lugar com marcação própria, e por isso
   a mesma lista de planos tinha duas aparências dentro do app. */
.plano-op.escolhido{border-color:var(--linha-quente);background:var(--superficie-alta)}
.plano-op.atual{opacity:.55;cursor:default}
.plano-op.atual .plano-preco::after{content:' · atual';font-size:10px;color:var(--fraca);font-weight:600}
.planos-nota{font-size:11.5px;color:var(--fraca);line-height:1.45;margin-top:2px}

/* saída discreta do wizard de primeira entrada: presente, nunca competindo com o "Continuar" */
.bv-agora-nao{display:block;margin:18px auto 8px;padding:12px 18px;min-height:44px;
  background:none;border:0;color:var(--tinta-fraca);font:inherit;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bv-agora-nao:active{opacity:.6}


/* ═══════════════ ALVO DE TOQUE (auditoria 06/08) ═══════════════
 * A auditoria mediu 31 controles abaixo de 44px — o mínimo da Apple e a causa nº1 de
 * "cliquei e não foi". Dois remédios, escolhidos por caso:
 *
 *   1. onde crescer NÃO estraga o desenho (chip, aba, atalho) → cresce de verdade;
 *   2. onde crescer estragaria (link de texto, quadradinho de cor, sino sobre a capa) →
 *      cresce só a ÁREA DE TOQUE com um ::after invisível, e o elemento fica do tamanho que é.
 *
 * O ::after é `pointer-events:none` no pai? NÃO — ele precisa receber o toque; por isso o pai
 * ganha `position:relative` e o ::after fica ATRÁS do conteúdo (z-index:-1 não serve em pai com
 * fundo, então fica sem z-index e o conteúdo continua clicável por cima). */

/* 1) cresceram de verdade */
.atalhos button,                 /* buscas rápidas dos Canais */
.chat-atalhos button,            /* sugestões do chat de suporte */
#filtroApps button,              /* escolher o app na aba Tutoriais */
.abas .aba{ min-height:44px; }
.abas .aba{ padding-left:14px; padding-right:14px; }

/* 2) só a área de toque cresceu */
.pe a,                           /* "ainda não sou cliente", "instalar depois", "já sou cliente" */
.cores button,                   /* quadradinhos de cor do perfil */
.sino{ position:relative; }
.pe a::after,
.cores button::after,
.sino::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:44px;border-radius:12px;
}
/* o ::after do sino não pode tapar o cartão inteiro nem virar alvo do que está atrás */
.sino::after{ width:44px; }