/**
 * Correcções de telemóvel, partilhadas.
 *
 * PORQUE EXISTE
 *
 * O desktop está bom e não se mexe. O que estava mal era o telemóvel: a página
 * abria com a largura do computador e arrastava-se para o lado, revelando
 * espaço vazio à direita — o conteúdo tinha ficado todo na primeira tela e o
 * resto era nada. Duas causas, sempre as mesmas:
 *
 *   1. nada travava o arrasto horizontal (`overflow-x` por omissão é `visible`);
 *   2. havia larguras fixas em pixels e grelhas de N colunas que não sabem
 *      voltar a uma coluna — mais largas do que o ecrã, empurram a página.
 *
 * Duas páginas (`marketing.html` e `produtos.html`) não tinham **uma única**
 * media query: eram desktop puro dentro de um telemóvel.
 *
 * O QUE NÃO FAZ
 *
 * Quase tudo aqui vive dentro de `@media (max-width: 640px)`. Acima disso só
 * actua o travão do arrasto, que numa página bem composta não muda nada — é
 * rede, não desenho. Ninguém mexe no aspecto que já está a funcionar.
 */

/* ─── O travão do arrasto ─────────────────────────────────────────────────── */

/* `clip` e não `hidden`: `overflow: hidden` no body transforma-o em contentor
   de scroll e mata qualquer `position: sticky` lá dentro — cabeçalhos que
   deixam de colar sem se perceber porquê. O `clip` corta sem esse efeito. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Nada pode ser mais largo do que o ecrã. Uma imagem sem `max-width` ou um
   `<pre>` com uma linha comprida chegam para empurrar a página inteira. */
img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
img, svg, video, canvas { height: auto; }

