/* Ajustes de celular para a plataforma.
 *
 * Medido em 08/08/2026 a 375px de largura, nas quatro paginas:
 *
 *   rolagem lateral      nenhuma  — a estrutura ja estava correta
 *   toque abaixo de 40px      32  botoes e links pequenos demais para o dedo
 *   texto abaixo de 12px      30  ilegivel em tela de celular
 *
 * As referencias sao publicas e coincidem: a Apple pede 44pt de area de toque,
 * o Google pede 48dp. Abaixo disso o dedo acerta o vizinho — e num site que o
 * corretor abre na rua, com uma mao, isso e a diferenca entre testar e desistir.
 *
 * Nada aqui muda o layout do computador: tudo vive dentro do mesmo ponto de
 * corte que a plataforma ja usa para trocar a barra pelo menu.
 */
@media (max-width: 880px) {

  /* --- area de toque ---------------------------------------------------- */

  /* O alvo cresce por PADDING, nao por altura fixa: assim o texto continua
     no lugar e so a area sensivel aumenta. */
  .mmenu a,
  footer a,
  .foot a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
  }

  /* Antes/Depois da galeria.
   *
   * Aqui a regra dos 44px NAO se aplica, e a correcao veio do Geraldo olhando
   * a tela: estes botoes flutuam SOBRE a foto, que no celular tem 220px de
   * altura. Levados a 42px, passaram a ocupar 19% da imagem e viraram a
   * primeira coisa que se ve ao abrir a plataforma — competindo justamente com
   * o que deveriam estar demonstrando.
   *
   * 34px e o acordo: 30% mais area de toque que os 26px originais, e discreto
   * o bastante para a foto continuar sendo o assunto. Alvo sobreposto a
   * conteudo tem regra propria — o que vale para um link de rodape nao vale
   * para um controle que mora dentro da imagem.
   */
  .antes, .bDepois, #bAntes, #bDepois,
  .tgl button {
    min-height: 34px;
    padding: 0 13px;
    font-size: 12px;
  }

  /* "Ler mais": 29px. Aparece varias vezes por pagina. */
  .morebtn {
    min-height: 42px;
    padding: 0 16px;
  }

  /* Qualquer botao ou link de acao que tenha escapado das regras acima. */
  .btn, button.btn, a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- tamanho de texto -------------------------------------------------- */

  /* 10,5px e 11px viram 12px. Nao e preciosismo: e o piso em que um texto
     ainda se le sem aproximar o aparelho do rosto. */
  .zoomhint, .founder, .pn, .k, .badge10, .betatag, .sub small,
  small, figcaption,
  /* rotulos de secao e etiquetas dos infograficos: 9,5px a 11,5px medidos
     em como-funciona e central. Sao os textos que EXPLICAM a imagem, entao
     ilegiveis eles anulam o proprio infografico. */
  .eyebrow, .st, .tagx, .bfill, .badge {
    font-size: 12px !important;
    line-height: 1.45;
  }

  /* Etiquetas dentro das figuras: crescem sem empurrar o desenho. */
  .tagx, .st { padding: 3px 8px; }


  /* Etiqueta do topo: Acesso antecipado, vagas de fundador.
   *
   * E a primeira coisa que se ve ao abrir a plataforma no celular, e estava
   * quebrando em duas linhas. A causa fui eu: a regra acima levava .tag de 11px
   * para 12px por legibilidade, e um unico pixel a mais estourou a linha.
   *
   * A frase e longa e muda de tamanho em cada idioma — em russo e hebraico ela
   * cresce. Fixar um tamanho que caiba em portugues quebraria em outro. Por isso
   * a medida acompanha a largura da tela: 3vw da 11,2px num aparelho de 375px e
   * 9,6px num de 320px, sempre presa entre 9,5 e 12px.
   *
   * Abaixo de 340px a frase pode voltar a ocupar duas linhas, e tudo bem: e
   * melhor que espremer a fonte a ponto de ninguem ler.
   */
  .tag {
    font-size: clamp(9.5px, 3vw, 12px) !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    max-width: 100%;
    /* justify-content: normal deixava o conteudo encostado a esquerda. Com o
       ponto luminoso e o gap de 9px ocupando esse lado, o texto terminava 30px
       da borda esquerda e 16px da direita — visivelmente jogado para a direita.
       Centralizar o conteudo resolve mesmo se a pilula esticar. */
    justify-content: center !important;
    letter-spacing: .12em !important;   /* .16em era o que mais empurrava a linha */
  }

  /* Contrapeso do ponto luminoso.
   *
   * A pilula ja esta centrada na pagina, mas o conteudo dela e
   * [ponto][espaco][texto] — o ponto ocupa so o lado esquerdo, e o texto acaba
   * 28px da borda esquerda contra 13px da direita. Centrar o CONJUNTO nao
   * centra o TEXTO, e e o texto que o olho le como torto.
   *
   * Este pseudo-elemento e um ponto invisivel do outro lado, com a mesma
   * largura. O conjunto passa a ser [ponto][texto][ponto invisivel] e o texto
   * cai no centro optico da pilula, com o ponto seguindo visivel a esquerda.
   */
  .tag::after {
    content: '';
    width: 5px;
    flex: none;
  }
  @media (max-width: 340px) {
    .tag { white-space: normal !important; text-align: center; }
  }


  /* Centralizacao dos blocos de acao.
   *
   * No computador a coluna e larga e um botao alinhado a esquerda parece
   * intencional. No celular a coluna tem a largura da tela, e o mesmo botao
   * fica visivelmente torto — foi o caso do Abrir a central agora, encostado
   * a esquerda com 124px de folga do outro lado.
   *
   * A regra vale para o CONTAINER, nao para o botao: assim funciona igual em
   * RTL, onde esquerda e direita trocam de papel.
   */
  .hero-cta, .cta, .cta-row, .actions, .btnrow,
  section > div > .btn,
  div:has(> .btn:only-child) {
    text-align: center;
  }
  .btn { margin-inline: auto; }

  /* --- respiro ----------------------------------------------------------- */

  /* Itens de toque colados um no outro produzem erro mesmo quando cada um tem
     o tamanho certo. */
  .mmenu { gap: 2px; }
  .tgl { gap: 8px; }
}

