/*
 * ARQUIVO: public/assets/css/novo_visual.css
 * MÓDULO: Visual — o NOVO VISUAL do designer (Etapa 1: Início — VERSÃO 5, 17/10/2026), por enquanto só na página de teste /novo.
 * FAZ: a aparência do Início novo — a v2 copia o Início da "Maratona" (o protótipo que o dono aprovou) medida por medida:
 *      cabeçalho com o logo em letras, carrossel de 6 slides, faixas, capas, Top 10, catálogo; a v3/v4 traz a TELA BUSCAR
 *      (a seção 13, do pacote v4 do designer, sem mudança — menos as 2 regras da Ajuda na Minha conta). A página /novo carrega este
 *      arquivo NO LUGAR do site.css (as outras telas continuam com o site.css de hoje). Três partes:
 *        A. as VARIÁVEIS NOVAS do desenho (o bloco "NOVO VISUAL" que o designer pôs no fim do tokens.css dele, com as medidas
 *           da Maratona --mt-* e a Montserrat 900 do arquivo de fonte que o site já tem). Ficam aqui, e não no tokens.css,
 *           porque o tokens.css do site é a cópia fiel do design system (o VisualTest confere): quando o dono aprovar, o bloco
 *           entra no design system e volta pelo local/copiar_design.php;
 *        B. o CSS do designer (o novo_visual.css v5 do pacote dele — a v5 só muda o Top 10 das Tendências: o número atrás da
 *           capa, como na Netflix, e a capa do tamanho das outras faixas) sem mudança, MENOS o painel "Seus créditos" do
 *           individual (o dono tirou do Início — 18/10: o saldo fica no selo do Perfil) e A BARRA DE BAIXO: o desenho dos itens
 *           é o de hoje (o dono — 18/10, D317: os 4 itens Início · Buscar · Do anúncio · Perfil, partes/barra_novo.php). A
 *           seção 9 é a da v1, e as regras da v2 que a levavam para o topo no computador (o item 7 do LEIA-ME,
 *           body:not(.vitrine) .barra…) e o "vidro da Maratona" ficaram de fora; sem elas, no computador o fim da página
 *           guarda o lugar da barra, como no celular;
 *        C. o COMPLEMENTO feito no site: as peças do Início que o desenho ainda não cobre (os botões que o home.js cria, os
 *           avisos com o Pix e o cartão, a oferta do Telegram com o "+21 mil séries", o "Abrir no Chrome", a Minha conta e o
 *           Meus pedidos como o site monta; a tela Buscar com a barra que fica embaixo também no computador; o Pedir série,
 *           o Indique e a Ajuda dentro da Minha conta; a aba "📣 Do anúncio" — C16; os números das faixas e o selo "Novo" — C17; o catálogo com 3 por linha — C18) — provisório, com as medidas da v2, para o
 *           designer redesenhar.
 * RECEBE: nada (usa as variáveis do tokens.css, que a página carrega antes).
 * DEVOLVE: o estilo da página /novo.
 * DEPENDE: public/assets/css/tokens.css (antes deste, pelo resources/views/layout.php), public/assets/fonts/montserrat.woff2,
 *          resources/views/home_novo.php, resources/views/partes/(banners_novo, card_novo, barra_novo, meus_pedidos,
 *          planos_compra, oferta_home, faixa_chrome).php,
 *          public/assets/js/(comum, home, relogio, oferta_home, buscar, anuncio).js (as classes que eles põem e tiram).
 */

/* ==========================================================================
   A. VARIÁVEIS NOVAS — o bloco "NOVO VISUAL" do fim do tokens.css do designer (v2), sem mudança
   ========================================================================== */
:root {
  /* Fundo ainda mais "Netflix": preto puro com superfícies um tom acima */
  --bg-app: #000000;
  --surface-card: #0E0E11;
  --surface-raised: #141418;

  /* Vidro (cabeçalho ao rolar, barra de baixo, janelas) */
  --vidro-fundo: rgba(20, 20, 24, .72);
  --vidro-borda: rgba(255, 255, 255, .08);
  --vidro-desfoque: blur(20px) saturate(1.6);

  /* Capas */
  --capa-raio: var(--radius-lg);          /* 12px */
  --capa-proporcao: 2 / 3;                /* pôster em pé */
  --capa-sombra: 0 10px 28px rgba(0, 0, 0, .65);
  --capa-largura: 112px;                  /* largura da capa nas faixas, no celular */
  --capa-largura-pc: 160px;               /* no computador */

  /* Destaque (banners) */
  --banner-raio: var(--radius-2xl);       /* 22px */
  --banner-brilho: radial-gradient(120% 120% at 10% 0%, rgba(225, 29, 72, .28), transparent 60%);

  /* Ranking das Tendências (número gigante vazado) */
  --ranking-tamanho: 96px;
  --ranking-contorno: rgba(255, 255, 255, .85);

  /* v2 — as medidas da Maratona (o Início copia o protótipo aprovado) */
  --mt-fundo: #000000;
  --mt-fundo-2: #121212;
  --mt-texto: #f5f5f5;
  --mt-apagado: #9a9a9a;
  --mt-vermelho: #e11d48;
  --mt-vermelho-2: #f43f5e;
  --mt-margem: clamp(16px, 4vw, 56px);   /* margem dos lados: 16 px no celular, até 56 px no computador */
}

/* v2 — Montserrat 900 (o peso do logo e do nome no destaque). Mesmo arquivo do site: ele é "variável"
   e já tem o peso 900 dentro; só faltava avisar o navegador. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/montserrat.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   B. O CSS DO DESIGNER (v2 + a seção 13 da v4) — sem mudança daqui até a parte C, MENOS a barra de baixo (a seção 9 é a da v1)
   ========================================================================== */
/*
 * NOVO VISUAL v2 (etapa 1: Início) — o novo_visual.css do pacote do designer
 * FEITO EM: 17/10/2026. A v2 copia o Início da "Maratona" (o protótipo aprovado pelo dono) medida por medida:
 *   cabeçalho, filtros, carrossel com 6 slides, busca, faixas, capas, ranking, catálogo, botão flutuante e barra de baixo.
 * USA: as variáveis do tokens.css + o bloco "NOVO VISUAL" do fim dele (as medidas da Maratona estão lá com o nome --mt-*).
 * REGRAS DO SITE: sem nada de fora (fontes e imagens do próprio site), sem style="" no HTML, celular primeiro (360 px).
 * NOMES: os IDs, data-* e classes que o JavaScript usa continuam iguais (guia, seção 2). Classes novas são só de enfeite.
 * TAMANHOS DE TELA: igual à Maratona — celular até 800 px; computador a partir de 801 px; tela grande a partir de 1101 px.
 *
 * Organização:
 *   1. Base            6. Busca e resultados
 *   2. Botões e campos 7. Faixas e capas (+ ranking)
 *   3. Cabeçalho       8. Catálogo, "ver tudo" e botão flutuante
 *   4. Filtros         9. Barra de baixo
 *   5. Carrossel      10. Janelas  11. Avisos  12. Computador
 */

/* ========== 1. Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mt-fundo);
  color: var(--mt-texto);
  font: var(--text-body-default);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.com-janela, body.com-fileira { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.escondido, [hidden] { display: none !important; }

.conteudo {
  /* espaço do cabeçalho fixo em cima e da barra de baixo flutuante (como na Maratona: 70 px no celular, 78 px no PC) */
  padding: calc(70px + env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom));
}