@media (max-width: 640px) {

  /* ─── Larguras fixas ────────────────────────────────────────────────────
     Um `width: 900px` escrito para o desktop é, no telemóvel, exactamente o
     número de pixels que a pessoa vai ter de arrastar. */
  body * { max-width: 100%; }
  [style*="width:"], [style*="width :"] { max-width: 100% !important; }

  /* ─── Grelhas ───────────────────────────────────────────────────────────
     `repeat(2..6, 1fr)` num ecrã de 390px dá colunas de 60px onde nada cabe.
     Uma coluna, que é como um telemóvel se lê. */
  .stats-row, .stats, .nums, .grelha, .def-dois, .cards, .cartoes,
  .plans, .planos, .links-grid, .groups-grid, .upgrade-features {
    grid-template-columns: 1fr !important;
    display: grid;
  }

  /* ─── Tabelas ───────────────────────────────────────────────────────────
     Uma tabela não encolhe abaixo do conteúdo. Em vez de a deixar empurrar a
     página, rola dentro da sua própria caixa. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ─── Barras de navegação ───────────────────────────────────────────────
     Oito separadores em linha não cabem. Ou embrulham, ou rolam na horizontal
     dentro da própria barra — nunca empurram a página. */
  nav, .nav, .nav-links, .center-tabs, .tabs-wrap, .painel-abas, .topo-in {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .center-tabs, .painel-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .center-tabs::-webkit-scrollbar, .painel-abas::-webkit-scrollbar { display: none; }

  /* ─── Alvos de toque ────────────────────────────────────────────────────
     44px é a norma da Apple e da Google. Abaixo disso falha-se o alvo e
     carrega-se no botão do lado — que às vezes é o de apagar. */
  button, .btn, [role="button"], a.btn, input[type="submit"] {
    min-height: 44px;
  }

  /* ─── Formulários ───────────────────────────────────────────────────────
     Abaixo de 16px o iOS dá zoom sozinho ao tocar no campo, e a página fica
     encavalitada sem a pessoa ter pedido nada. */
  input, select, textarea { font-size: 16px; max-width: 100%; }

  /* ─── Margens ───────────────────────────────────────────────────────────
     Contentores desenhados para 1100px deixam o texto colado às bordas. */
  .container, .env, .wrap, .conteudo, main { padding-left: 14px; padding-right: 14px; }

  /* ─── Texto comprido ────────────────────────────────────────────────────
     Um URL sem espaços não parte sozinho e estica a caixa toda. */
  .link-url, .lookup-title, code, .item-txt, .mono { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEGUNDA VOLTA — 2026-08-12
   Medido com Chrome a serio, a 360px e a 390px, nas 49 paginas.

   A primeira volta desta folha estava certa; o que faltava era chegar as
   paginas. So 17 de 49 a carregavam — e as que faltavam eram as PUBLICAS
   (index, pricing, login, faq, blog, contacto), que e onde aterra quem vem de
   um telemovel. Ligada a todas, o arrasto horizontal do site passou de 4
   paginas para ZERO.

   O que fica abaixo e o que a medicao mostrou que ainda escapava.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ─── Alvos de toque: os LINKS ──────────────────────────────────────────
     170 alvos pequenos eram `<a>` simples de navegacao: "Preços" a 44x22,
     "Blog" a 28x22, o menu de idioma a 73x36. Num telefone falha-se e
     carrega-se no do lado.

     ⚠️ COMO **NAO** SE FAZ, e custou-me uma regressao para aprender:
     a primeira versao punha `display:inline-flex !important` + `min-width`
     nestes selectores. No `index.html` isso fez os itens da barra crescerem,
     a barra partiu em TRES linhas e o menu ☰ foi parar por cima do emblema.
     Uma pagina que ja estava bem passou a estar mal — o contrario do que esta
     folha existe para fazer.

     A licao: mexer em `display` e em `width` MUDA A COMPOSICAO. Uma folha
     partilhada que entra em 48 paginas nao pode fazer isso; so pode acrescentar
     o que e inofensivo onde quer que caia.

     Por isso o alvo so cresce ONDE CRESCER NAO DESALINHA NADA: em listas
     verticais — rodapes, indices das paginas legais, menu aberto — onde os
     itens ja estao empilhados e ganhar altura nao parte linha nenhuma.

     As barras de topo ficam INTACTAS. Foram desenhadas pagina a pagina e
     funcionam; o preco de as uniformizar a martelo e o que se viu. */
  footer a, .footer-col a, .mobile-menu a, .toc a,
  a[href^="mailto"], a[href^="tel"] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Numa lista vertical o link ocupa a linha toda; centrar o texto ficaria
     estranho. Encosta-se a esquerda, como se le. */
  footer a, .footer-col a, .mobile-menu a, .toc a { justify-content: flex-start; }

  /* Botoes de icone quadrados: aqui o `min-width` e seguro porque sao
     elementos isolados, nao itens de uma barra que possa partir.

     O `!important` e preciso e e seguro: o `#kl-lang-btn` tem `min-height:36px`
     numa folha que o `i18n.js` INJECTA em execucao — entra depois desta, mesma
     especificidade, ganha a ultima. Sao botoes isolados, nao itens de uma
     barra que possa partir, por isso forcar-lhes o tamanho nao desalinha nada
     (ao contrario do que aconteceu quando tentei forcar os links da barra). */
  #hamburger, #kl-lang-btn, #btnUndo, #btnRedo, .btn-icon, .modal-close,
  .kl-bell-btn, #billing-toggle, .btn-logout {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* ─── A barra tem de poder crescer ──────────────────────────────────────
     Meia correccao e pior do que nenhuma, e esta folha tinha uma: manda as
     barras embrulharem (`flex-wrap: wrap`, mais acima) mas nao lhes soltava a
     altura. O `dashboard` tem `nav { height: 60px }` fixo — os itens passavam
     a duas linhas e a segunda TRANSBORDAVA para cima do conteudo, com o
     selector de idioma a aterrar em cima do aviso do email.
     Quem embrulha tem de poder crescer. */
  nav, .nav, .navbar, .topbar, header nav { height: auto; }

  /* ─── E os links das barras de topo? ────────────────────────────────────
     Esses nao podem crescer — foi o que partiu o `index.html`. Mas tambem
     nao podem ficar com 22px de altura para o polegar acertar.
     A saida e uma area de toque INVISIVEL: um `::after` absoluto, centrado,
     com 44px de altura. Pertence ao proprio link, por isso o toque conta como
     toque no link; e como esta fora do fluxo, NAO ocupa espaco nenhum — a
     barra fica exactamente como o desenhador a fez.
     Verificado antes de usar: nenhum destes selectores ja tinha `::after`. */
  nav a, .nav-links a, .nav-links li a, .topbar a, .nav-tool-link,
  .nav-cta, .btn-nav, .cat-pill, .volta, .filter-pill, .sb-item,
  .marca, .logo, .brand {
    position: relative;
  }
  nav a::after, .nav-links a::after, .nav-links li a::after, .topbar a::after,
  .nav-tool-link::after, .nav-cta::after, .btn-nav::after, .cat-pill::after,
  .volta::after, .filter-pill::after, .sb-item::after,
  .marca::after, .logo::after, .brand::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    min-width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* invisivel, e sem `pointer-events:none` de proposito: e precisamente o
       toque que se quer apanhar. Centrado nos dois sentidos porque "Blog"
       media 26px de largura — a altura sozinha nao chegava. */
  }
  /* O "Ler artigo →" da lista do blog media 278x22 — comprido, mas so com a
     altura da linha. Sao cartoes empilhados, por isso ganhar altura nao parte
     nada. */
  .card-link, .qa-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* O interruptor mensal/anual dos precos media 52x28. E o gesto que decide
     quanto a pessoa paga — nao pode falhar-se. */
  .toggle-track { min-height: 44px; min-width: 60px; }
  .billing-label { min-height: 44px; display: inline-flex; align-items: center; }

  /* Excepcao, e e importante: um link DENTRO de uma frase volta ao normal.
     O email do suporte no meio de um paragrafo do rodape nao pode virar um
     bloco de 44px — partia a frase ao meio. */
  footer p a, article a, .prose a, .texto a, .faq-answer-inner a {
    min-height: 0;
    display: inline;
  }

  /* O logotipo e os links com texto comprido nao se centram a forca: ficam
     como estao, so com a altura garantida. */
  .nav-logo, .brand, .nav-links a, .footer-col a, .footer-col ul a, footer a {
    justify-content: flex-start;
  }

  /* ─── Zoom do iOS: agora a serio ────────────────────────────────────────
     A regra `input, select, textarea { font-size: 16px }` ja ca estava e
     mesmo assim 28 campos continuavam abaixo de 16px. A razao e
     especificidade: `.field input { font-size: .83rem }` (0,1,1) ganha a
     `input` (0,0,1), e esta folha carrega depois mas com menos peso.
     Abaixo de 16px o iOS amplia a pagina sozinha ao tocar no campo, e a
     pessoa fica com o ecra encavalitado sem ter pedido nada. */
  input, select, textarea,
  .field input, .field select, .field textarea,
  input[type="text"], input[type="email"], input[type="url"],
  input[type="password"], input[type="search"], input[type="tel"],
  input[type="number"], input[type="date"] {
    font-size: 16px !important;
  }

  /* ─── Texto que nao se le ───────────────────────────────────────────────
     Medidos 9,6px em distintivos e 10,4px em rotulos de numeros. Num
     telefone, ao sol, isso nao e texto — e uma mancha. 11px e o chao.

     ⚠️ Nao usar `max(11px, 1em)` aqui, por muito que pareca a resposta: em
     `font-size`, `1em` e o tamanho do PAI, nao o do proprio elemento. Isso nao
     poe um chao — promove a etiqueta ao tamanho do texto a volta e desfaz o
     desenho todo. Tem de ser um valor explicito. */
  .pro-badge, .method-pill, .stat-pill-lbl, .ref-stat-label, .feat-uniq,
  .faq-chevron, #kl-bell-badge, .sb-item-badge, .bp-pro-tag,
  .author-avatar, .phone-product-tag {
    font-size: 11px;
  }

  /* ─── O aviso dos cookies ───────────────────────────────────────────────
     Medido: 398px de altura num ecra de 780px. Metade do telefone tapada
     por um aviso, antes de se ver o que quer que seja. Continua a ser
     impossivel de ignorar — mas deixa de ser a pagina inteira.

     Tudo com `!important` porque o banner e desenhado por JavaScript com
     `style.cssText` — estilo em linha, que nenhuma folha vence sem isto. */
  #kl-cookie-banner {
    max-height: 45vh !important;
    overflow-y: auto !important;
    padding: 14px 16px !important;
    font-size: .8rem !important;
  }
  #kl-cookie-banner button { min-height: 44px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCO VISÍVEL — para toda a gente que navega por teclado
   ══════════════════════════════════════════════════════════════════════════

   Medido: `outline:none` em 23 ficheiros, 55 ocorrências — incluindo o
   `login.html` e o `reset-password.html`. E `:focus-visible` existia UMA vez
   no repositório inteiro (`dialogo.js`). Quem navega por Tab, por teclado
   Bluetooth no telemóvel, ou por switch control, ficava sem saber onde estava.

   `:focus-visible` e não `:focus`: o browser só o aplica quando o foco veio
   do teclado. Quem carrega com o rato não vê anel nenhum, que é a razão pela
   qual aqueles `outline:none` foram escritos. Assim ninguém perde nada.

   Vive aqui e não numa media query porque o teclado não é um tamanho de ecrã.
   Esta folha entra nas 48 páginas, por isso uma regra arruma o site todo. */
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 3px;
}
/* Em fundo escuro o roxo perde-se; o dourado da marca lê-se nos dois. */
[data-theme="dark"] :focus-visible,
.dark :focus-visible {
  outline-color: #c9a84c;
}

