/* =========================================================================
   celular.css — o front do site refeito PARA O CELULAR.

   ORDEM DE INCLUSÃO: por ÚLTIMO, depois de tema-novo.css.
       <link rel="stylesheet" href="/web/sistema.css">
       <link rel="stylesheet" href="/web/tema-novo.css">
       <link rel="stylesheet" href="/web/celular.css">   <-- este

   POR QUE UM ARQUIVO SÓ, E POR QUE O ÚLTIMO
   O ajuste de celular estava espalhado em quatro lugares: um @media de
   640px em base.css, um @media (pointer:coarse) em tema-novo.css, um
   @media de 900px e outro de 560px dentro do <style> de vendas.html.
   Entre dois `!important` de mesma especificidade quem ganha é o de baixo,
   e media query não dá bônus nenhum — então "consertar" o de cima não
   mudava a tela. Tudo que é celular passa a morar AQUI, e aqui é o fim da
   cascata: o que está escrito é o que aparece.

   O QUE FOI MEDIDO ANTES (iPhone SE, 375x812, tema escuro e claro):
     barra de topo   171px de altura = 21% da tela, em 3 fileiras
     alvo de toque   logo 152x32; 7 links do rodapé com 34 a 42px de largura
     rolagem lateral 0 (isto já estava bom, e continua)
   O número da barra é o que manda neste arquivo: 171px de moldura fixa numa
   tela de 812 é um quinto da página gasto antes da primeira palavra.
   ========================================================================= */

:root{
  /* Curvas. As duas primeiras já existem em sistema.css (--mola, --vivo);
     estas três são as que faltavam pra este arquivo não inventar bézier
     no meio da regra. Valores de catálogo, não chutados. */
  --saida:cubic-bezier(.23,1,.32,1);      /* ease-out forte: entrada e saída */
  --gaveta:cubic-bezier(.32,.72,0,1);     /* curva de gaveta do iOS */
  --t-rapido:140ms;                       /* resposta de toque */
  --t-painel:190ms;                       /* menu / dropdown: 150-250ms */
  --t-barra:240ms;                        /* barra que entra por baixo */

  --topo-alt:60px;                        /* altura da barra no celular */
  --pad-lado:18px;                        /* respiro lateral no celular */
  --seguro-b:env(safe-area-inset-bottom,0px);
  --seguro-e:env(safe-area-inset-left,0px);
  --seguro-d:env(safe-area-inset-right,0px);
}

/* =========================================================================
   1. ALVO DE TOQUE — 44px DE VERDADE

   Armadilha medida duas vezes neste repositório: `min-width` é propriedade
   DIFERENTE de `width`, e vence um `width:32px!important`. Por isso aqui
   nunca se escreve `width` num alvo: só `min-width`/`min-height`, e o
   `padding` é quem dá o resto.

   Vale nos dois ponteiros, não só no `pointer:coarse`. O painel do
   navegador do desktop é `pointer:fine` e é onde eu meço — se a regra só
   valesse no dedo, eu estaria medindo um caminho que o celular nunca usa
   e o inverso também: nunca provando o que o dedo vê.
   ========================================================================= */
.nav a.logo,
.nav .ajustes,
.nav .bt.sm,
.nav .bt.sec.sm,
.idiomasel a,
.temasel button,
footer .lin a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* O rodapé tinha links de 34px de largura ("Guias", "Termos"). A largura vem
   do padding.
   ⚠️ SEM `margin-inline` negativo aqui. A primeira versão puxava cada link
   12px pra trás pra alinhar a coluna, e com isso dois vizinhos passavam a
   se sobrepor em 2x12 menos o gap = 20px — medido, 20x44px em cada par.
   Quem alinha a coluna é o padding IGUAL em `.creditos` e `.idiomapick`,
   lá embaixo. */
footer .lin a{min-width:44px;padding-inline:12px}
/* `select` NAO entra na lista de `inline-flex` la em cima: isso desmonta a
   caixa de opcoes nativa. So altura. */
select#idiomapick{min-height:44px}
/* O botao dos planos media 430x42 no desktop: `.bt` nasce de padding, e
   12+15x1.2+12 da 42. O piso resolve os dois ponteiros de uma vez. */
.bt{min-height:44px}
.idiomasel a{min-width:44px}
.temasel button{min-width:44px}
.nav a.logo{justify-content:flex-start}