/* ========== 2. Botões e campos ========== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 48px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-full);
  font: var(--fw-bold) var(--fs-body-lg)/1 var(--font-sans);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.botao:active { transform: scale(.97); }
.botao:disabled { opacity: .6; cursor: default; }
.botao-primario { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.botao-primario:hover { background: var(--brand-hover); }
.botao-secundario { background: var(--neutral-soft); color: var(--text-strong); border: 1px solid var(--border-default); margin-top: var(--space-3); }
.botao-texto { background: none; color: var(--text-muted); text-decoration: underline; min-height: 40px; }

.campo { display: grid; gap: 6px; margin-bottom: var(--space-3); }
.campo span { font: var(--text-label); color: var(--text-muted); }
.campo input {
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-input); color: var(--text-strong);
  font: var(--fw-medium) var(--fs-body-lg) var(--font-sans);
}
.campo input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-ring); }

/* ========== 3. Cabeçalho (cliente) — a barra do topo da Maratona ========== */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 24px;
  padding: calc(12px + env(safe-area-inset-top)) var(--mt-margem) 12px;
  /* no celular a barra é sempre de vidro escuro (igual à Maratona) */
  background: rgba(6, 6, 6, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .3s, box-shadow .3s;
}
/* .topo-solido: o home.js põe ao rolar */
.topo.topo-solido {
  background: rgba(6, 6, 6, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.marca { display: flex; align-items: center; flex: none; min-height: 40px; }
/* Logo em letras (como o "MARATONA"): Montserrat 900, vermelho, maiúsculas */
.logo-texto {
  font: 900 22px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--mt-vermelho); white-space: nowrap;
}
/* O nome da tela continua no HTML (leitor de tela), mas some da vista — a Maratona não mostra */
.topo-titulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topo-acoes form { display: contents; }
.topo-botao {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); background: none;
  display: grid; place-items: center; color: #fff; cursor: pointer;
}
.topo-botao svg { width: 22px; height: 22px; }
/* Minha conta = o quadradinho do perfil da Maratona (vermelho, cantos 18%) */
.topo-avatar {
  width: 32px; height: 32px; border-radius: 18%;
  background: linear-gradient(145deg, hsl(350 75% 55%), hsl(350 70% 38%));
}
.topo-avatar svg { width: 70%; height: 70%; }

/* Contador "⏳ Faltam X dias" (7 últimos dias). Vermelho nos 2 últimos. */
.topo-dias {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 5px 10px; border-radius: var(--radius-full);
  background: var(--warning-soft); color: var(--warning-fg);
  font: var(--fw-bold) var(--fs-caption)/1 var(--font-sans); white-space: nowrap;
}
.topo-dias.topo-dias-urgente { background: var(--brand-soft); color: var(--text-brand); animation: pulsar 1.6s var(--ease-in-out) infinite; }
.topo-dias-longo { display: none; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 4px var(--brand-soft); } }
/* celular com o contador aparecendo: o logo diminui e a lupa sai (a busca está logo abaixo), para caber tudo em 360 px */
@media (max-width: 440px) {
  .topo:has(.topo-dias) { gap: 8px; }
  .topo:has(.topo-dias) .logo-texto { font-size: 16px; letter-spacing: .02em; }
  .topo:has(.topo-dias) .topo-acoes { gap: 4px; }
  .topo:has(.topo-dias) .topo-botao[href="#busca"] { display: none; }
}

