/* ═══ Mago dos Canais — visual do site (home aprovada pelo dono em 13/10/2026) ═══════════════
   Letreiro de cinema: faixas largas sobre o preto da marca; o dourado só onde decide (preço,
   botão, grátis x Premium). Usado pela home (index.php) e pelos tutoriais (tutoriais.php).
   Mockup aprovado: mockups/site-home-2026-10.html. Ícone = Bootstrap Icons, nunca emoji. */
:root{
  --noite:#0c0b09; --veludo:#16140f; --veludo2:#1f1c15; --linha:rgba(217,176,68,.18);
  --ouro:#d9b044; --ouro-claro:#f1d27a; --pergaminho:#f2ebdd; --nevoa:#a8a091; --gratis:#4cc38a;
  --f-titulo:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-texto:"Figtree","Segoe UI",system-ui,sans-serif;
  --raio:14px;
  /* nomes que o widget do MagiBot já usava */
  --mago-gold:var(--ouro); --mago-gold-strong:var(--ouro-claro); --mago-muted:var(--nevoa);
  --mago-text:var(--pergaminho); --mago-border:var(--linha); --mago-shadow:0 24px 60px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noite);color:var(--pergaminho);font-family:var(--f-texto);font-size:16px;line-height:1.55;margin:0;overflow-x:hidden}
.pagina{padding-inline:clamp(16px,4vw,48px);padding-block:0 32px;max-width:1180px;margin:0 auto}
h1,h2,h3{font-family:var(--f-titulo);text-wrap:balance;margin:0;line-height:1.08}
p{margin:0}
a{color:var(--ouro-claro)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:6px}
.hidden{display:none!important}
.rotulo{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);font-weight:700}
.bi{line-height:1}

/* Topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(12,11,9,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.topo-in{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,48px);padding-block:14px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--pergaminho)}
.marca img{width:34px;height:34px;border-radius:50%}
.marca span{color:var(--ouro)}
.nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--nevoa);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--pergaminho)}
.topo-acoes{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--f-texto);font-size:.98rem}
.btn-ouro{background:linear-gradient(135deg,var(--ouro-claro),var(--ouro));color:#17130a}
.btn-linha{border-color:var(--linha);color:var(--pergaminho);background:transparent}
.btn-linha:hover{border-color:var(--ouro);color:var(--pergaminho)}
.btn-zap{background:#25d366;color:#06301a}
.btn-zap:hover{background:#1fbe5a;color:#06301a}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s,border-color .15s}.btn:hover{transform:translateY(-1px)}}

/* Faixas */
.faixa{padding-block:44px;border-top:1px solid var(--linha)}
.faixa > header{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.faixa h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800}
.faixa .intro{color:var(--nevoa);max-width:62ch}

/* Rodapé (com o aviso de direitos: mora aqui pra aparecer em toda página) */
.rodape{border-top:1px solid var(--linha);margin-top:20px}
.rodape-in{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,48px);padding-block:28px;display:grid;gap:18px}
.rodape-links{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;color:var(--nevoa);font-size:.92rem}
.rodape-links a{color:var(--nevoa);text-decoration:none}
.rodape-links a:hover{color:var(--pergaminho)}
.rodape-links strong{color:var(--pergaminho);font-family:var(--f-titulo)}
.aviso-direitos{color:var(--nevoa);font-size:.82rem;line-height:1.6;display:grid;gap:8px;max-width:90ch}

