/* ============================================================================
   landing-mobile.css
   Camada mobile das landings publicas (index-ainvesting PT/EN/ES).

   Cobre tres problemas distintos:

   1. NAVEGACAO — as landings escondiam `.nav-links` em <=968px sem oferecer
      substituto, e escondiam o "Entrar" em <=560px. No celular o header ficava
      so com logo + "Testar gratis"; Ativos, Recursos, Como funciona, Metodo IA,
      Perguntas, Planos e Entrar eram inalcancaveis. A mesma `.nav-links` volta
      como painel dobravel.

   2. HEADER TRANSBORDANDO — logo (22px) + seletor de idioma + "Entrar" +
      "Testar gratis" nao cabem lado a lado num celular. O resultado era o nome
      da marca quebrando em duas linhas e o CTA cortado fora da viewport.

   3. TIMELINE DESMONTADA — `.timeline-item` e um grid de 3 filhos em fluxo
      (timeline-left, timeline-marker, timeline-right). Em <=968px a pagina
      reduzia para `grid-template-columns: 60px 1fr` (2 colunas) e reordenava
      com `order`. Com 3 itens e 2 colunas, o auto-placement joga o terceiro
      (`.timeline-right`, que carrega o TEXTO) para a linha 2 da coluna de 60px
      — dai o texto saindo uma palavra por linha e a trilha vertical cruzando
      por cima dele. Aqui o item vira coluna unica com o marcador absoluto, o
      que elimina a fragilidade de posicionamento no grid.

   Unidades: em/rem/% e vh — nada de px fixo. Os breakpoints em `em` respeitam
   o zoom e o tamanho de fonte do sistema (60.5em = 968px na fonte padrao),
   casando com os breakpoints ja existentes nas paginas.

   Carregar DEPOIS do <style> inline da pagina, pra ganhar em ordem de cascata.
   ============================================================================ */

/* Hamburguer so existe em mobile */
nav .nav-toggle { display: none; }

/* Se o JS nao rodar, o conteudo da timeline nao pode ficar preso no estado
   "inativo" (opacity 0.4/0.3) — sem a classe .is-active ele seria ilegivel. */
html.no-js .timeline-content,
html.no-js .timeline-visual {
  opacity: 1 !important;
  transform: none !important;
}

/* "Entrar" e o seletor de idioma dentro do painel: so em mobile.
   No desktop os dois vivem no header. Estes defaults ficam ANTES dos @media
   de proposito — mesma especificidade, quem vem depois ganha. */
nav .nav-links .nav-links-auth,
nav .nav-links .nav-links-lang { display: none; }