/* ========== 4. Filtros (pílulas) ========== */
.filtros {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--mt-margem); scroll-padding: 0 var(--mt-margem);
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-full);
  background: #0d0d0d; color: var(--mt-texto);
  font: 600 14px/normal var(--font-sans); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filtro.ativo { background: #fff; color: #000; border-color: #fff; font-weight: 700; }

/* ========== 5. Carrossel (o "destaque" da Maratona) ========== */
.banners {
  position: relative; margin: 12px var(--mt-margem) 8px; border-radius: 18px; overflow: hidden;
  background: #000; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}
.banners-trilho { display: flex; transition: transform var(--dur-slow) var(--ease-in-out); }
.banner { flex: 0 0 100%; min-width: 0; position: relative; }

/* Slide 1 — Novidades: mosaico de capas (5×2 no celular, 10 numa linha no computador) */
.banner-novidades {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 14px 44px;
  background: radial-gradient(120% 120% at 10% 0%, #3a0714, #0a0a0a 60%);
}
.novidades-titulo { font: 700 16px/1.25 var(--font-display); color: var(--mt-texto); margin-bottom: 14px; }
.novidades-capas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.novidades-capas .novidade {
  padding: 0; border: 0; background: var(--mt-fundo-2); cursor: pointer;
  aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  transition: transform .2s; animation: crescer .5s ease backwards;
}
.novidades-capas .novidade:nth-child(2n) { animation-delay: .05s; }
.novidades-capas .novidade:nth-child(3n) { animation-delay: .1s; }
.novidades-capas .novidade:hover { transform: translateY(-4px) scale(1.03); }
.novidades-capas .novidade img { width: 100%; height: 100%; object-fit: cover; }
@keyframes crescer { from { opacity: 0; transform: translateY(14px); } }

/* Slides 2 a 6 — série bombando: fundo desfocado, nome grande, botões e a capa inclinada */
.banner-destaque {
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 24px;
  min-height: clamp(400px, 46vw, 540px); padding: 20px 20px 40px; overflow: hidden; background: #000;
}
.destaque-fundo { position: absolute; inset: -40px; filter: blur(38px) saturate(1.3); opacity: .55; }
.destaque-fundo img { width: 100%; height: 100%; object-fit: cover; }
.banner-destaque::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .85) 40%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, .6)),
              linear-gradient(to top, rgba(0, 0, 0, .7), transparent 45%);
}
.destaque-info, .destaque-capa { position: relative; z-index: 1; }
.destaque-info { max-width: 620px; display: grid; gap: 14px; text-align: center; justify-items: center; min-width: 0; }
.destaque-selo { font: 800 13px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mt-vermelho-2); }
.destaque-nome {
  font: 900 clamp(34px, 5vw, 64px)/.95 var(--font-display); letter-spacing: -.02em; color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .5); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.destaque-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  font: 600 15px/1.3 var(--font-sans); color: var(--mt-texto);
}
.destaque-meta > span + span::before { content: "•"; margin-right: 10px; color: var(--mt-apagado); }
/* Etiqueta de idioma do destaque (a "audio-tag" da Maratona): vermelha no Dublado, branca nos outros */
.destaque-idioma {
  padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #000;
  font: 800 12px/1.3 var(--font-sans); letter-spacing: .03em; text-transform: uppercase;
}
.destaque-idioma.idioma-dublado { background: var(--mt-vermelho); color: #fff; }
.destaque-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.destaque-assistir, .destaque-mais {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 26px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  font: 600 17px/normal var(--font-sans);
  transition: transform .15s ease, background-color .15s ease;
}
.destaque-assistir:hover, .destaque-mais:hover { transform: scale(1.03); }
.destaque-assistir { background: #fff; color: #000; }
.destaque-assistir:hover { background: #e8e8e8; }
.destaque-assistir svg { width: 22px; height: 22px; fill: currentColor; }
.destaque-mais { background: rgba(140, 145, 160, .35); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.destaque-mais:hover { background: rgba(140, 145, 160, .5); }
/* A capa em pé, inclinada (em cima no celular, à direita no computador) */
.destaque-capa {
  grid-row: 1; justify-self: center; width: 46vw; max-width: 220px;
  padding: 0; border: 0; cursor: pointer; background: var(--mt-fundo-2);
  aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(2deg); transition: transform .3s;
}
.destaque-capa:hover { transform: rotate(0) scale(1.03); }
.destaque-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque-capa::after { content: ""; position: absolute; inset: 70% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }
.destaque-capa .card-idioma { top: 8px; bottom: auto; }
.destaque-premio {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; text-align: center;
  padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 12px/1.3 var(--font-sans); color: #fff;
}

/* Bolinhas = as barrinhas da Maratona. O home.js acende o .ponto.ativo; a barrinha ativa vai enchendo em 5 s
   (o mesmo tempo que o home.js leva para passar o slide). */
.banners-pontos {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.ponto {
  position: relative; width: 26px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .3); transition: width .3s;
}
.ponto.ativo { width: 44px; background: rgba(255, 255, 255, .45); }
.ponto.ativo::after {
  content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left;
  animation: encher 5s linear forwards;
}
@keyframes encher { from { transform: scaleX(0); } }

/* ========== 6. Busca e resultados ========== */
.busca {
  display: flex; align-items: center; gap: 10px;
  margin: 18px var(--mt-margem) 4px; padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  background: #0f0f10; color: var(--mt-apagado);
  transition: border-color .15s, color .15s;
}
.busca:hover, .busca:focus-within { border-color: rgba(255, 255, 255, .3); color: #fff; }
.busca svg { width: 20px; height: 20px; flex: none; }
.busca input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: #fff;
  font: 400 15px/normal var(--font-sans);
}
.busca input::placeholder { color: var(--mt-apagado); }
.busca:hover input::placeholder { color: #fff; }
.resultados { padding: 18px 0 8px; }
.busca-esperta { margin: 0 var(--mt-margem) var(--space-4); padding: var(--space-4); border-radius: 12px; background: var(--mt-fundo-2); border: 1px solid rgba(255, 255, 255, .12); }
.busca-esperta-texto { font: var(--fw-semibold) var(--fs-body-lg)/var(--lh-snug) var(--font-sans); color: var(--text-strong); margin-bottom: var(--space-3); }
.busca-destaque { display: flex; gap: var(--space-3); align-items: center; }
.busca-destaque-info { display: grid; gap: var(--space-1); }
.grade-vazia { grid-column: 1 / -1; padding: 30px var(--mt-margem); text-align: center; color: var(--mt-apagado); }

/* ========== 7. Faixas e capas ========== */
#principal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.faixa { position: relative; min-width: 0; }
.faixa-topo { display: flex; align-items: baseline; gap: 14px; padding: 0 var(--mt-margem); margin-bottom: 8px; }
.faixa-topo h2 { margin: 0; }
/* Título da faixa + "Ver tudo ›" do lado (o "ver tudo" é do comum.js; o texto vem do CSS e não entra no título) */
.faixa-ver {
  display: inline-flex; align-items: baseline; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 clamp(17px, 1.6vw, 21px)/1.25 var(--font-display); color: var(--mt-texto);
}
.faixa-ver::after { content: "Ver tudo ›"; font: 600 14px/1 var(--font-sans); color: var(--mt-apagado); white-space: nowrap; }
.faixa-ver:hover::after { color: #fff; }
.faixa-seta { display: none; }
/* Fileira: 3,3 capas no celular, 5 no computador, 7 na tela grande (as mesmas contas da Maratona) */
.faixa-linha {
  display: grid; grid-auto-flow: column; gap: 10px;
  grid-auto-columns: calc((100% - 2 * var(--mt-margem) - 20px) / 3.3);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px var(--mt-margem) 22px; scroll-padding: 0 var(--mt-margem); scroll-snap-type: x mandatory;
}
.faixa-linha::-webkit-scrollbar { display: none; }
.faixa-linha > * { scroll-snap-align: start; }

/* A capa (desenhada pelo home.js: button.card > img.capa + .card-sem-capa + .card-titulo + .card-idioma) */
.card {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; text-align: left;
  aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; outline-offset: 3px;
  background: var(--mt-fundo-2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* sombrinha embaixo da foto (a .art--photo da Maratona) */
.card::after { content: ""; position: absolute; inset: 70% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }
/* 🎬 só aparece quando a imagem não carregou (o comum.js põe .quebrada) ou não existe */
.card-sem-capa { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; opacity: .55; }
.card .capa:not(.quebrada) ~ .card-sem-capa { display: none; }
.capa.quebrada { display: none; }
/* O nome já vem desenhado na capa; o texto fica para leitores de tela, para quando a capa falhar
   e (no computador) para o cartão que abre ao passar o mouse */
.card-titulo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 8px 26px;
  font: 700 12px/1.2 var(--font-sans); color: #fff; text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);
  clip-path: inset(50%); /* escondido visualmente */
}
.card .capa.quebrada ~ .card-titulo, .card:not(:has(.capa)) .card-titulo { clip-path: none; }
/* Etiqueta de idioma: pílula escura embaixo à esquerda (igual à Maratona, sem cor) */
.card-idioma {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  padding: 2px 6px; border-radius: var(--radius-full);
  background: rgba(0, 0, 0, .74); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 800 8px/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
}

/* Selo "Novo" (vermelho, no canto de cima) — só nas séries marcadas "nova", nas faixas que o PHP desenha */
.card-novo {
  position: absolute; top: 0; left: 0; z-index: 3; padding: 3px 8px; border-radius: 0 0 8px 0;
  background: var(--mt-vermelho); color: #fff; font: 700 10px/1.3 var(--font-sans);
}

/* Ranking das Tendências (Top 10) no estilo da Netflix: o número gigante vazado fica ATRÁS da capa —
   quase da altura dela, e a capa cobre o lado direito dele. Só CSS (counter).
   O tamanho do número acompanha a largura de cada item (container query: 150cqw = 1,5 × a largura da capa);
   em navegador antigo sem isso, fica um tamanho fixo de reserva (130 px). */
.faixa-ranking .faixa-linha { counter-reset: posicao; grid-auto-columns: calc((100% - 2 * var(--mt-margem) - 20px) / 2.3); }
.faixa-ranking .card {
  counter-increment: posicao; padding-left: 32%; aspect-ratio: auto; overflow: visible;
  background: none; border-radius: 0; transition: transform .2s; container-type: inline-size;
}
.faixa-ranking .card::before {
  content: counter(posicao); position: absolute; left: 0; bottom: 0; z-index: 1;
  font: 900 130px/.74 var(--font-display); font-size: 150cqw; letter-spacing: -.06em;
  transform: scaleX(.86); transform-origin: left bottom;   /* um pouco mais estreito, como o número da Netflix */
  color: var(--mt-fundo); -webkit-text-stroke: 2px rgba(255, 255, 255, .8);
}
/* o 10 tem dois algarismos: mais apertado e começando um pouco antes, para caber atrás da capa */
.faixa-ranking .card:nth-child(10)::before { left: -6%; transform: scaleX(.62); letter-spacing: -.1em; }
.faixa-ranking .card .capa {
  position: relative; display: block; z-index: 2; aspect-ratio: 2 / 3; height: auto; border-radius: 8px;
  box-shadow: -8px 0 16px rgba(0, 0, 0, .75);
}
.faixa-ranking .card::after { left: 32%; z-index: 2; border-radius: 0 0 8px 8px; }
.faixa-ranking .card-sem-capa, .faixa-ranking .card-titulo { left: 32%; }
.faixa-ranking .card-idioma { left: calc(32% + 6px); }
.faixa-ranking .card-novo { left: 32%; }

/* ========== 8. Catálogo, "ver tudo" e botão flutuante ========== */
.catalogo { padding: 30px var(--mt-margem) 10px; }
.catalogo-titulo { font: 700 22px/1.25 var(--font-display); color: var(--mt-texto); }
.grade-conta { font: 400 14px/1.3 var(--font-sans); color: var(--mt-apagado); margin: 4px 0 12px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 10px; }
.resultados .grade, .resultados .grade-conta { padding: 0 var(--mt-margem); }
/* Filtro escolhido (body.so-catalogo, posto pelo home.js): só o catálogo daquela categoria */
body.so-catalogo .banners, body.so-catalogo #principal > .faixa { display: none; }
body.so-catalogo .catalogo { padding-top: 18px; }

/* Tela "ver tudo" (criada pelo comum.js) */
.fileira-toda {
  position: fixed; inset: 0; z-index: var(--z-modal); overflow-y: auto; background: var(--mt-fundo);
  animation: subir var(--dur-slow) var(--ease-out);
}
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
.fileira-toda-topo {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-2);
  padding: calc(12px + env(safe-area-inset-top)) var(--mt-margem) 12px;
  background: rgba(6, 6, 6, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.fileira-toda-topo h2 { font: 700 clamp(17px, 1.6vw, 21px)/1.25 var(--font-display); color: var(--mt-texto); }
.fileira-toda-miolo { padding: 18px var(--mt-margem) 48px; }
.fileira-toda-miolo .grade-conta { margin-top: 0; }

/* Botão flutuante "🔥 +N séries" (leva ao catálogo). Fica embaixo das janelas. */
.fab {
  position: fixed; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: calc(var(--z-topbar) - 1);
  padding: 11px 18px; border-radius: var(--radius-full);
  background: var(--mt-vermelho); color: #fff; font: 800 14px/normal var(--font-sans);
  box-shadow: 0 10px 30px rgba(225, 29, 72, .45); transition: transform .2s;
}
.fab:hover { transform: translateY(-2px) scale(1.04); }

/* ========== 9. Barra de baixo — A DA V1, sem mudança (o dono não quer mudar a barrinha, 17/10) ========== */
.barra {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: var(--z-topbar); display: flex; gap: 2px; width: min(calc(100% - 20px), 440px); padding: 6px;
  border-radius: var(--radius-full); border: 1px solid var(--vidro-borda);
  background: var(--vidro-fundo); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--shadow-lg);
}
.barra-item {
  position: relative; flex: 1; min-width: 0; min-height: 50px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); cursor: pointer;
  font: var(--fw-semibold) 10.5px/1 var(--font-sans);
  transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.barra-item span { white-space: nowrap; }
.barra-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.barra-item:active { transform: scale(.94); }
.barra-item:hover { color: var(--text-strong); }
.barra-ativo { color: var(--text-strong); background: rgba(255, 255, 255, .12); }
.barra-ativo svg { stroke: var(--brand); }
.barra-bolinha, [data-ajuda-bolinha].com-bolinha::after {
  position: absolute; top: 6px; right: calc(50% - 16px); width: 9px; height: 9px;
  border-radius: var(--radius-full); background: var(--brand); box-shadow: 0 0 0 2px var(--ink-900);
}
[data-ajuda-bolinha].com-bolinha::after { content: ""; }
/* o que a v2 mudou em volta da barra, de volta como na v1: a cor do texto do <body> e o contorno do foco */
.barra { color: var(--text-body); }
.barra :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ========== 10. Janelas ========== */
.janela {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--surface-overlay); -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay));
  animation: aparecer var(--dur-base) var(--ease-out);
}
@keyframes aparecer { from { opacity: 0; } }
.janela-caixa {
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border-default); border-bottom: 0;
  border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  animation: subir var(--dur-slow) var(--ease-out);
}
.janela-centro { align-items: center; padding: var(--space-4); }
.janela-centro .janela-caixa { border-radius: var(--radius-2xl); border-bottom: 1px solid var(--border-default); text-align: center; }
.janela-alca { width: 40px; height: 4px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); background: var(--border-strong); }
.janela-titulo { font: var(--fw-bold) var(--fs-h5)/var(--lh-snug) var(--font-display); color: var(--text-strong); margin-bottom: var(--space-2); }
.janela-texto { color: var(--text-muted); line-height: var(--lh-normal); margin-bottom: var(--space-4); }
.janela-icone { display: block; font-size: 44px; margin-bottom: var(--space-2); }
.janela-secao { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.janela-secao h3 { font: var(--text-overline); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-3); }
.janela-fechar {
  display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-3); border: 0; border-radius: var(--radius-lg);
  background: none; color: var(--text-muted); font: var(--fw-semibold) var(--fs-body-lg) var(--font-sans); cursor: pointer;
}
.janela-fechar:hover { color: var(--text-strong); background: var(--neutral-soft); }

/* Minha conta */
.conta-cabeca { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.conta-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); }
.conta-avatar svg { width: 26px; height: 26px; }
.conta-titulo { font: var(--fw-bold) var(--fs-h5)/1.2 var(--font-display); color: var(--text-strong); }
.conta-usuario { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.conta-usuario b { color: var(--text-strong); font-family: var(--font-mono); }
.conta-plano {
  display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(225, 29, 72, .22), rgba(225, 29, 72, .04)); border: 1px solid rgba(225, 29, 72, .3);
}
.conta-etiqueta { justify-self: start; padding: 4px 10px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font: var(--fw-bold) var(--fs-caption)/1 var(--font-sans); }
.conta-validade { color: var(--text-body); font-size: var(--fs-sm); }
.conta-validade b { color: var(--text-strong); }
.lista-compras, .lista-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lista-compras li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-lg); background: var(--surface-card); font-size: var(--fs-sm);
}
.lista-compras b { color: var(--text-strong); }
.lista-compras small { color: var(--text-subtle); }
.form-senha .botao { margin-top: var(--space-1); }