@media (max-width:520px){
  .nav{order:3;width:100%;gap:16px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;white-space:nowrap}
  .topo-in{gap:10px 12px;padding-block:10px}
  .marca{font-size:1rem;gap:8px}.marca img{width:30px;height:30px}
  .topo-acoes{margin-left:auto;gap:8px}
  .topo-acoes .btn{min-height:42px;padding:8px 14px;font-size:.92rem}
  .btn-conta .txt{display:none}
  .nav{scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
}

/* ═══ Home ═══════════════════════════════════════════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--veludo);border:1px solid var(--linha);font-size:.86rem;color:var(--pergaminho);text-decoration:none}
.chip .bi{color:var(--ouro)}
.acoes{display:flex;gap:12px;flex-wrap:wrap}

.abertura{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:44px 28px}
.abertura h1{font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.02em;margin-top:12px}
.abertura h1 em{font-style:normal;color:var(--ouro)}
.abertura .sub{color:var(--nevoa);font-size:1.12rem;margin-top:18px;max-width:52ch}
.abertura .acoes{margin-top:26px}
.aparelhos-linha{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}

/* A TV com a tela inicial do app, desenhada em CSS (nada de foto de título com direito alheio) */
.tv{background:#050504;border:10px solid #23201a;border-bottom-width:14px;border-radius:16px;max-width:100%;padding:14px;display:grid;gap:10px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px var(--linha)}
.tv-dest{border-radius:10px;padding:14px;min-height:150px;background:linear-gradient(90deg,rgba(5,5,4,.92) 30%,rgba(5,5,4,.2)),linear-gradient(135deg,#3b2a12,#7a4b17 45%,#1d3a52);display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.tv-dest b{font-family:var(--f-titulo);font-size:clamp(1rem,2.2vw,1.5rem)}
.tv-dest small{color:var(--gratis);font-weight:700;font-size:.72rem}
.tv-fila{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:6px}
.cartaz{aspect-ratio:2/3;border-radius:6px;position:relative;overflow:hidden}
.cartaz::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.c1{background:linear-gradient(160deg,#5b1f1f,#1a0b0b);outline:2px solid var(--ouro);outline-offset:1px}.c2{background:linear-gradient(160deg,#1f3d5b,#0b131a)}.c3{background:linear-gradient(160deg,#4a4a1a,#14140a)}.c4{background:linear-gradient(160deg,#3d1f5b,#120b1a)}.c5{background:linear-gradient(160deg,#1f5b45,#0b1a14)}
.tv-rotulo{font-size:.72rem;color:var(--nevoa)}

.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lado{border-radius:var(--raio);padding:22px;background:var(--veludo);border:1px solid var(--linha)}
.lado.premium{background:linear-gradient(160deg,rgba(217,176,68,.14),var(--veludo) 55%)}
.lado h3{font-size:1.25rem;display:flex;align-items:center;gap:10px}
.lado h3 .bi{color:var(--ouro)}
.lado.gratis h3 .bi{color:var(--gratis)}
.lado p.quem{color:var(--nevoa);margin-top:6px;font-size:.95rem}
.lista-itens{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lista-itens li{display:flex;align-items:center;gap:10px;font-weight:600}
.lista-itens .bi{font-size:1.15rem;color:var(--ouro)}
.gratis .lista-itens .bi{color:var(--gratis)}

.grupos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.grupo h3{font-size:1.15rem;display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--linha);margin-bottom:12px}
.grupo h3 .bi{color:var(--ouro)}
.grupo dl{margin:0;display:grid;gap:12px}
.grupo dt{font-weight:700}
.grupo dd{margin:2px 0 0;color:var(--nevoa);font-size:.95rem}
.novo{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#17130a;background:var(--ouro);border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:2px;font-weight:800}

.reino{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;border-radius:var(--raio);padding:24px;background:linear-gradient(120deg,#1d2a1a,var(--veludo) 60%);border:1px solid rgba(76,195,138,.28);margin-top:30px}
.reino .castelo{width:64px;height:64px;border-radius:16px;background:rgba(76,195,138,.15);display:grid;place-items:center;color:var(--gratis);font-size:2rem}
.reino h3{font-size:1.35rem}
.reino p{color:var(--nevoa);margin-top:6px;max-width:66ch}
.reino .brinde{font-family:var(--f-titulo);font-weight:800;color:var(--gratis);font-size:1.05rem;white-space:nowrap}

.seg{display:inline-flex;background:var(--veludo);border:1px solid var(--linha);border-radius:999px;padding:4px;flex-wrap:wrap;margin-bottom:18px}
.seg button{background:transparent;border:0;color:var(--nevoa);font:600 .92rem var(--f-texto);padding:8px 14px;border-radius:999px;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--ouro);color:#17130a}
.planos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plano{border-radius:var(--raio);padding:20px;background:var(--veludo);border:1px solid var(--linha);display:flex;flex-direction:column;gap:6px}
.plano.mais{border-color:var(--ouro);background:linear-gradient(170deg,rgba(217,176,68,.16),var(--veludo) 60%)}
.plano .tit{font-family:var(--f-titulo);font-weight:800;font-size:1.15rem}
.plano .mes{font-family:var(--f-titulo);font-weight:800;font-size:2rem;font-variant-numeric:tabular-nums;color:var(--ouro-claro)}
.plano .mes small{font-size:.9rem;color:var(--nevoa);font-weight:600}
.plano .total{font-size:.88rem;color:var(--nevoa);font-variant-numeric:tabular-nums}
.plano .eco{font-size:.88rem;color:var(--gratis);font-weight:600;min-height:1.4em;font-variant-numeric:tabular-nums}
.plano .marca-mais{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro);font-weight:800;min-height:1.1em}
.plano .btn{margin-top:8px}
.garantias{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:18px;color:var(--nevoa);font-size:.92rem}
.garantias span{display:inline-flex;align-items:center;gap:8px}
.garantias .bi{color:var(--gratis)}
.subir{margin-top:14px;color:var(--nevoa);font-size:.92rem}

.aparelhos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.aparelho{border-radius:var(--raio);padding:20px;background:var(--veludo);border:1px solid var(--linha);display:flex;flex-direction:column;gap:10px}
.aparelho > .bi{font-size:1.9rem;color:var(--ouro)}
.aparelho h3{font-size:1.08rem}
.aparelho p{color:var(--nevoa);font-size:.93rem}
.aparelho code{font-family:var(--f-texto);font-weight:700;color:var(--ouro-claro)}
.aparelho .links{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.aparelho .links a{font-weight:700;text-decoration:none}

.ajuda{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start}
.ajuda-txt p{color:var(--nevoa);margin-top:8px}
.ajuda-txt .acoes{margin-top:18px}

@media (max-width:900px){
  .abertura,.ajuda{grid-template-columns:minmax(0,1fr)}
  .planos,.aparelhos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grupos,.duas{grid-template-columns:minmax(0,1fr)}
  .reino{grid-template-columns:auto minmax(0,1fr)}
  .reino .brinde{grid-column:1/-1}
}
@media (max-width:520px){
  .planos,.aparelhos,.lista-itens{grid-template-columns:minmax(0,1fr)}
  .tv-fila{grid-template-columns:repeat(4,minmax(0,1fr))}.tv-fila .cartaz:nth-child(5){display:none}
  .acoes .btn{width:100%}
}

/* ═══ Widget do MagiBot (visitante) — o mesmo da home antiga e do /conta/ ═════════════════ */
.mb-box{display:flex;flex-direction:column;min-height:420px}
.mb-box {
    background: linear-gradient(180deg, rgba(22, 22, 25, .94), rgba(14, 14, 17, .94));
    border: 1px solid var(--mago-border); border-radius: 22px;
    box-shadow: var(--mago-shadow); overflow: hidden;
    display: flex; flex-direction: column; min-height: 440px;
}
.mb-head {
    display: flex; align-items: center; gap: 10px; padding: 15px 18px;
    background: linear-gradient(135deg, rgba(226, 185, 59, .18), rgba(226, 185, 59, .04));
    border-bottom: 1px solid var(--mago-border);
}
.mb-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #241a00; }
.mb-head-title { font-weight: 800; color: var(--mago-gold-strong); line-height: 1.2; }
.mb-head-sub { color: var(--mago-muted); font-size: .78rem; }
.mb-body { padding: 18px; overflow: auto; flex: 1; }
.mb-thread { display: flex; flex-direction: column; gap: 9px; }
.mb-hi { color: var(--mago-muted); font-size: .92rem; margin: 0 0 14px; }
.mb-row { display: flex; gap: 9px; align-items: flex-start; }
.mb-row.me { justify-content: flex-end; }
.mb-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 30px; background: #241a00; border: 1px solid rgba(226, 185, 59, .25); }
.mb-col { min-width: 0; max-width: 82%; display: flex; flex-direction: column; }
.mb-who { font-size: .72rem; color: var(--mago-gold-strong); font-weight: 700; margin: 0 0 2px 3px; }
.mb-msg { padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.45; word-break: break-word; }
.mb-msg.me { background: linear-gradient(135deg, var(--mago-gold-strong), #c89617); color: #1a1400; border-bottom-right-radius: 4px; }
.mb-msg.them { background: rgba(255, 255, 255, .04); color: var(--mago-text); border: 1px solid rgba(226, 185, 59, .12); border-bottom-left-radius: 4px; }
.mb-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.mb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mago-muted); animation: mbtype 1.2s infinite; }
.mb-typing span:nth-child(2) { animation-delay: .18s; }
.mb-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes mbtype { 0%, 60%, 100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }
.mb-campo {
    background: rgba(27, 27, 31, .9); border: 1px solid rgba(226, 185, 59, .18);
    color: var(--mago-text); border-radius: 12px; padding: 12px 14px; width: 100%;
    min-height: 46px; font-size: 1rem;
}
.mb-campo:focus { border-color: var(--mago-gold); outline: none; box-shadow: 0 0 0 3px rgba(226, 185, 59, .15); }
.mb-campo::placeholder { color: #6f6a60; }
.mb-rotulo { color: var(--mago-muted); font-size: .82rem; font-weight: 600; margin-bottom: 5px; display: block; }
.mb-btn {
    background: linear-gradient(135deg, var(--mago-gold-strong), #c89617); color: #111;
    border: none; font-weight: 800; border-radius: 12px; padding: 13px 20px;
    min-height: 48px; cursor: pointer; width: 100%;
}
.mb-btn:hover { background: linear-gradient(135deg, #f4d46a, var(--mago-gold)); }
.mb-composer { display: flex; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--mago-border); }
.mb-composer .mb-campo { flex: 1; }
.mb-enviar {
    background: linear-gradient(135deg, var(--mago-gold-strong), #c89617); color: #111;
    border: none; border-radius: 12px; width: 48px; min-height: 46px; cursor: pointer; font-size: 1rem;
}
.mb-err { color: #fca5a5; font-size: .86rem; margin-bottom: 9px; }
.mb-card{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.05);border-radius:12px;padding:8px;margin-top:6px}
.mb-card-capa{width:46px;height:68px;object-fit:cover;border-radius:7px;flex:0 0 46px;background:#000}
.mb-card-txt{min-width:0}
.mb-card-tit{font-weight:700;font-size:.88rem;line-height:1.25;color:var(--mago-text)}
.mb-card-meta{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:.76rem}
.mb-card-ano{color:var(--mago-muted)}
.mb-card-nota{color:var(--mago-gold-strong);font-weight:800;display:inline-flex;align-items:center;gap:3px}
.mb-card-sin{color:var(--mago-muted);font-size:.76rem;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Quem já conversou antes: diz de quem é a conversa, e deixa recomeçar. */
.mb-eu {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 18px; border-bottom: 1px solid rgba(226, 185, 59, .12);
    color: var(--mago-muted); font-size: .8rem;
}
.mb-trocar {
    background: none; border: none; color: var(--mago-gold-strong);
    font-size: .8rem; font-weight: 600; cursor: pointer; padding: 6px 4px;
    text-decoration: underline; min-height: 32px;
}
/* Botão do WhatsApp: verde do próprio WhatsApp, e não dourado. É a única coisa da
   página que leva pra FORA dela, e essa diferença tem que ser visível. */
.zap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: #25d366; color: #06301a !important; font-weight: 800;
    border-radius: 12px; padding: 13px 20px; min-height: 48px; width: 100%;
    border: none; text-decoration: none;
}
.zap-btn:hover { background: #1fbe5a; color: #06301a !important; }
.zap-btn i { font-size: 1.15rem; }
@keyframes mbtype { 0%, 60%, 100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

.plano[hidden]{display:none}

/* ═══ Tutoriais (tutoriais.php + assets/pages/tuto-*.php) ═══════════════════════════════ */
.tuto{padding-block:36px 8px}
.tuto > header{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.tuto h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800}
.tuto .intro{color:var(--nevoa);max-width:64ch}
.tuto .voltar{display:inline-flex;align-items:center;gap:6px;color:var(--nevoa);text-decoration:none;font-weight:600;font-size:.92rem}
.tuto .voltar:hover{color:var(--pergaminho)}
.passos{list-style:none;padding:0;margin:0;display:grid;gap:18px;counter-reset:passo}
.passo{counter-increment:passo;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center;border-radius:var(--raio);padding:20px;background:var(--veludo);border:1px solid var(--linha)}
.passo.so-texto{grid-template-columns:minmax(0,1fr)}
.passo-txt{display:grid;gap:8px}
.passo-txt h3{font-size:1.18rem;display:flex;align-items:baseline;gap:12px}
.passo-txt h3::before{content:counter(passo);font-family:var(--f-titulo);font-weight:800;color:#17130a;background:var(--ouro);border-radius:999px;min-width:30px;height:30px;display:inline-grid;place-items:center;font-size:.95rem;flex:none}
.passo-txt p{color:var(--nevoa)}
.passo-txt strong{color:var(--pergaminho)}
.passo-txt code{font-family:var(--f-texto);font-weight:800;color:var(--ouro-claro);background:var(--veludo2);padding:1px 7px;border-radius:6px}
.passo-img{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.passo-img img{border-radius:10px;border:1px solid var(--linha);max-height:360px;width:auto;max-width:100%;object-fit:contain;background:#000}
.passo-img.duas img{max-width:calc(50% - 5px)}
.nota{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;background:var(--veludo2);color:var(--nevoa);font-size:.93rem}
.nota .bi{color:var(--ouro);margin-top:3px}
.tuto-depois{margin-top:30px}

/* Escolha do aparelho */
.seletor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.seletor a{border-radius:var(--raio);padding:22px;background:var(--veludo);border:1px solid var(--linha);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--pergaminho)}
.seletor a:hover{border-color:var(--ouro)}
.seletor .bi{font-size:2rem;color:var(--ouro)}
.seletor b{font-family:var(--f-titulo);font-size:1.12rem}
.seletor span{color:var(--nevoa);font-size:.92rem}
.seletor em{font-style:normal;margin-top:auto;color:var(--ouro-claro);font-weight:700}

/* O player do vídeo da Android TV traz o próprio estilo (mp-*); aqui só o lugar dele */
.tuto-video{margin-bottom:22px}
#tutoriais .container{max-width:none;padding:0;background:none;border:0;box-shadow:none}

@media (max-width:900px){.seletor{grid-template-columns:repeat(2,minmax(0,1fr))}.passo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.seletor{grid-template-columns:minmax(0,1fr)}.passo-img.duas img{max-width:100%}}