/* ══════════════════════════════════════════════════════════════════════════
   O ZOOM DO iOS NÃO É UMA QUESTÃO DE LARGURA
   ══════════════════════════════════════════════════════════════════════════

   A regra dos 16px vivia dentro de `max-width: 640px`. Medido a 768px: 33
   campos voltavam a ficar abaixo de 16px e o iOS voltava a ampliar a página
   sozinho ao tocar neles. iPads, iPhones ao alto em modo landscape, e
   telemóveis grandes caem todos nessa faixa.

   A pergunta certa não é "que largura tem o ecrã" mas "isto é um dedo?".
   `pointer: coarse` responde exactamente a isso — dispositivo táctil, seja
   qual for o tamanho. Um rato em ecrã pequeno não é apanhado, e bem, porque
   aí o zoom não acontece. */
@media (pointer: coarse) {
  input, select, textarea,
  .field input, .field select, .field textarea,
  input[type="text"], input[type="email"], input[type="url"],
  input[type="password"], input[type="search"], input[type="tel"],
  input[type="number"], input[type="date"] {
    font-size: 16px !important;
  }
}

/* ── Só para quem ouve ────────────────────────────────────────────────────
   Dez páginas não tinham `<h1>` nenhum — incluindo o painel e o editor da
   bio, os dois ecrãs onde as pessoas passam mais tempo. Sem ele, o atalho
   "ir para o cabeçalho principal" não dá nada e não há forma rápida de saber
   em que página se está.

   Nenhuma delas tinha sítio no desenho para um título grande, e não é para
   isso que serve: fica presente na árvore da página e fora do ecrã. Não se
   usa `display:none` nem `visibility:hidden` de propósito — isso tirava-o
   também aos leitores de ecrã, que é exactamente quem o precisa. */