/* Pedir série */
.campo-foto { display: block; margin-bottom: var(--space-3); cursor: pointer; }
.campo-foto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.campo-foto-botao {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong); color: var(--text-muted); font-weight: var(--fw-semibold);
}
.campo-foto:focus-within .campo-foto-botao { border-color: var(--border-focus); color: var(--text-strong); }
.pedir-previa { margin-top: var(--space-2); max-height: 160px; border-radius: var(--radius-md); }
.pedir-achou, .pedir-ok { text-align: center; padding: var(--space-2) 0; }
.pedir-achou-titulo { font: var(--fw-bold) var(--fs-h5)/1.3 var(--font-display); color: var(--text-strong); margin-bottom: var(--space-2); }
.pedir-ok-icone { display: block; font-size: 44px; margin-bottom: var(--space-2); }
.lista-pedidos li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-3);
  border-radius: var(--radius-lg); background: var(--surface-card);
}
.pedido-nome { color: var(--text-strong); font-weight: var(--fw-semibold); }
.pedido-quando { grid-row: 2; color: var(--text-subtle); font-size: var(--fs-caption); }
.pedido-situacao { grid-row: 1 / 3; grid-column: 2; padding: 4px 10px; border-radius: var(--radius-full); font: var(--fw-bold) var(--fs-caption)/1 var(--font-sans); }
.situacao-procurando { background: var(--warning-soft); color: var(--warning-fg); }
.situacao-chegou { background: var(--success-soft); color: var(--success-fg); }
.pedido-chegou { box-shadow: inset 3px 0 0 var(--success); }

/* Usar 1 crédito */
.credito-capa { width: 110px; aspect-ratio: var(--capa-proporcao); object-fit: cover; margin: 0 auto var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--capa-sombra); }
.credito-capa[src=""] { display: none; }

/* ========== 11. Avisos (faixas verde / vermelha / amarela) ========== */
#principal > .faixa-aviso, #principal > .faixa-ok, #principal > .faixa-erro, .aviso { margin: 0 var(--space-4); }
.faixa-aviso, .faixa-ok, .faixa-erro {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-lg); font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.faixa-aviso { background: var(--warning-soft); border-color: rgba(245, 165, 36, .35); color: var(--warning-fg); }
.faixa-ok { background: var(--success-soft); border-color: rgba(34, 184, 104, .35); color: var(--success-fg); }
.faixa-erro { background: var(--danger-soft); border-color: rgba(242, 86, 29, .35); color: var(--danger-fg); }
.janela .faixa-erro { margin-bottom: var(--space-3); }

/* ========== 12. Computador (801 px ou mais) e tela grande (1101 px ou mais) — os mesmos cortes da Maratona ========== */
@media (min-width: 801px) {
  .conteudo { padding-top: 78px; }
  /* no computador a barra do topo começa transparente e vira vidro ao rolar */
  .topo { background: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topo.topo-solido { background: rgba(6, 6, 6, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
  .topo-dias-longo { display: inline; }

  .banners { margin-top: 14px; border-radius: 24px; }
  .banner-novidades { padding: clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 28px) 48px; }
  .novidades-titulo { font-size: clamp(18px, 2.2vw, 26px); }
  .novidades-capas { grid-template-columns: repeat(10, 1fr); gap: 10px; }
  .banner-destaque { grid-template-columns: 1fr auto; padding: clamp(20px, 3.5vw, 48px); }
  .destaque-info { text-align: left; justify-items: start; }
  .destaque-meta, .destaque-botoes { justify-content: flex-start; }
  .destaque-capa { grid-row: auto; justify-self: auto; width: clamp(170px, 20vw, 270px); max-width: none; }
  /* barrinhas à esquerda, embaixo do texto; no mosaico (1º slide) ficam no meio, como na Maratona */
  .banners-pontos { left: clamp(20px, 3.5vw, 48px); right: auto; justify-content: flex-start; }
  .banners:has(.ponto:first-child.ativo) .banners-pontos { left: 0; right: 0; justify-content: center; }

  .faixa-linha { grid-auto-columns: calc((100% - 2 * var(--mt-margem) - 4 * 10px) / 5); padding-top: 14px; }
  .faixa-ranking .faixa-linha { grid-auto-columns: calc((100% - 2 * var(--mt-margem) - 3 * 10px) / 4); }
  .card-idioma { left: 8px; bottom: 8px; padding: 3px 8px; font-size: 9.5px; }
  .faixa-ranking .card-idioma { left: calc(32% + 8px); }

  .fab { right: 20px; bottom: calc(26px + env(safe-area-inset-bottom)); }


  .janela { align-items: center; padding: var(--space-6); }
  .janela-caixa { border-radius: var(--radius-2xl); border-bottom: 1px solid var(--border-default); }
  .janela-alca { display: none; }
}
@media (min-width: 1101px) {
  .faixa-linha { grid-auto-columns: calc((100% - 2 * var(--mt-margem) - 6 * 10px) / 7); }
  .faixa-ranking .faixa-linha { grid-auto-columns: calc((100% - 2 * var(--mt-margem) - 4 * 10px) / 5); }
}
/* Passar o mouse (só computador): a capa cresce, ganha contorno branco e mostra ▶ + nome por cima */
@media (min-width: 801px) and (hover: hover) {
  .card:hover, .card:focus-visible {
    transform: scale(1.08); z-index: 5;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .85), 0 0 0 2px rgba(255, 255, 255, .85);
  }
  .card-titulo {
    clip-path: none; inset: 0; z-index: 2; padding: 10px 10px 32px;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px;
    font-size: 14px; text-align: left; opacity: 0; transition: opacity .2s;
    background: linear-gradient(to top, rgba(0, 0, 0, .97) 10%, rgba(0, 0, 0, .75) 55%, rgba(0, 0, 0, .2));
  }
  /* o botão redondo branco ▶ da Maratona */
  .card-titulo::before {
    content: "▶"; width: 32px; height: 32px; flex: none; display: grid; place-items: center;
    border-radius: 50%; background: #fff; color: #000; font-size: 13px; padding-left: 2px;
  }
  .card:hover .card-titulo, .card:focus-visible .card-titulo { opacity: 1; }
  /* no Top 10 a capa só cresce um pouco (sem contorno e sem o cartão por cima), como na Maratona */
  .faixa-ranking .card:hover, .faixa-ranking .card:focus-visible { transform: scale(1.04); box-shadow: none; }
  .faixa-ranking .card-titulo { display: none; }
  .faixa-ranking .card .capa.quebrada ~ .card-titulo { display: flex; opacity: 1; }
  .card .capa.quebrada ~ .card-titulo, .card:not(:has(.capa)) .card-titulo { opacity: 1; }
}

/* ==========================================================================
   PEÇAS QUE MUDAM DE CLIENTE PARA CLIENTE (ver estados.html)
   ========================================================================== */

/* Aviso com botão à direita (renovar, vencido) */
.aviso-com-botao { align-items: center; }
.aviso-com-botao > span:nth-child(2) { flex: 1; }
.aviso-botao {
  flex: none; padding: 8px 14px; border-radius: var(--radius-full);
  background: var(--ink-0); color: var(--ink-1000); font: var(--fw-bold) var(--fs-sm)/1 var(--font-sans); white-space: nowrap;
}
.faixa-erro .aviso-botao { background: var(--brand); color: var(--on-brand); }

/* Faixa "Suas séries" (escolhidas) com o prazo de cada uma */
.escolhida { display: grid; gap: 6px; }
.escolhida-prazo {
  justify-self: center; padding: 3px 8px; border-radius: var(--radius-full);
  background: var(--success-soft); color: var(--success-fg); font: var(--fw-bold) var(--fs-micro)/1.2 var(--font-sans); white-space: nowrap;
}
.escolhida-prazo-urgente { background: var(--brand-soft); color: var(--text-brand); }
.faixa-escolhidas .faixa-ver { cursor: default; }
.faixa-escolhidas .faixa-ver::before { content: "▶"; color: var(--brand); font-size: .8em; }
.faixa-escolhidas .faixa-ver::after { content: none; }

/* Número na barra de baixo (créditos do individual) */
.barra-valor {
  position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--brand); color: var(--on-brand); font: var(--fw-black) 10px/1 var(--font-sans);
  box-shadow: 0 0 0 2px var(--ink-900);
}