/* =========================================================================
   2. A BARRA DE TOPO

   ≥900px: uma fileira só, como hoje, mas com alvo de 44px.
   <900px: logo + um botão de ajustes + a ação principal. Idioma, tema e a
           ação secundária descem pra um painel que sai debaixo do botão.

   POR QUE 900 E NÃO 768. Com alvo de 44px o par idioma+tema pede 290px, a
   logo pede 150 e os dois botões pedem 205 em português — 645 + respiros.
   Em inglês ("Create account") e espanhol ("Crear cuenta") passa de 700.
   768 não cabe: era exatamente daí que vinham as fileiras extras de que o
   dono reclamou entre 768 e 1080.

   POR QUE UM PAINEL E NÃO TRÊS FILEIRAS. Idioma e tema são AJUSTE, não
   navegação: a pessoa mexe uma vez e nunca mais. Ocupar 111px permanentes
   da tela com eles é cobrar todo mundo pelo que quase ninguém usa. No
   painel eles ganham rótulo e 44px de alvo — ficam mais fáceis, não menos.
   ========================================================================= */

/* O botão só existe no celular. Fora dele, nem desenha. */
.nav .ajustes{display:none}

@media (max-width:899.98px){
  .nav{
    flex-wrap:nowrap;              /* a quebra era o problema, não a solução */
    gap:10px;
    min-height:var(--topo-alt);
    padding:8px calc(var(--pad-lado) + var(--seguro-d))
            8px calc(var(--pad-lado) + var(--seguro-e));
    row-gap:0;
  }
  .nav a.logo{
    font-size:16px;
    min-width:0;                   /* deixa a logo encolher antes de empurrar */
    flex:0 1 auto;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .nav .dir{
    width:auto;
    margin-left:auto;
    flex:none;
    gap:8px;
    flex-wrap:nowrap;
    row-gap:0;
  }

  /* O botão de ajustes mostra a língua atual: quem procura idioma acha sem
     abrir nada, e quem não procura vê um alvo de 44px em vez de seis
     pastilhas de 33px. */
  .nav .ajustes{
    display:inline-flex;
    gap:7px;
    padding:0 12px;
    border-radius:999px;
    background:var(--cx2);
    border:1px solid var(--line);
    color:var(--fg);
    font:700 12.5px/1 var(--fonte,inherit);
    letter-spacing:.06em;
    transition:background var(--t-rapido) ease,border-color var(--t-rapido) ease;
  }
  .nav .ajustes svg{width:15px;height:15px;display:block;opacity:.8}
  /* resposta no APERTO, não na soltura — é o que separa "responde" de
     "morreu". 100-160ms é a faixa de feedback de botão. */
  .nav .ajustes:active{transform:scale(.96);transition-duration:90ms}
  .nav .ajustes[aria-expanded="true"]{
    background:var(--ativo-fundo);
    border-color:var(--selo-borda);
  }

  /* A ação secundária (Entrar / Sair) mora dentro do painel no HTML, então
     no celular ela simplesmente aparece lá — não é escondida aqui e mostrada
     lá, que é como se acaba com duas regras brigando em arquivos distantes.
     A principal fica na barra: numa página que precisa vender, o botão que
     vende não some da tela. */
  .nav .dir > .bt.sm,
  .nav .dir > .bt.sec.sm{padding:0 16px;font-size:14px;white-space:nowrap}

  /* 320px: a logo inteira + botão + "Criar conta" não cabem. A logo perde a
     palavra "Karaoke" (fica a marca, que é o que identifica) em vez de o
     botão descer de fileira. */
  @media (max-width:359.98px){
    .nav{padding-inline:calc(12px + var(--seguro-e)) calc(12px + var(--seguro-d))}
    .nav a.logo .kw{display:none}
    .nav .ajustes{padding:0 10px}
    .nav .dir > .bt.sm{padding:0 13px;font-size:13.5px}
  }
}

/* =========================================================================
   3. O PAINEL DE AJUSTES

   Desktop: `display:contents`. O elemento some da árvore de layout e os
   filhos viram filhos diretos de `.dir` — a barra de hoje, sem um wrapper
   a mais e sem `order` nenhum (mexer em `order` no flex separa a ordem
   visual da ordem do Tab, e quem navega por teclado começa a pular pra
   trás).
   Celular: vira uma folha ancorada no botão que a abriu. Ela cresce DO
   canto do botão (transform-origin no gatilho), que é a regra de origem
   ancorada: menu que nasce do centro da tela não diz de onde veio.
   ========================================================================= */
.ajp,.ajp-cx{display:contents}
/* No desktop só somem os enfeites do painel. A ação secundária NÃO entra
   nesta lista: com `display:contents` ela é filha de `.dir` pra todos os
   efeitos de layout, e é a mesma barra de hoje. */
.ajp-tit,.ajp-rot,.ajp-fecha{display:none}
.logo .kw{font-style:normal}

@media (max-width:899.98px){
  /* `visibility`, não `display`. Com display:none→block o navegador pinta o
     estado final no mesmo quadro e a transição simplesmente não acontece —
     seria preciso forçar reflow no meio do JS pra enganar isso.
     `visibility` transiciona com atraso, tira do caminho do Tab e do toque,
     e o painel abre animado sem truque nenhum. */
  .ajp{
    display:block;
    position:fixed;
    inset:0;
    z-index:60;
    visibility:hidden;
    touch-action:none;        /* o gesto no véu não rola a página atrás */
    transition:visibility 0s linear var(--t-painel);
  }
  .ajp[data-aberto]{visibility:visible;transition:visibility 0s}
  /* Véu: escurece o fundo e dá a área de toque pra fechar. Não é enfeite —
     sem ele, num celular, não existe "fora do menu" pra tocar. */
  .ajp::before{
    content:"";
    position:absolute;
    inset:0;
    /* o herói tem foto atrás: com 66% de preto o texto continuava legível
       através do véu e o painel não lia como camada de cima. O desfoque de
       3px separa sem precisar apagar a página. */
    background:#05050bc2;
    backdrop-filter:blur(3px);
    opacity:0;
    transition:opacity var(--t-painel) var(--saida);
  }
  :root[data-tema=claro] .ajp::before{background:#1a163873}
  .ajp[data-aberto]::before{opacity:1}

  .ajp-cx{
    display:block;
    touch-action:auto;        /* dentro do painel a rolagem volta a valer */
    position:absolute;
    top:calc(var(--topo-alt) + 6px);
    right:calc(var(--pad-lado) + var(--seguro-d));
    left:auto;
    width:min(300px, calc(100vw - (var(--pad-lado) * 2)));
    padding:6px;
    border-radius:18px;
    background:var(--cx);
    border:1px solid var(--borda);
    box-shadow:var(--sombra,0 24px 60px #000000a6);
    /* nasce no canto do botão que a abriu */
    transform-origin:top right;
    transform:translateY(-8px) scale(.96);
    opacity:0;
    transition:transform var(--t-painel) var(--saida),
               opacity var(--t-painel) var(--saida);
  }
  .ajp[data-aberto] .ajp-cx{transform:none;opacity:1}

  .ajp-tit{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 8px 10px 12px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--dim);
  }
  .ajp-fecha{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    min-width:40px;
    min-height:40px;
    border-radius:999px;
    color:var(--dim);
  }
  .ajp-fecha svg{width:17px;height:17px;display:block}
  .ajp-fecha:hover{color:var(--fg);background:var(--cx2)}

  .ajp-rot{
    display:block;
    padding:12px 12px 7px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--dim);
  }

  /* Os dois grupos deixam de ser pastilhas apertadas e viram fileiras que
     ocupam a largura do painel: três alvos de 44px de altura dividindo
     ~276px dá 92px cada um. Antes era 33x32. */
  .ajp .navctrl{display:block}
  .ajp .idiomasel,
  .ajp .temasel{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    width:100%;
    padding:4px;
    border-radius:14px;
    background:var(--cx2);
    border:1px solid var(--line);
  }
  .ajp .idiomasel a,
  .ajp .temasel button{
    width:auto;
    min-width:0;                  /* a coluna do grid já garante a largura */
    min-height:44px;
    border-radius:11px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
  }
  .ajp .temasel button svg{width:18px;height:18px}

  /* A ação secundária volta a existir, agora como linha inteira. */
  .ajp .bt.sec.sm{
    display:flex;
    width:100%;
    margin:12px 0 4px;
    min-height:46px;
    font-size:15px;
    border-radius:13px;
  }
}

/* -------------------------------------------------------------------------
   SEM JAVASCRIPT: a barra antiga de volta.
   `celular.js` carimba `.temjs` no <html> assim que roda. Se ele não rodar,
   o botão de ajustes seria um botão morto e o idioma — que são <a href> de
   verdade — ficaria inalcançável no celular. Sem a classe, o painel volta a
   ser conteúdo inline e a barra quebra em fileiras, como antes.
   Vem DEPOIS do bloco do painel de propósito: mesma especificidade, quem
   decide é a ordem no arquivo.
   ------------------------------------------------------------------------- */
@media (max-width:899.98px){
  html:not(.temjs) .nav{flex-wrap:wrap;row-gap:8px}
  html:not(.temjs) .nav .dir{flex-wrap:wrap;row-gap:8px}
  html:not(.temjs) .nav .ajustes{display:none}
  html:not(.temjs) .ajp{position:static;display:contents;visibility:visible}
  html:not(.temjs) .ajp-cx{position:static;display:contents}
  html:not(.temjs) .ajp::before{content:none}
  html:not(.temjs) .ajp-tit,
  html:not(.temjs) .ajp-rot{display:none}
  html:not(.temjs) .ajp .idiomasel,
  html:not(.temjs) .ajp .temasel{display:flex;width:auto;grid-template-columns:none}
  html:not(.temjs) .ajp .bt.sec.sm{width:auto;margin:0}
  html:not(.temjs) .idiomapick.canto{display:block}
}

/* Movimento respeitando quem pediu menos movimento: o painel continua
   aparecendo (a informação não pode sumir), só que sem deslizar nem
   escalar — fica o fade curto, que é o que explica "isto acabou de chegar".
   150ms é o piso do que o olho registra como transição em vez de salto. */
@media (prefers-reduced-motion:reduce){
  .ajp-cx{transform:none!important;transition-duration:150ms!important;
          transition-property:opacity!important}
  .ajp[data-aberto] .ajp-cx{transform:none!important}
  .ajp::before{transition-duration:150ms!important}
}

/* =========================================================================
   4. RESPIRO LATERAL E TIPOGRAFIA NO CELULAR

   24px de respiro numa tela de 320 deixa 272px de linha. 18px deixa 284, e
   em 320 desce pra 14. O texto ganha 20px de linha sem encostar na borda.
   ========================================================================= */
@media (max-width:899.98px){
  .wide,.wrap{
    padding-inline:calc(var(--pad-lado) + var(--seguro-e))
                   calc(var(--pad-lado) + var(--seguro-d));
  }
  /* Título: tracking negativo cresce com o tamanho (letra grande lida
     solta parece esparramada) e a entrelinha aperta pelo mesmo motivo. */
  h1{
    font-size:clamp(30px,8.8vw,44px);
    line-height:1.08;
    letter-spacing:-.032em;
  }
  h2{font-size:clamp(21px,5.6vw,29px);line-height:1.15;letter-spacing:-.024em}
  .lead{font-size:17px;line-height:1.55;margin-top:14px}
}
@media (max-width:359.98px){
  .wide,.wrap{
    padding-inline:calc(14px + var(--seguro-e)) calc(14px + var(--seguro-d));
  }
}

/* =========================================================================
   5. PÁGINA DE VENDAS — O HERÓI

   Ordem no celular: selo, título, frase, PRÉVIA DO PLAYER, botões.
   A prévia estava depois dos botões, ou seja, a 900px de rolagem: numa tela
   de 640 a pessoa decidia se assinava sem nunca ter visto o produto
   funcionando. É a única coisa animada da página e é literalmente o que o
   produto entrega — sobe pra antes da decisão.

   `display:contents` no <div> do texto + `order` só na <figure>. A figure
   não recebe foco, então a ordem do Tab (botão, botão, link) não muda.
   ========================================================================= */
@media (max-width:899.98px){
  .hero{
    display:flex;
    flex-direction:column;
    /* ⚠️ `align-items` PRECISA estar aqui. O `.hero` do <style> da página é
       um grid de duas colunas com `align-items:center` — trocar só o
       `display` pra flex deixava o `center` de pé, e num flex de coluna ele
       centraliza na HORIZONTAL: medido em 768px, o selo saía com 264px no
       meio da tela e os dois botões com 186px em vez da largura toda. */
    align-items:stretch;
    gap:0;
    padding:26px 0 40px;
  }
  .hero > div{display:contents}
  /* o selo é o único que não estica: pílula da largura da tela não é selo */
  .hero .selo{align-self:flex-start}
  .hero > .player{order:1;margin-top:24px}
  .hero .cta{order:2;margin-top:24px}
  .hero .fine{order:3}
  .hero h1{max-width:none}
  .hero .selo{margin-bottom:16px}

  /* Os dois botões em coluna, largura cheia, 50px de altura. Botão de 42px
     lado a lado em 320px dava 130px de largura cada — alvo estreito e
     rótulo cortado em espanhol. */
  .cta{flex-direction:column;gap:10px;margin-top:22px}
  .cta .bt{width:100%;min-height:50px;font-size:16px;border-radius:13px}

  .hero .fine{margin-top:16px;font-size:13.5px;line-height:1.55}
}

/* Tablet em pé (600-900px): uma coluna esticada até 768px dá uma linha de
   ~75 caracteres na frase de abertura — longe demais pro olho voltar ao
   começo da linha seguinte. A coluna para de crescer em 600px e o bloco
   inteiro (título, frase, prévia, botões) fica centrado como um só. */
@media (min-width:600px) and (max-width:899.98px){
  .hero{max-width:600px;margin-inline:auto}
  .fatos{max-width:600px;margin-inline:auto}
}

/* =========================================================================
   6. PÁGINA DE VENDAS — A FAIXA DE NÚMEROS VIRA TRILHO

   Empilhados, os três cartões davam 330px de rolagem pra três frases
   curtas. Em trilho com encaixe dão 168px e ganham a leitura de "tem mais
   coisa pro lado", que é como se lê número em celular.

   O trilho rola DENTRO dele mesmo. `overscroll-behavior-x:contain` impede
   que o gesto vaze pro histórico do navegador, e o cálculo de largura usa
   os mesmos tokens do respiro lateral pra não criar rolagem na PÁGINA —
   que é o defeito clássico deste padrão.
   ========================================================================= */
@media (max-width:899.98px){
  .fatos{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-top:0;
    border-bottom:0;
    padding-bottom:4px;
  }
  .fatos::-webkit-scrollbar{display:none}
  .fato{
    flex:0 0 auto;
    width:min(258px,78vw);
    scroll-snap-align:start;
    padding:18px 18px 20px;
    border:1px solid var(--line);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
    border-radius:16px;
    background:var(--cx);
  }
  .fato:first-child{padding-left:18px}
  .fato .ic{width:36px;height:36px;margin-bottom:10px}
  .fato .v{font-size:27px}
  .fato p{font-size:13.5px;max-width:none;margin-top:6px}
}

/* =========================================================================
   7. PÁGINA DE VENDAS — PASSOS, NOTA, PLANOS, FAQ
   ========================================================================= */
@media (max-width:899.98px){
  section{padding:44px 0}

  /* Passos: o número solta do texto e vira um rótulo de linha, com o ícone
     ao lado. Em coluna de 56px o número de 40px encostava no ícone de 48. */
  .step{
    grid-template-columns:1fr;
    gap:14px;
    padding:24px 0;
  }
  .step .npasso{
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  .step .n{font-size:34px}
  .step .npasso .ic{width:38px;height:38px}
  .step .art{height:84px}
  .step p{font-size:14.5px;max-width:none}

  /* Nota: a escada perde altura e os rótulos ficam legíveis. */
  .escada{height:92px;gap:3px}
  .escala{gap:3px;font-size:9px}
  .apelidos{gap:14px}
  .chute{margin-top:30px}
  .barra{grid-template-columns:1fr;gap:5px}
  .barra .p{text-align:left}

  /* Planos: cartão de verdade, um embaixo do outro, com o Pro destacado
     por superfície e não por uma borda de 2px que some no celular. */
  .planos{
    grid-template-columns:1fr;
    border:0;
    border-radius:0;
    background:none;
    gap:14px;
    display:flex;
    flex-direction:column;
    margin-top:22px;
  }
  .plano{
    padding:24px 20px 26px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--cx);
  }
  .plano + .plano{border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .plano.pro{border-color:var(--selo-borda)}
  .plano .bt{min-height:50px;font-size:16px;border-radius:13px}
  .prazos{gap:6px}
  .prazos li{padding:10px 4px}
  .prazos li b{font-size:14px}

  /* FAQ: alvo de 44px garantido pelo padding, e o sinal de "+" ganha um
     alvo próprio em vez de ser um caractere solto na borda. */
  .faq-item summary{padding:16px 40px 16px 0;min-height:44px;font-size:15.5px}
  .faq-item summary::after{right:6px;top:50%;transform:translateY(-50%)}
  .faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
  .faq-item p{font-size:14.5px;padding-bottom:18px}

  .nfaz article,.nfaz aside.faz{padding-block:24px}
  .fim{padding-top:44px}
  .fim .cta{margin-bottom:40px}
  .arte-fim{width:132px;height:132px;margin-bottom:16px}
}

/* =========================================================================
   8. A BARRA DE AÇÃO FIXA (só na página de vendas, só no celular)

   O motivo: 76 visitas por dia, zero assinantes. No celular o botão de
   assinar aparecia no alto e sumia por 6000px de rolagem. Esta barra põe a
   ação de volta na zona do polegar durante a leitura inteira.

   Ela NÃO aparece o tempo todo:
     - some enquanto o herói está na tela (o botão de lá já está à mão);
     - some quando os planos ou a chamada final entram na tela, porque ali
       existe o botão de verdade e dois botões iguais na mesma tela é ruído;
     - some quando o convite de instalar o app (.baixarapp) está aberto —
       são dois elementos fixos no mesmo canto e um cobriria o outro. Feito
       por irmão (`~`), não por :has(), porque o .baixarapp já é irmão dela
       no HTML e assim a regra vale em qualquer navegador.
   ========================================================================= */
.ctafixa{display:none}

@media (max-width:899.98px){
  .ctafixa{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:55;
    align-items:center;
    gap:12px;
    padding:10px calc(var(--pad-lado) + var(--seguro-d))
            calc(10px + var(--seguro-b)) calc(var(--pad-lado) + var(--seguro-e));
    background:var(--navbg);
    backdrop-filter:blur(16px) saturate(160%);
    border-top:1px solid var(--line);
    /* fora da tela e sem receber toque enquanto está escondida */
    transform:translateY(102%);
    visibility:hidden;
    transition:transform var(--t-barra) var(--saida),
               visibility 0s linear var(--t-barra);
  }
  .ctafixa[data-visivel]{
    transform:none;
    visibility:visible;
    transition:transform var(--t-barra) var(--saida),visibility 0s;
  }
  /* Medido em 375px: com o botão em 171px sobravam 156px pro texto e a
     segunda frase quebrava em três linhas cortadas, deixando a barra com
     72px de altura. A frase de apoio só entra quando existe largura pra
     ela caber em uma linha. */
  .ctafixa .txt{
    flex:1;
    min-width:0;
    font-size:12.5px;
    line-height:1.3;
    color:var(--dim);
    display:flex;
    flex-direction:column;
    gap:1px;
  }
  .ctafixa .txt b{
    color:var(--fg);
    font-size:14px;
    font-weight:700;
    letter-spacing:-.01em;
  }
  .ctafixa .txt .sub{
    display:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  @media (min-width:430px){ .ctafixa .txt .sub{display:block} }
  .ctafixa .bt{
    flex:none;
    min-height:46px;
    padding:0 20px;
    font-size:15px;
    border-radius:12px;
    white-space:nowrap;
  }
  /* o convite de instalar o app manda: ele é resposta a um gesto da pessoa */
  .baixarapp.on ~ .ctafixa{transform:translateY(102%);visibility:hidden}
}

/* A barra não desliza; aparece e some. `visibility` sem atraso mantém ela
   fora do caminho do toque quando escondida, que é a parte que importa. */
@media (prefers-reduced-motion:reduce){
  .ctafixa{transition-property:visibility!important;transition-duration:0s!important}
}

/* =========================================================================
   9. MINHA CONTA — o painel do assinante no celular

   Eram cartões de 24px de padding dentro de um respiro de 24px: 48px de
   margem branca de cada lado numa tela de 375, ou seja, 279px úteis pra
   uma linha "rótulo … valor". O rótulo e o valor iam pra beira oposta e
   o olho tinha que atravessar o vazio.
   ========================================================================= */
@media (max-width:899.98px){
  /* ⚠️ `padding-block`, NÃO `padding`. O atalho escreve os quatro lados, e
     o `padding-inline` que `.wrap` recebeu quatro blocos acima morria aqui
     em silêncio — os cartões encostavam nas duas bordas da tela (medido:
     .cx de 0 a 375 numa tela de 375). */
  .conteudo{padding-block:26px 96px;gap:14px}
  .cabecalho{gap:14px;margin-bottom:2px}
  .cabecalho h1{font-size:26px!important}
  .cabecalho .lead{font-size:15px!important;margin-top:6px!important}
  .ondas{width:32px;height:21px}

  .cx{padding:18px 16px;border-radius:16px}
  .cx h2{font-size:16.5px}
  .cx .sub{font-size:13px;margin-bottom:14px}

  /* rótulo em cima, valor embaixo e grande: a linha para de ser uma ponte
     sobre o vazio e vira um dado. */
  .linha{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    padding:11px 0;
  }
  .linha .rot{font-size:12px;letter-spacing:.02em}
  .linha .val{font-size:16px}

  .acoes{gap:8px;margin-top:14px}
  .acoes .bt{flex:1 1 auto;min-height:46px;justify-content:center}

  /* Lista de músicas: nome em cima, tamanho e apagar embaixo. Com tudo na
     mesma linha o nome da música ficava com 90px e virava reticências. */
  .im{
    flex-wrap:wrap;
    gap:4px 10px;
    padding:12px 0;
  }
  .im b{flex:1 1 100%;font-size:15px;line-height:1.3;word-break:break-word}
  .im span{font-size:12.5px}
  .im .del{margin-left:auto;min-width:44px;min-height:44px;font-size:13px}

  .zonaconta > summary{min-height:52px;padding:12px 16px}
  .zonaconta .zc-corpo{padding:0 10px 10px}
}

/* =========================================================================
   10. ENTRAR / ESQUECI / REDEFINIR — formulários no celular

   Campo com 15px de fonte no iOS faz o Safari dar zoom ao focar e a tela
   sai do lugar. 16px é o piso que impede isso — não é preferência, é o
   comportamento do sistema.
   ========================================================================= */
@media (max-width:899.98px){
  .campo input{min-height:48px;font-size:16px;border-radius:12px}
  .campo label{font-size:13px}
  .cx .bt{min-height:50px;font-size:16px;border-radius:13px}
  .senha-caixa .olho{min-width:44px;width:44px;right:2px}
  .erro,.ok{font-size:14px;line-height:1.45}
}

/* =========================================================================
   11. RODAPÉ
   ========================================================================= */
@media (max-width:899.98px){
  footer{padding:22px 0 calc(34px + var(--seguro-b))}
  footer .lin{gap:0}
  footer .lin .mm{
    margin-left:0;
    flex:1 1 100%;
    margin-top:8px;
    padding-left:12px;      /* alinha com o padding dos links */
  }
  .creditos{margin-top:14px;font-size:11px;padding-inline:12px}
  /* entrar/esqueci/redefinir não têm rodapé e por isso ganharam um <select>
     de idioma fixo no canto de baixo. No celular ele vira duas coisas
     ruins ao mesmo tempo: repete a escolha que já está no painel do topo e
     ocupa justo o canto onde o polegar segura o aparelho. */
  .idiomapick.canto{display:none}
  .idiomapick{margin-top:14px;padding-inline:12px}
  #idiomapick{min-height:44px;font-size:15px;border-radius:10px}
}
/* Na página de vendas o rodapé precisa de folga pra barra fixa não cobrir a
   última linha. O valor é a altura da barra (66) mais o respiro do iPhone. */
@media (max-width:899.98px){
  body:has(.ctafixa) footer{padding-bottom:calc(96px + var(--seguro-b))}
}

/* =========================================================================
   12. MOVIMENTO — SÓ O QUE EXPLICA ALGUMA COISA

   Não entra animação nova de enfeite. As três que existem aqui têm função:
     - o aperto do botão (feedback, 90-140ms);
     - o painel que nasce do botão (de onde veio, 190ms);
     - a barra que sobe (mudança de estado, 240ms).
   Nenhuma passa de 300ms, nenhuma usa `ease-in` (começa devagar justo no
   quadro em que a pessoa está olhando) e nenhuma anima largura ou altura.
   ========================================================================= */
@media (hover:hover) and (pointer:fine){
  .nav .ajustes:hover{background:var(--cx3);border-color:var(--borda)}
  .fato:hover{border-color:var(--borda)}
}
/* Toque: o realce vive no :active, porque `:hover` no celular fica GRUDADO
   depois do toque e o cartão fica aceso até a pessoa tocar em outro lugar. */
.fato:active{border-color:var(--borda)}