@media (max-width: 60.5em) {

  /* ==========================================================================
     HEADER — cabe na viewport sem cortar nada
     ========================================================================== */

  nav .nav-inner {
    position: relative;
    flex-wrap: nowrap;          /* nunca quebra em duas linhas */
    gap: 0.5rem;
  }

  /* A marca encolhe (e trunca, se precisar) em vez de empurrar o CTA pra fora */
  nav .logo {
    font-size: 1.0625rem;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
  }
  nav .logo > span {
    white-space: nowrap;        /* era isto que quebrava "AInvesting / Pro" */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav .logo-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* O bloco de CTAs nunca encolhe nem transborda */
  nav .nav-cta {
    flex: 0 0 auto;
    gap: 0.5rem;
    min-width: 0;
  }

  /* "Entrar" e o seletor de idioma passam a viver no painel do hamburguer.
     A pagina so escondia o .btn-ghost em <=560px — entre 561px e 968px os
     quatro elementos disputavam a mesma linha e o CTA saia da tela. */
  nav .nav-cta .btn-ghost,
  nav .nav-cta .lang-switcher { display: none; }

  /* CTA principal compacto, texto em uma linha, sempre inteiro */
  nav .nav-cta .btn-primary {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.75rem = 44px na fonte padrao: alvo de toque minimo recomendado */
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    margin-left: 0.5rem;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 0.625rem;
    background: rgba(72, 149, 255, 0.06);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  nav .nav-toggle:focus-visible {
    outline: 2px solid var(--cyan, #4895ff);
    outline-offset: 2px;
  }

  /* Icone: 3 barras que viram X quando aberto. Tamanho relativo ao botao. */
  nav .nav-toggle .bars {
    position: relative;
    display: block;
    width: 1.125rem;
    height: 0.75rem;
  }
  nav .nav-toggle .bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.125rem;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
  }
  nav .nav-toggle .bars span:nth-child(1) { top: 0; }
  nav .nav-toggle .bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  nav .nav-toggle .bars span:nth-child(3) { top: 100%; transform: translateY(-100%); }

  body.nav-open nav .nav-toggle .bars span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  body.nav-open nav .nav-toggle .bars span:nth-child(2) { opacity: 0; }
  body.nav-open nav .nav-toggle .bars span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* `.nav-links` deixa de ser a fileira horizontal e vira painel dobravel.
     A pagina define `display: none` neste breakpoint — sobrescrevemos. */
  nav .nav-links {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    /* Cola no fundo da nav (que tem padding vertical proprio) */
    margin-top: 1.25rem;
    padding: 0.375rem 0;
    background: rgba(5, 8, 22, 0.97);
    -webkit-backdrop-filter: blur(1.25rem);
    backdrop-filter: blur(1.25rem);
    border: 1px solid var(--border-subtle);
    border-radius: 0 0 0.875rem 0.875rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);

    /* Fechado: sem altura, sem foco alcancavel */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.26s ease, opacity 0.2s ease, visibility 0.2s ease;
  }

  body.nav-open nav .nav-links {
    max-height: 75vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    -webkit-overflow-scrolling: touch;
  }

  nav .nav-links li { width: 100%; }

  nav .nav-links .nav-links-auth {
    display: block;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.375rem;
    padding-top: 0.375rem;
  }

  nav .nav-links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    color: var(--text-secondary);
  }
  nav .nav-links a:active { background: rgba(72, 149, 255, 0.1); }

  /* Trava o scroll do body enquanto o painel esta aberto */
  body.nav-open { overflow: hidden; }

  /* ==========================================================================
     TIMELINE — coluna unica, marcador absoluto
     ==========================================================================
     A pagina fazia `grid-template-columns: 60px 1fr` + `order` com TRES filhos
     em fluxo. Auto-placement em 2 colunas manda o terceiro pra linha 2 / coluna
     1 — ou seja, o texto ia pra coluna de 60px. Aqui saimos do grid: `flex
     column` + marcador `position: absolute` remove qualquer dependencia de
     posicionamento implicito, e `order` com `:has()` garante TEXTO ANTES DOS
     CARDS em todos os itens (no desktop os lados alternam; no mobile alternar
     deixaria uns itens comecando pelo grafico e outros pelo texto).
     ========================================================================== */

  .timeline { padding: 1.25rem 0; }

  .timeline-item,
  .timeline-item.reverse {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 3rem;         /* espaco da trilha + marcador */
    margin-bottom: 3.5rem;
    min-height: 0;
    align-items: stretch;
  }

  /* Marcador sai do fluxo e fica alinhado na trilha vertical (left: 24px) */
  .timeline-item > .timeline-marker,
  .timeline-item.reverse > .timeline-marker {
    position: absolute;
    left: 0.85rem;              /* centraliza nos 2px da trilha em 1.5rem */
    top: 0.35rem;
    margin: 0;
    order: 0;
  }

  /* Texto primeiro, visual depois — igual em todos os itens.
     Os lados alternam no HTML (item normal: left=visual/right=texto; item
     reverse: o contrario), por isso a selecao e pelo CONTEUDO e nao pelo lado.

     `!important` e necessario: a pagina define
       .timeline-item.reverse .timeline-side.timeline-left { order: 3 }
     que tem especificidade (0,4,0), maior que a de
       .timeline-item > .timeline-side:has(.timeline-content)  -> (0,3,0)
     (a especificidade de :has() e a do seu argumento mais especifico). Sem isto
     os itens `.reverse` continuavam mostrando os cards ANTES do texto — foi
     exatamente o que a verificacao no browser pegou nos itens 2 e 4. */
  .timeline-item > .timeline-side:has(.timeline-content) { order: 1 !important; }
  .timeline-item > .timeline-side:has(.timeline-visual)  { order: 2 !important; }

  /* Fallback para navegadores sem :has() — mapeia os lados explicitamente. */
  @supports not selector(:has(*)) {
    .timeline-item:not(.reverse) > .timeline-right { order: 1 !important; }
    .timeline-item:not(.reverse) > .timeline-left  { order: 2 !important; }
    .timeline-item.reverse > .timeline-left  { order: 1 !important; }
    .timeline-item.reverse > .timeline-right { order: 2 !important; }
  }

  .timeline-item > .timeline-side {
    min-width: 0;               /* deixa o conteudo encolher em vez de estourar */
    width: 100%;
    padding: 0 0 1.25rem 0 !important;
    text-align: left !important;
  }
  .timeline-item > .timeline-side:last-child { padding-bottom: 0 !important; }

  /* O numero de fundo era 140px com `right: -10px` — transbordava a viewport */
  .timeline-bg-number {
    font-size: 4.5rem;
    right: 0 !important;
    left: auto !important;
    top: -0.75rem;
    transform: none;
  }

  .timeline-content h3 { font-size: 1.5rem; }
  .timeline-content p  { font-size: 0.9375rem; }

  /* Qualquer visual da timeline (graficos, pills, cards) respeita a largura */
  .timeline-visual,
  .timeline-visual > * {
    max-width: 100%;
    min-width: 0;
  }

  /* Cards da timeline: o padding de 24px comia quase 1/3 da largura util num
     celular, apertando o conteudo interno. */
  .visual-monitoring,
  .visual-indicators,
  .visual-filters { padding: 1rem; border-radius: 0.875rem; }

  /* 6 pills de timeframe em ~17rem davam ~2.5rem cada — ilegivel. Duas fileiras. */
  .monitoring-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Sombras enormes (0 20px 50px) somadas empilhadas pesam no compositor mobile */
  .visual-monitoring,
  .visual-indicators,
  .visual-filters,
  .visual-final-alert { box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35); }

  /* ==========================================================================
     REDE DE SEGURANCA CONTRA SCROLL HORIZONTAL
     `clip` em vez de `hidden`: nao cria contexto de scroll, entao nao quebra
     `position: sticky` nem o scroll-behavior das ancoras do menu.
     ========================================================================== */
  html { overflow-x: clip; }
  body { overflow-x: clip; }
}

/* Respeita quem pediu menos animacao: sem isso o conteudo depende do scroll
   pra sair de opacity 0.4 e pode nunca acender. */
@media (prefers-reduced-motion: reduce) {
  .timeline-content,
  .timeline-visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* O seletor de idioma sai do header em <=60.5em (bloco acima), entao a versao
   dentro do painel tem de aparecer no MESMO breakpoint — antes ela so entrava em
   <=35em, deixando 561px-968px sem nenhuma forma de trocar de idioma. */
@media (max-width: 60.5em) {
  nav .nav-links .nav-links-lang {
    display: block;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.375rem;
    padding: 0.625rem 1.25rem;
  }
  nav .nav-links .nav-links-lang .lang-switcher { display: inline-flex; }
}

/* Sem JS (ou JS quebrado) o painel nao abre — nesse caso e melhor manter os
   links empilhados e visiveis do que sumir com a navegacao inteira. */
@media (max-width: 60.5em) {
  html.no-js nav .nav-links {
    position: static;
    max-height: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    margin-top: 0.75rem;
    box-shadow: none;
    border: 0;
    background: transparent;
  }
  html.no-js nav .nav-toggle { display: none; }
  html.no-js nav .nav-inner { flex-wrap: wrap; }
}