/* Relógio: subir de plano pagando a diferença (relogio.js) */
.relogio-subida {
  margin: var(--space-2) var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius-xl);
  background: radial-gradient(120% 100% at 100% 0%, rgba(225, 29, 72, .35), transparent 60%), var(--surface-card);
  border: 1px solid rgba(225, 29, 72, .45); display: grid; gap: var(--space-3);
}
.relogio-subida-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.relogio-subida-selo { font: var(--fw-bold) var(--fs-caption)/1 var(--font-sans); color: var(--warning-fg); }
.relogio-subida-tempo {
  padding: 6px 10px; border-radius: var(--radius-md); background: var(--ink-1000); color: var(--text-strong);
  font: var(--fw-bold) var(--fs-body-lg)/1 var(--font-mono); letter-spacing: .04em; border: 1px solid var(--border-strong);
}
.relogio-subida-texto { color: var(--text-body); line-height: var(--lh-normal); }
.relogio-subida-texto b { color: var(--text-strong); }
.relogio-subida-fim { color: var(--text-muted); text-align: center; }
.relogio-acabou { opacity: .55; filter: grayscale(.6); }
.relogio-acabou .botao { pointer-events: none; }

/* Minha conta: cor do cartão do plano por situação */
.conta-plano-individual { background: linear-gradient(135deg, rgba(76, 141, 255, .2), rgba(76, 141, 255, .03)); border-color: rgba(76, 141, 255, .35); }
.conta-plano-individual .conta-etiqueta { background: var(--info); }
.conta-plano-teste { background: linear-gradient(135deg, rgba(245, 165, 36, .2), rgba(245, 165, 36, .03)); border-color: rgba(245, 165, 36, .35); }
.conta-plano-teste .conta-etiqueta { background: var(--warning); color: var(--ink-1000); }
.conta-plano-vencido { background: linear-gradient(135deg, rgba(242, 86, 29, .2), rgba(242, 86, 29, .03)); border-color: rgba(242, 86, 29, .35); }
.conta-plano-vencido .conta-etiqueta { background: var(--danger); }

/* Planos para comprar (partes/planos_compra.php) */
.planos-compra { display: grid; gap: var(--space-2); }
.plano {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-default);
}
.plano:first-child { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.plano-icone { font-size: 22px; }
.plano-info { display: grid; gap: 2px; }
.plano-info b { color: var(--text-strong); }
.plano-info small { color: var(--text-muted); font-size: var(--fs-caption); }
.plano-preco { font: var(--fw-black) var(--fs-body-lg)/1 var(--font-display); color: var(--text-strong); }
.plano-selo {
  position: absolute; top: -9px; right: var(--space-3); padding: 3px 8px; border-radius: var(--radius-full);
  background: var(--brand); color: var(--on-brand); font: var(--fw-black) var(--fs-micro)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-wide);
}

/* Quem pediu menos movimento no aparelho */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   13. TELA BUSCAR (v3) — a aba Buscar do app da Netflix (buscar.js)
   ========================================================================== */