/* Telas estreitas de verdade (iPhone SE e parecidos). */
@media (max-width: 380px) {
  .bl-langmob-op { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   Secoes recolhidas no celular
   ---------------------------------------------------------------------------
   A pagina tinha 17,8 telas de altura a 375px. As cinco secoes mais longas
   passam a abrir sob demanda; o caminho ate o botao de teste cai para duas
   rolagens.

   O recorte usa max-height com um degrade no fim, e nao overflow:hidden seco:
   o texto cortado no meio precisa PARECER cortado, senao ninguem percebe que
   ha mais coisa e o botao vira enfeite.
*/
@media (max-width: 880px) {
  .recolhida {
    position: relative;
    max-height: 320px;
    overflow: hidden;
    transition: max-height .32s ease;
  }
  .recolhida::after {
    content: '';
    position: absolute; inset-inline: 0; bottom: 0; height: 130px;
    background: linear-gradient(180deg, transparent, var(--bg, #0B0F18) 88%);
    pointer-events: none;
  }
  .recolhida.aberta { max-height: 20000px; }
  .recolhida.aberta::after { opacity: 0; }

  .abrir-secao {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; min-height: 46px; margin: 12px 0 4px;
    border-radius: 11px; cursor: pointer;
    border: 1px solid rgba(231,163,78,.34);
    background: rgba(231,163,78,.10);
    color: var(--amber, #E7A34E);
    font: inherit; font-size: 13.5px; font-weight: 600;
  }
  .abrir-secao .seta { transition: transform .25s; font-size: 11px; }
  .abrir-secao.aberto .seta { transform: rotate(180deg); }
}