.kl-so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   A BARRA DA APLICAÇÃO NUM TELEMÓVEL
   ══════════════════════════════════════════════════════════════════════════

   Medido no `dashboard` a 390px: a `.nav-right` tem 1000px de conteúdo em
   342px de espaço. São 658px de barra que existem e NÃO SE ALCANÇAM — dez
   destinos escondidos, entre eles Marketing, Music, UTM, Agência, Moderação
   e o próprio botão de sair.

   A causa: a regra de cima manda `nav`, `.nav` e `.nav-links` embrulharem,
   mas a `.nav-right` não estava na lista. Ficava numa linha só, transbordava,
   e o `overflow-x: clip` do corpo — que existe para impedir a página de se
   arrastar — impedia também de rolar até lá. O conteúdo ficava do outro lado
   de uma parede.

   A saída é deixá-la rolar SOZINHA, na horizontal, com o resto da página
   quieto. É o gesto que toda a gente já conhece das barras de separadores. */
@media (max-width: 640px) {
  .nav-right {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    /* encosta ao fim de cada item em vez de parar a meio de uma palavra */
    scroll-snap-type: x proximity;
    /* espaço à direita para o desvanecimento não tapar o último item */
    padding-right: 26px;
  }
  .nav-right::-webkit-scrollbar { display: none; }
  .nav-right > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* Sem isto ninguém adivinha que há mais. O esbatido à direita é o único
     sinal de que a barra continua — e desaparece assim que se chega ao fim. */
  nav, .topbar { position: relative; }
  nav::after, .topbar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 30px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0,0,0,.28), transparent);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   O SELECTOR DE IDIOMA ABRIA FORA DO ECRÃ
   ══════════════════════════════════════════════════════════════════════════

   Parecia não fazer nada. Não é verdade: a lista abria — `display:block`, as
   quatro línguas lá dentro — mas numa caixa com o canto em **x = −51**, ou
   seja, para lá da borda esquerda. Carregava-se e não acontecia nada visível,
   que para quem usa é a mesma coisa que estar partido.

   A razão é que a lista se posiciona por `right: 0` em relação ao botão, e o
   botão vive agora dentro de uma barra que rola. Num telemóvel a resposta não
   é acertar a matemática — é tirar a lista do problema: passa a folha que
   sobe do fundo, sempre à mão do polegar e impossível de sair do ecrã.

   ⚠️ E À PRIMEIRA ESCREVI O CONTRÁRIO DO QUE ESTE COMENTÁRIO DIZ.
   Ficou `position: fixed` com `top: calc(100% + 8px)`. Num elemento `fixed`,
   as percentagens contam a partir do ECRÃ e não do botão: `100%` é a altura
   toda do viewport, portanto a lista começava 8px ABAIXO do fundo do ecrã.
   Continuava fora de vista — exactamente a avaria que eu julgava ter
   corrigido, e o Wander voltou a reportá-la: «o selector não faz nada».
   A `box-shadow: 0 -8px` (sombra a subir) já denunciava a intenção: uma folha
   ancorada em BAIXO quer `bottom: 0`, nunca um `top` calculado.

   A lição: um controlo só está corrigido quando se verifica o EFEITO —
   escolher um idioma traduz mesmo? — e não quando a lista aparece no DOM. */
@media (max-width: 640px) {
  #kl-lang-lista {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    /* Ancorada ao fundo. Sem `top`, não há percentagem para correr mal. */
    top: auto !important;
    bottom: 0 !important;
    min-width: 0 !important;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 10000;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  }
  /* Numa folha do fundo cada linha merece área de dedo. */
  #kl-lang-lista button { min-height: 48px; }
}