/* A tela cobre o Início; a barra de baixo continua por cima (a aba "Buscar" fica acesa). */
.tela-buscar {
  position: fixed; inset: 0; z-index: calc(var(--z-topbar) - 1); overflow-y: auto; overscroll-behavior: contain;
  background: var(--mt-fundo); animation: aparecer .2s ease-out;
}
body.com-buscar { overflow: hidden; }
body.com-buscar .topo, body.com-buscar .fab { display: none; }
.tela-buscar-miolo { max-width: 960px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom)); }
.buscar-topo { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px 0 18px; }
.buscar-titulo { font: 800 28px/1.1 var(--font-display); color: #fff; letter-spacing: -.01em; }
.buscar-fechar svg { width: 24px; height: 24px; }

/* O campo: retângulo cinza de cantos arredondados, lupa à esquerda e o "x" de limpar à direita */
.buscar-campo {
  display: flex; align-items: center; gap: 10px; margin: 10px 11px 0; padding: 0 12px 0 14px; min-height: 44px;
  border-radius: 8px; background: #2f2f2f; color: #b3b3b3;
}
.buscar-campo > svg { width: 22px; height: 22px; flex: none; }
.buscar-campo input {
  flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: none; color: #fff;
  font: 400 16px/normal var(--font-sans); /* 16 px: o iPhone não dá zoom ao tocar */
  -webkit-appearance: none; appearance: none;
}
.buscar-campo input::placeholder { color: #a3a3a3; }
.buscar-campo input::-webkit-search-cancel-button { display: none; }
.buscar-limpar { flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #b3b3b3; cursor: pointer; display: grid; place-items: center; }
.buscar-limpar svg { width: 20px; height: 20px; fill: currentColor; }
.buscar-limpar svg path { stroke: var(--mt-fundo); stroke-width: 2; stroke-linecap: round; }

.buscar-secao { margin-top: 18px; }
.buscar-secao-titulo { padding: 0 14px; margin-bottom: 10px; font: 700 19px/1.25 var(--font-sans); color: #fff; }
.buscar-conta { padding: 0 14px; margin: -6px 0 10px; font: 400 13px/1.3 var(--font-sans); color: var(--mt-apagado); }

/* Selo "TOP 10" da Netflix no canto de cima à direita da capa (só se o site mandar o campo "top") */
.busca-top {
  position: absolute; top: 0; right: 6px; z-index: 3; display: grid; justify-items: center; padding: 3px 4px 4px;
  border-radius: 0 0 3px 3px; background: var(--mt-vermelho); color: #fff; font: 800 7px/1 var(--font-sans); letter-spacing: .02em;
}
.busca-top b { font-size: 12px; letter-spacing: -.02em; }

/* As séries em grade de capas grandes, em pé: 3 por linha no celular, de canto a canto (vazio e digitando) */
.buscar-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 10px; }
/* Não achou: a mensagem e o botão Pedir série */
.buscar-nada { padding: 34px 24px 6px; text-align: center; }
.buscar-nada h3 { font: 700 20px/1.3 var(--font-sans); color: #fff; margin-bottom: 8px; }
.buscar-nada p { color: var(--mt-apagado); line-height: 1.45; margin-bottom: 18px; }
.buscar-nada .botao { width: auto; display: inline-flex; padding: 0 26px; }
.buscar-aviso { padding: 0 14px 12px; color: var(--mt-apagado); line-height: 1.45; }
.buscar-aviso .botao { margin-top: 10px; }
/* (as 2 regras .conta-ajuda da v3 ficam de fora: a Ajuda continua na barra de baixo — o dono, 17/10) */

@media (min-width: 801px) {
  /* no computador o topo (com os links) continua à vista; a tela começa embaixo dele */
  body.com-buscar .topo { display: flex; }
  .tela-buscar-miolo { padding-top: 78px; padding-bottom: 40px; }
  .buscar-topo { padding-left: 14px; }
  .buscar-titulo { font-size: 34px; }
  .buscar-campo { min-height: 52px; margin-top: 14px; }
  .buscar-campo input { height: 52px; font-size: 17px; }
  .buscar-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 12px; padding: 0 14px; }
}


/* ==========================================================================
   C. COMPLEMENTO (feito no site, 17/10/2026) — as peças do Início que o desenho ainda não cobre.
   Provisório, com as variáveis do desenho e as medidas da v2 (a margem dos lados é a --mt-margem), para o designer
   redesenhar. Os nomes são os que o site já usa (resources/views/partes/*.php, o home.js e o comum.js) — não mudam.
   ========================================================================== */

/* C1. Botões, campos e o contador que o site monta como botão */
/* o home.js e as partes do site criam botões só com .botao (no site.css, o .botao já é o vermelho) */
.botao:where(:not(.botao-primario, .botao-secundario, .botao-texto)) { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.botao:where(:not(.botao-primario, .botao-secundario, .botao-texto)):hover { background: var(--brand-hover); }
/* o contador "⏳ Faltam X dias" (abre a Minha conta) e os botões dos avisos são botões de verdade */
button.topo-dias, button.aviso-botao { border: 0; cursor: pointer; }
/* o número da conta escondido que o celular usa para "Salvar senha?" (Minha conta → Trocar senha) */
.fora-da-tela { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.campo-senha6 input { font-family: var(--font-mono); letter-spacing: .5em; text-align: center; }

/* C2. Os avisos do alto do Início (um embaixo do outro) e os que têm o Pix e o cartão ali mesmo */
.aviso, .relogio-subida, .oferta-catalogo { margin-bottom: var(--space-3); }
/* a margem dos lados da v2 (a mesma do carrossel e da busca) e o respiro embaixo dos filtros (na v2 eles não têm) */
.aviso, .relogio-subida, .oferta-catalogo, .faixa-chrome { margin-left: var(--mt-margem); margin-right: var(--mt-margem); }
.filtros + :is(.aviso, .relogio-subida, .oferta-catalogo) { margin-top: 12px; }
.aviso-titulo { display: block; margin-bottom: 2px; }
.aviso a { text-decoration: underline; }
.aviso-com-botao { flex-wrap: wrap; }
.aviso-com-botao > span:nth-child(2) { flex: 1 1 180px; }
.aviso-acao { display: grid; justify-items: center; gap: var(--space-1); margin-left: auto; }
.aviso-cartao { font-size: var(--fs-caption); }

/* C3. "Libere o catálogo completo" (individual, oferta ligada) */
.oferta-catalogo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(225, 29, 72, .2), rgba(225, 29, 72, .03)), var(--surface-card);
  border: 1px solid rgba(225, 29, 72, .3);
}
.oferta-icone { font-size: 22px; }
.oferta-texto { flex: 1; display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.oferta-texto strong { color: var(--text-strong); font-size: var(--fs-body); }
.oferta-seta { font-weight: var(--fw-bold); color: var(--text-brand); }

/* C4. A faixa "Abrir no Chrome" (dentro do WhatsApp no Android — partes/faixa_chrome.php) */
.faixa-chrome {
  margin-top: 0; margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--brand);
}
.faixa-chrome p { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); }
.botao-chrome { margin-top: var(--space-3); }

/* C5. O relógio da subida: a compra (Pix) e o "ou pagar no cartão" */
.relogio-subida-compra { display: grid; gap: var(--space-2); justify-items: center; }
.relogio-subida-compra form { width: 100%; }
.relogio-subida-cartao { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline; }

/* C6. As capas do carrossel que não carregaram (o comum.js põe .quebrada): somem, como no site.css — fica o fundo escuro
   (o selo "Novo" da v1, o .card-marca, saiu: na v2 é o .card-novo do desenho — partes/card_novo.php) */
.banner img.quebrada { display: none; }

/* C7. O título da faixa "Séries liberadas agora" (individual): sem o "ver tudo" — são poucas */
.faixa-escolhidas-titulo {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 clamp(17px, 1.6vw, 21px)/1.25 var(--font-display); color: var(--mt-texto);   /* o título das faixas da v2 */
}
.faixa-escolhidas-titulo::before { content: "▶"; color: var(--brand); font-size: .8em; }

/* C8. A busca que acha (o home.js monta: "✅ Achamos", "É essa?", as parecidas) e a faixa "🔥 Em anúncio agora" */
.busca-esperta h3 { margin-bottom: var(--space-3); font: var(--fw-bold) var(--fs-h6)/var(--lh-snug) var(--font-display); color: var(--text-strong); }
.busca-esperta .grade { padding: 0; }
.busca-esperta > .botao { margin-top: var(--space-3); }
.busca-destaque { align-items: flex-start; }
.busca-destaque .card { flex: 0 0 38%; max-width: 160px; }
.busca-destaque-info { flex: 1; min-width: 0; }
.busca-destaque-info strong { color: var(--text-strong); font-size: var(--fs-body-lg); line-height: var(--lh-snug); }
.busca-destaque-info .botao { margin-top: var(--space-2); }
.busca-anuncio { margin-top: var(--space-3); }
.busca-anuncio .faixa-topo h2 { font: 700 clamp(17px, 1.6vw, 21px)/1.25 var(--font-display); color: var(--mt-texto); }

/* C9. O número dos créditos na "Conta" da barra (o .barra-valor do desenho; a barra é a partes/barra_cliente.php) */
.barra-selo {
  position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--brand); color: var(--on-brand); font: var(--fw-black) 10px/1 var(--font-sans);
  box-shadow: 0 0 0 2px var(--ink-900);
}

/* C10. Minha conta: as séries liberadas, as compras e "Meus dados" como o site monta */
.linha-serie { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.linha-serie + .linha-serie { border-top: 1px solid var(--border-subtle); }
.linha-serie-capa { width: 36px; flex: none; aspect-ratio: var(--capa-proporcao); border-radius: var(--radius-sm); object-fit: cover; }
.linha-serie-nome { flex: 1; min-width: 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-strong); }
.linha-serie-nome small { display: block; margin-top: 2px; color: var(--text-subtle); font-weight: var(--fw-medium); font-size: var(--fs-caption); }
.botao-mini {
  flex: none; padding: 8px 12px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand);
  font: var(--fw-bold) var(--fs-caption)/1 var(--font-sans); white-space: nowrap;
}
.garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.compra-convites { display: block; margin-top: 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-link); }
.dado {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); font-size: var(--fs-sm);
}
.dado span { color: var(--text-muted); }
.dado strong { color: var(--text-strong); }
.dado .dado-link { color: var(--text-link); font-weight: var(--fw-semibold); }
.dado + .dado, .dado + .dado-senha, .dado-senha + .dado { margin-top: var(--space-2); }
.dado-senha > summary { cursor: pointer; list-style: none; }
.dado-senha > summary::-webkit-details-marker { display: none; }
.dado-senha[open] .dado-link { opacity: .6; }
.dado-senha-form { margin-top: var(--space-3); }
.dado-dica { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.dado-dica a { color: var(--text-link); font-weight: var(--fw-semibold); }

/* C11. Os planos para comprar (partes/planos_compra.php): Pix · Cartão e cada plano é um botão */
.checkout-meios {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: var(--space-1);
  border-radius: var(--radius-full); background: var(--surface-sunken); border: 1px solid var(--border-default);
}
.checkout-meio { position: relative; padding: 10px 4px; border-radius: var(--radius-full); text-align: center; font-weight: var(--fw-bold); color: var(--text-muted); cursor: pointer; }
.checkout-meio input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.checkout-meio:has(input:checked) { background: var(--ink-0); color: var(--ink-1000); }
.checkout-meio:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
button.plano { width: 100%; text-align: left; cursor: pointer; color: var(--text-body); }
.plano-info strong { color: var(--text-strong); }
.plano-info span { color: var(--text-muted); font-size: var(--fs-caption); }
.plano-popular { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }

/* C12. Pedir série e Meus pedidos (partes/meus_pedidos.php — o mesmo HTML que o /pedir-serie/meus devolve) */
.janela .faixa-aviso { margin-bottom: var(--space-3); }
.janela-ou { margin: var(--space-2) 0; text-align: center; font-size: var(--fs-caption); color: var(--text-subtle); }
.janela-dica { margin-bottom: var(--space-3); text-align: center; font-size: var(--fs-caption); color: var(--text-subtle); }
.janela-dica span { color: var(--text-muted); }
.campo-foto { position: relative; }
.campo-foto small { display: block; margin-top: 4px; text-align: center; font-size: var(--fs-caption); color: var(--text-subtle); }
.pedir-achou { margin-bottom: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--success-soft); }
h4.janela-secao {
  margin-bottom: var(--space-3); font: var(--text-overline); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-subtle);
}
.janela-alca + .meus-pedidos > h4.janela-secao { margin-top: 0; padding-top: 0; border-top: 0; }
.meu-pedido-novo { margin: 0 calc(-1 * var(--space-3)); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--success-soft); }

