/* Tema próprio sobre o Bootstrap 5.3 (alternância via data-bs-theme). Sem fontes ou recursos externos. */
:root {
  --marca-1: #7c3aed;
  --marca-2: #2563eb;
  --grad: linear-gradient(135deg, var(--marca-1), var(--marca-2));
  --raio: 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #070b18;
  --bs-body-color: #e6e9f5;
  --bs-secondary-color: #a4abc4;
  --superficie: #0e1427;
  --superficie-2: #141c36;
  --borda: rgba(148, 163, 255, 0.16);
}
[data-bs-theme="light"] {
  --bs-body-bg: #f5f6fb;
  --superficie: #ffffff;
  --superficie-2: #eef0fa;
  --borda: rgba(30, 41, 90, 0.14);
}
body { min-height: 100vh; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: #fff; color: #000; padding: .5rem 1rem; }
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

.texto-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-marca { background: var(--grad); color: #fff; border: 0; font-weight: 600; box-shadow: 0 .5rem 1.5rem rgba(99, 70, 237, .35); }
.btn-marca:hover, .btn-marca:focus { color: #fff; filter: brightness(1.1); }
.btn-marca:disabled { opacity: .6; }
.navbar { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent); border-bottom: 1px solid var(--borda); }
.logo { font-weight: 800; letter-spacing: -.02em; }

/* Hero estilo catálogo de streaming: mural de capas geradas em CSS (sem imagens de terceiros), com vinheta escura */
.hero { position: relative; overflow: hidden; padding: 7rem 0 6rem; isolation: isolate; min-height: min(86vh, 46rem); display: flex; align-items: center; background: #05070f; }
.hero-conteudo { position: relative; z-index: 2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70rem 36rem at 25% 50%, rgba(5, 7, 15, .92), rgba(5, 7, 15, .55) 60%, rgba(5, 7, 15, .8)),
    linear-gradient(180deg, rgba(5, 7, 15, .85) 0%, transparent 30%, transparent 60%, var(--bs-body-bg) 100%); }
.hero h1, .hero .lead { text-shadow: 0 2px 24px rgba(0, 0, 0, .7); }
.hero .lead { color: #d5d9ee !important; }
.hero-sobre { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.hero-ponto { width: .55rem; height: .55rem; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 .6rem rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.mural { position: absolute; inset: -12% -8%; z-index: 0; display: grid; align-content: center; gap: 1rem; transform: rotate(-8deg) scale(1.1); opacity: .75; }
.linha-mural { overflow: hidden; }
.faixa { display: flex; gap: 1rem; width: max-content; animation: rolar 90s linear infinite; }
.linha-mural.volta .faixa { animation-direction: reverse; animation-duration: 110s; }
@keyframes rolar { to { transform: translateX(-50%); } }
.capa { position: relative; flex: 0 0 auto; width: 9.5rem; aspect-ratio: 2 / 3; border-radius: .6rem; overflow: hidden; box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .55); }
.capa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .28), transparent 35%), linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .75)); }
.capa::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 22%; height: 38%; border-radius: 50% 50% 0 0 / 80% 80% 0 0; background: rgba(0, 0, 0, .35); }
.capa span { position: absolute; left: .6rem; bottom: .55rem; z-index: 1; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #000; }
.c0 { background: linear-gradient(160deg, #e50914, #3b0509); } .c1 { background: linear-gradient(160deg, #2563eb, #0b1b4d); }
.c2 { background: linear-gradient(160deg, #f59e0b, #5a2a05); } .c3 { background: linear-gradient(160deg, #7c3aed, #1e0a4d); }
.c4 { background: linear-gradient(160deg, #10b981, #03352a); } .c5 { background: linear-gradient(160deg, #ec4899, #4a0b2c); }
.c6 { background: linear-gradient(160deg, #06b6d4, #06323d); } .c7 { background: linear-gradient(160deg, #64748b, #0f172a); }
.c8 { background: linear-gradient(160deg, #f97316, #4a1a02); } .c9 { background: linear-gradient(160deg, #84cc16, #1d3305); }
.c10 { background: linear-gradient(160deg, #a855f7, #2e0f4d); } .c11 { background: linear-gradient(160deg, #ef4444, #1f0a0a); }
@media (max-width: 767.98px) { .hero { padding: 5rem 0 4rem; min-height: 0; } .capa { width: 6.5rem; } .mural { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .faixa, .hero-ponto { animation: none; } }
.hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.cartao-plano { height: 100%; display: flex; flex-direction: column; padding: 1.5rem; transition: transform .2s, border-color .2s; }
.cartao-plano:hover { transform: translateY(-4px); border-color: var(--marca-1); }
.cartao-plano.destaque { border: 1px solid transparent; background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--grad) border-box; box-shadow: 0 1rem 3rem rgba(99, 70, 237, .25); }
.preco { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.selo { display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--grad); color: #fff; }
.icone-bolha { width: 2.75rem; height: 2.75rem; border-radius: .8rem; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; }
.passos { counter-reset: passo; }
.passo::before { counter-increment: passo; content: counter(passo); width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--grad); color: #fff; font-weight: 700; margin-right: .6rem; }

.etapas { display: flex; gap: .5rem; flex-wrap: wrap; }
.etapas .etapa { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--borda); color: var(--bs-secondary-color); font-size: .9rem; }
.etapas .etapa.ativa { background: var(--grad); color: #fff; border-color: transparent; }
.etapas .etapa.feita { border-color: var(--marca-1); color: var(--bs-body-color); }
.pix-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-all; max-height: 7rem; overflow: auto; }
.qr { background: #fff; padding: .75rem; border-radius: .75rem; display: inline-block; }
.qr svg, .qr img { display: block; width: 220px; height: 220px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--superficie-2); border-radius: .5rem; min-height: 1rem; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); animation: brilho 1.4s infinite; }
@keyframes brilho { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } .cartao-plano { transition: none; } * { scroll-behavior: auto !important; } }

/* Toasts */
#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 3000; display: grid; gap: .5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.toast-msg { padding: .75rem 1rem; border-radius: .75rem; color: #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); animation: entra .2s ease-out; }
.toast-msg.success { background: #15803d; } .toast-msg.danger { background: #b91c1c; } .toast-msg.info { background: #1d4ed8; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

footer.rodape { border-top: 1px solid var(--borda); }
footer a, .link-discreto { color: var(--bs-secondary-color); text-decoration: none; }
footer a:hover, .link-discreto:hover { color: var(--bs-body-color); text-decoration: underline; }

/* Administração */
.admin-lateral { width: 15rem; flex: 0 0 15rem; background: var(--superficie); border-right: 1px solid var(--borda); min-height: 100vh; position: sticky; top: 0; align-self: flex-start; }
.admin-lateral .nav-link { color: var(--bs-secondary-color); border-radius: .6rem; }
.admin-lateral .nav-link.active, .admin-lateral .nav-link:hover { color: #fff; background: var(--grad); }
.kpi { padding: 1rem 1.25rem; } .kpi .valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.tabela-admin { --bs-table-bg: transparent; }
.tabela-admin th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); white-space: nowrap; }
dialog.modal-admin { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--bs-body-color); width: min(46rem, calc(100vw - 2rem)); max-height: 90vh; padding: 0; }
dialog.modal-admin::backdrop { background: rgba(3, 6, 20, .7); }
dialog.modal-admin .corpo { padding: 1.25rem; overflow: auto; max-height: calc(90vh - 4rem); }
@media (max-width: 991.98px) {
  .admin-lateral { position: static; width: 100%; flex-basis: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--borda); }
  .admin-lateral .nav { flex-direction: row !important; flex-wrap: wrap; }
}
.form-control, .form-select { background-color: var(--superficie-2); border-color: var(--borda); }
.hero h1 { color: #fff; }
@media (max-width: 767.98px) { .hero::before { background: linear-gradient(180deg, rgba(5, 7, 15, .9), rgba(5, 7, 15, .75) 60%, var(--bs-body-bg)); } }
.capa.com-imagem { background: #111; }
.capa.com-imagem::before, .capa.com-imagem::after { display: none; }
.capa.com-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

/* ===== Página inicial (home): visual de catálogo de streaming ===== */
.home .navbar { background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent); }
.home .logo { font-size: 1.25rem; }
.home .hero { min-height: min(92vh, 54rem); padding: 8rem 0 7rem; }
.home .hero h1 { font-size: clamp(2.4rem, 6.2vw, 4.3rem); line-height: 1.05; letter-spacing: -.035em; max-width: 14ch; }
.home .hero .lead { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 38rem; line-height: 1.55; }
.home .hero .btn-lg { padding: .85rem 1.9rem; font-size: 1.1rem; border-radius: .8rem; }
.home .hero .btn-marca { box-shadow: 0 .75rem 2.2rem rgba(99, 70, 237, .55); transition: transform .2s, box-shadow .2s, filter .2s; }
.home .hero .btn-marca:hover { transform: translateY(-2px); box-shadow: 0 1rem 2.6rem rgba(99, 70, 237, .7); }
.hero-selos { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 1.9rem 0 0; padding: 0; color: #d5d9ee; font-size: .92rem; justify-content: center; }
@media (min-width: 768px) { .hero-selos { justify-content: flex-start; } }
.hero-selos li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-selos svg, .hero-rolar svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-selos svg { color: #34d399; }
.hero-rolar { position: absolute; left: 50%; bottom: 1.4rem; z-index: 3; transform: translateX(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); animation: pula-seta 2s ease-in-out infinite; }
.hero-rolar svg { width: 1.4rem; height: 1.4rem; }
@keyframes pula-seta { 50% { transform: translate(-50%, 6px); } }

.secao-cab { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.secao-cab h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; margin: .35rem 0 .6rem; }
.secao-cab p { color: var(--bs-secondary-color); margin: 0; }
.kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a78bfa; }
[data-bs-theme="light"] .kicker { color: var(--marca-1); }

/* Passo a passo */
.home .passos > li { position: relative; }
.home .passos .cartao { padding: 1.75rem 1.5rem !important; border-radius: 1.1rem; position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.home .passos .cartao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.home .passos .cartao:hover { transform: translateY(-5px); border-color: var(--marca-1); box-shadow: 0 1rem 2.4rem rgba(99, 70, 237, .22); }
.home .passos h3.passo { display: block; font-size: 1.15rem; font-weight: 700; }
.home .passos h3.passo::before { display: grid; width: 3rem; height: 3rem; margin: 0 0 1rem; font-size: 1.25rem; box-shadow: 0 .5rem 1.4rem rgba(99, 70, 237, .45); }
@media (min-width: 992px) { .home .passos > li:not(:last-child)::after { content: ""; position: absolute; top: 3.2rem; right: -1.1rem; width: 1.4rem; border-top: 2px dashed var(--marca-1); opacity: .55; z-index: 2; } }

/* Aparelhos */
.dispositivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; max-width: 58rem; margin: 0 auto; }
.dispositivo { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.4rem 1rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 1rem; font-weight: 600; text-align: center; transition: transform .25s, border-color .25s; }
.dispositivo:hover { transform: translateY(-4px); border-color: var(--marca-1); }
.dispositivo svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: #8b7cf6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Dúvidas */
.home .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: var(--superficie-2); --bs-accordion-active-color: var(--bs-body-color); --bs-accordion-btn-bg: var(--superficie); --bs-accordion-btn-color: var(--bs-body-color); }
.home .accordion-item { border: 1px solid var(--borda) !important; border-radius: .9rem !important; margin-bottom: .75rem; overflow: hidden; background: var(--superficie); }
.home .accordion-button { font-weight: 600; padding: 1.1rem 1.25rem; }
.home .accordion-button:not(.collapsed) { box-shadow: none; color: var(--bs-body-color); }
.home .accordion-body { color: var(--bs-secondary-color); padding-top: .25rem; }

/* Chamada final */
.chamada-final { position: relative; overflow: hidden; text-align: center; color: #fff; padding: clamp(2.2rem, 6vw, 4rem) 1.5rem; border-radius: 1.6rem; background: var(--grad); box-shadow: 0 1.5rem 4rem rgba(99, 70, 237, .35); }
.chamada-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40rem 20rem at 85% -20%, rgba(255, 255, 255, .28), transparent 60%), radial-gradient(30rem 16rem at 0 120%, rgba(0, 0, 0, .25), transparent 60%); }
.chamada-final > * { position: relative; }
.chamada-final h2 { font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.chamada-final p { opacity: .9; font-size: 1.1rem; margin-bottom: 1.6rem; }
.chamada-final .btn-light { font-weight: 700; color: #3b2bb0; border-radius: .8rem; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .25); }

/* Botão fixo (só no celular, depois do topo) */
.cta-fixo { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1500; text-align: center; padding: .9rem; border-radius: .9rem; font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; background: var(--grad); box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .5); }
.cta-fixo[hidden] { display: none; }
@media (min-width: 768px) { .cta-fixo { display: none !important; } }

/* Entrada ao rolar */
.js .reveal, .js .passos > li, .js .dispositivo, .js #lista-faq .accordion-item { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visivel, .js .passos > li.visivel, .js .dispositivo.visivel, .js #lista-faq .accordion-item.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-rolar { animation: none; } .js .reveal, .js .passos > li, .js .dispositivo, .js #lista-faq .accordion-item { transition: none; } }

/* Rodapé */
.home .rodape { background: var(--superficie); margin-top: 3rem !important; padding: 2.2rem 0 !important; }
.home .rodape strong { font-size: 1.1rem; }
@media (max-width: 767.98px) { .home { padding-bottom: 4.8rem; } } /* espaço para o botão fixo não cobrir o rodapé */

/* Banners em destaque: o mural fica bem visível; só a área do texto (esquerda) e a base escurecem, para manter a leitura. */
.home .hero .mural { opacity: 1; filter: saturate(1.1); }
.home .hero::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 15, .88) 0%, rgba(5, 7, 15, .6) 38%, rgba(5, 7, 15, .12) 70%, rgba(5, 7, 15, 0) 100%),
    linear-gradient(180deg, rgba(5, 7, 15, .55) 0%, transparent 22%, transparent 70%, var(--bs-body-bg) 100%);
}
.home .capa { box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .6); }
@media (max-width: 767.98px) {
  .home .hero::before { background: linear-gradient(180deg, rgba(5, 7, 15, .72) 0%, rgba(5, 7, 15, .5) 55%, var(--bs-body-bg) 100%); }
}