/* C13. A oferta do Telegram no Início: o botão "+21 mil séries" e o popup (partes/oferta_home.php + oferta_home.js) —
   o desenho de hoje (site.css), com o botão acima da barra de baixo nova */
.of-botao {
  position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: var(--z-overlay); display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand);
  font: var(--fw-bold) 13.5px/1 var(--font-sans); letter-spacing: -.01em; box-shadow: 0 0 22px rgba(225, 29, 72, .45), var(--shadow-md);
}
.of-botao:active { transform: scale(.96); background: var(--brand-press); }
.of-fundo {
  position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(5, 5, 7, .9);
  -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay)); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.of-fundo.aberto { display: flex; }
.of-fundo.visivel { opacity: 1; }
.of-cartao {
  position: relative; width: 100%; max-width: 352px; max-height: 94vh; overflow-y: auto; padding: 30px 24px 22px; text-align: center;
  background: var(--gradient-brand-glow), var(--surface-sunken); border: 1.5px solid var(--brand); border-radius: var(--radius-2xl);
  box-shadow: 0 0 34px rgba(225, 29, 72, .34), var(--shadow-lg); transform: scale(.93); transition: transform var(--dur-slow) var(--ease-out);
}
.of-fundo.visivel .of-cartao { transform: scale(1); }
.of-x {
  position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full); background: var(--neutral-soft); color: var(--text-strong); cursor: pointer; padding: 0;
}
.of-x svg { width: 15px; height: 15px; }
.of-selo {
  display: inline-block; padding: 11px 26px; font: var(--fw-bold) 14px/1.2 var(--font-display); letter-spacing: .1em; color: var(--text-strong);
  border: 1.5px solid var(--brand); border-radius: var(--radius-full); box-shadow: 0 0 16px rgba(225, 29, 72, .4), inset 0 0 14px rgba(225, 29, 72, .14);
}
.of-titulo { margin-top: 22px; font: var(--fw-black) 52px/.98 var(--font-display); letter-spacing: -.035em; color: var(--text-strong); text-shadow: 0 0 26px rgba(255, 255, 255, .24); }
.of-titulo span { display: block; font-size: 47px; letter-spacing: -.045em; }
.of-quente {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px;
  font: var(--fw-black) 19px/1.2 var(--font-display); color: var(--text-brand); text-shadow: 0 0 18px rgba(225, 29, 72, .5);
}
.of-sub { margin-top: 13px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.of-lista { margin-top: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: rgba(255, 255, 255, .025); text-align: left; }
.of-item { display: flex; align-items: center; gap: 14px; padding: 15px 17px; font-size: 15.5px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.of-item + .of-item { border-top: 1px solid var(--border-subtle); }
.of-item svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--success); }
.of-item svg.of-ic-quente { color: var(--brand); }
.of-cta {
  display: block; margin-top: 22px; padding: 20px; border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand);
  font: var(--fw-black) 21px/1.2 var(--font-display); box-shadow: 0 0 26px rgba(225, 29, 72, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.of-cta:active { background: var(--brand-press); transform: scale(.98); }
.of-nao { display: block; width: 100%; margin: 16px 0 2px; padding: 4px; border: 0; background: none; color: var(--text-subtle); font-size: 16px; cursor: pointer; }
@media (max-width: 360px) { .of-titulo { font-size: 46px; } .of-titulo span { font-size: 41px; } .of-cta { font-size: 19px; padding: 18px; } }

/* C14. A tela Buscar (v4) no site: a barra de baixo fica embaixo também no computador (a seção 9 é a da v1), então o fim da
   tela guarda o lugar dela; e o botão "+21 mil séries" do Telegram some com a tela aberta, como o .fab do desenho */
body.com-buscar .of-botao { display: none; }
@media (min-width: 801px) {
  .tela-buscar-miolo { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* C15. O Pedir Série e o Indique dentro da Minha conta (saíram da barra — o dono, 17/10): as mesmas linhas do "Meus dados"
   (.dado), e a bolinha de "chegou série que você pediu" no "Pedir uma série" (some junto com a do Perfil, que o home.js tira
   ao abrir a janela Pedir série; sem :has() no navegador, ela só fica até recarregar) */
button.dado { width: 100%; text-align: left; cursor: pointer; }
.conta-bolinha {
  display: inline-block; width: 9px; height: 9px; margin-left: 8px; vertical-align: middle;
  border-radius: var(--radius-full); background: var(--brand); box-shadow: 0 0 0 2px var(--ink-900);
}
body:not(:has(#barra-pedido-chegou)) .conta-bolinha { display: none; }
/* no Perfil da barra, o selo dos créditos e a bolinha juntos: a bolinha vai para o outro lado do ícone */
.barra-selo ~ .barra-bolinha { right: auto; left: calc(50% - 16px); }

/* C16. A aba "📣 Do anúncio" (o dono, 18/10 — D317; anuncio.js): o desenho da tela Buscar (a mesma .tela-buscar, a grade de
   capas grandes, 3 por linha), só com as séries dos anúncios; com ela aberta, como na Buscar, o topo, o .fab e o botão do
   Telegram somem (no computador o topo fica). No fim, "Não achou a do seu anúncio?" com os dois botões, um embaixo do outro.
   E a bolinha da Ajuda, que veio para a Minha conta junto com a Ajuda (aparece até ela abrir a Ajuda pela 1ª vez — D305) */
body.com-anuncio { overflow: hidden; }
body.com-anuncio .topo, body.com-anuncio .fab, body.com-anuncio .of-botao { display: none; }
.anuncio-vazio { padding-top: 18px; }
.anuncio-nao-achou { padding-top: 30px; }
.anuncio-botoes { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.anuncio-botoes .botao { margin-top: 0; }
.conta-bolinha-ajuda {
  display: inline-block; width: 9px; height: 9px; margin-left: 8px; vertical-align: middle;
  border-radius: var(--radius-full); background: var(--brand); box-shadow: 0 0 0 2px var(--ink-900);
}
.conta-bolinha-ajuda[hidden] { display: none; }
@media (min-width: 801px) {
  body.com-anuncio .topo { display: flex; }
}

/* C17. As faixas do Front do Início (o dono, 18/10 — D318): os números 1, 2, 3… vão até a última série da faixa (o desenho
   só previa até o 10): do 11 em diante, o mesmo aperto do "10"; com 3 algarismos, mais apertado ainda. E na capa a cliente
   só vê Dublado ou Legendado: o selo "Novo" das marcadas Recém-chegada fica escondido (nas faixas e na tela Buscar) */
.faixa-ranking .card:nth-child(n+11)::before { left: -6%; transform: scaleX(.62); letter-spacing: -.1em; }
.faixa-ranking .card:nth-child(n+100)::before { left: -10%; transform: scaleX(.46); }
.card-novo { display: none; }
/* e o topo no celular: com o "?" da Ajuda (D317), os botões não cabiam (o Sair passava da beirada em 375 px). No celular o
   Sair sai do topo — a Minha conta tem o "Sair da conta" (e ninguém sai sem querer); com o contador "Faltam X dias", também
   o "?" sai (a Ajuda continua na Minha conta). No computador, tudo como antes */
@media (max-width: 440px) {
  .topo-acoes .form-sair { display: none; }
  .topo:has(.topo-dias) .topo-botao[href="/ajuda"] { display: none; }
}

/* C18. O catálogo do fim (o dono, 18/10 — D322: "colocar 3 séries de lado"): no celular, 3 capas por linha, como a tela
   Buscar (a ordem — a última cadastrada em cima — é o home.js que faz). No tablet e no computador, quantas couberem, como antes */
@media (max-width: 600px) {
  #catalogo-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
}

/* C19. A MOEDINHA do 🧪 teste da subida por +R$ 10 (D335 — o dono: "uma moedinha, no lado direito, no celular, na metade";
   D337: a PILHA DE CAPAS passando, o rascunho B): no meio da borda direita, as capas em leque (a da frente passa —
   moeda_subida.js), "+N séries por R$10" e o tempo; abre a janela do "Liberar agora"
   (resources/views/partes/moeda_subida.php — a mesma do site.css, para o Início novo, que usa este arquivo) */
.moeda-subida { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: var(--z-overlay); width: 80px; }
.moeda-subida[hidden] { display: none; }
.moeda-subida-botao {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 0; border: 0; background: none;
  font-family: var(--font-sans); line-height: 1.15; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.moeda-subida-botao:active { transform: scale(.95); }
/* o X (D338): tira da tela só nesta tela */
.moeda-subida-x {
  position: absolute; top: -12px; right: -2px; z-index: 5; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-strong); font-size: 12px; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-md); -webkit-appearance: none; appearance: none;
}
.moeda-subida-pilha { position: relative; display: block; width: 72px; height: 84px; }
.moeda-subida-capa {
  position: absolute; left: 50%; top: 4px; width: 50px; height: 72px; margin-left: -25px; object-fit: cover;
  border-radius: 7px; border: 1.5px solid var(--amber-400); background: var(--surface-raised); box-shadow: var(--shadow-md);
  opacity: 0; transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.moeda-subida-capa.p0 { opacity: 1; z-index: 3; transform: translateY(4px); }
.moeda-subida-capa.p1 { opacity: 1; z-index: 2; transform: translate(-11px, 2px) rotate(-12deg); }
.moeda-subida-capa.p2 { opacity: 1; z-index: 1; transform: translate(11px, 2px) rotate(12deg); }
.moeda-subida-capa.sai { opacity: 0; z-index: 4; transform: translate(-46px, 4px) rotate(-22deg); }
.moeda-subida-moeda { font-size: 34px; line-height: 1; }
.moeda-subida-faixa {
  display: block; padding: 3px 7px; border-radius: 10px; background: var(--brand); color: var(--on-brand);
  font-size: 10.5px; text-align: center; box-shadow: var(--shadow-md); animation: moeda-pulsar 2.4s ease-in-out infinite;
}
.moeda-subida-faixa b { display: block; font-size: 11.5px; font-weight: var(--fw-bold); }
.moeda-subida-tempo { padding: 1px 6px; border-radius: 8px; background: var(--surface-raised); font-size: 10.5px; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; color: var(--amber-400); }
.moeda-subida-selo { margin: 0 0 var(--space-2); font-size: .85rem; color: var(--warning-fg); }
.moeda-subida-selo b { font-variant-numeric: tabular-nums; }
.moeda-subida-caixa .botao { width: 100%; margin-top: var(--space-3); }
.moeda-subida-cartao { display: block; margin-top: var(--space-2); font-size: .85rem; color: var(--text-muted); }
/* o Pix DENTRO DA JANELA (D340): o código, os 3 passos e "Esperando o pagamento…"; caiu, "🎉 Catálogo liberado!" */
.moeda-subida-erro { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft);
  color: var(--danger-fg); font-size: .9rem; }
.moeda-subida-erro[hidden], .moeda-subida-pix[hidden], .moeda-subida-pronto[hidden], .moeda-subida-caixa .janela-fechar[hidden] { display: none; }
.moeda-subida-pix-valor { margin: var(--space-2) 0 0; font-size: 1rem; color: var(--text-strong); }
.moeda-subida-caixa .botao.copiado { background: var(--green-500); box-shadow: none; }
.moeda-subida-codigo { display: block; width: 100%; margin-top: var(--space-2); padding: 8px 10px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.moeda-subida-passos { margin: var(--space-3) 0 0; padding-left: 1.4em; font-size: .9rem; line-height: 1.55; text-align: left; color: var(--text-muted); }
.moeda-subida-passos b { color: var(--text-strong); }
.moeda-subida-esperando { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--space-3) 0 0; font-size: .9rem;
  color: var(--warning-fg); }
.moeda-subida-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber-400); animation: moeda-piscar 1.2s ease-in-out infinite; }
.moeda-subida-festa { margin: 0 0 var(--space-2); font-size: 44px; line-height: 1; text-align: center; }
.moeda-subida-caixa.com-pix [data-relogio-fim], .moeda-subida-caixa.liberado [data-relogio-fim] { display: none; }
@keyframes moeda-piscar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moeda-subida-ponto { animation: none; } }
@keyframes moeda-pulsar { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: 0 0 0 6px var(--brand-soft), var(--shadow-md); } }
@media (prefers-reduced-motion: reduce) { .moeda-subida-faixa { animation: none; } .moeda-subida-capa { transition: none; } }

/* C20. A PILHA DO CATÁLOGO (D352 — o dono: "aquelas três cartinhas… adaptasse para essa daí"): a faixa "Libere o catálogo
   completo" no mesmo jeito da moedinha (os ganchos e as classes dela — partes/catalogo_pilha.php), com a borda VERMELHA nas capas
   (a dourada é a da moedinha), sem relógio (o "🔓 catálogo" no lugar), e a janela com o leque de capas, o preço, a lista e o
   WhatsApp embaixo */
.moeda-subida-catalogo .moeda-subida-capa { border-color: var(--brand); }
.catalogo-pilha-sub { padding: 1px 7px; border-radius: 8px; background: var(--surface-raised); font-size: 10px; font-weight: var(--fw-bold); color: var(--text-brand); }
.catalogo-caixa { text-align: center; }
.catalogo-selo { display: inline-block; margin: 0 0 var(--space-2); padding: 4px 12px; border-radius: var(--radius-full); background: var(--brand-soft);
  color: var(--text-brand); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .04em; }
.catalogo-leque { position: relative; width: 220px; height: 118px; margin: var(--space-3) auto 0; }
.catalogo-leque img { position: absolute; top: 6px; width: 70px; height: 104px; object-fit: cover; border-radius: var(--radius-sm);
  border: 2px solid var(--surface-raised); background: var(--surface-card); box-shadow: var(--shadow-md); }
.catalogo-leque img:nth-child(1) { left: 8px; transform: rotate(-12deg); }
.catalogo-leque img:nth-child(2) { left: 52px; transform: rotate(-4deg); z-index: 2; }
.catalogo-leque img:nth-child(3) { left: 98px; transform: rotate(4deg); z-index: 3; }
.catalogo-leque img:nth-child(4) { left: 142px; transform: rotate(12deg); z-index: 4; }
.catalogo-leque-1 img:nth-child(1) { left: 75px; transform: none; }
.catalogo-mais { position: absolute; right: -4px; bottom: 0; z-index: 6; padding: 3px 9px; border-radius: var(--radius-full); background: var(--brand);
  color: var(--on-brand); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.catalogo-preco { margin: var(--space-3) 0 0; font-size: var(--fs-body); color: var(--text-muted); }
.catalogo-preco b { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--text-strong); }
.catalogo-dia { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.catalogo-lista { margin: var(--space-3) 0 0; padding: 0; list-style: none; text-align: left; font-size: var(--fs-sm); line-height: 1.9; color: var(--text-strong); }
.catalogo-lista li::before { content: "✓ "; color: var(--green-500); font-weight: var(--fw-bold); }
.catalogo-whats { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-strong);
  text-decoration: none; }
.catalogo-whats b { color: var(--text-strong); }