/* ============================================================
   MOBILE FIXES — Asimov Work Hub Landing
   Correções de responsividade para viewports < 768px.
   Carregar DEPOIS do landing.css.
   ============================================================ */

/* ============================================================
   FIX GLOBAL — Eliminar overflow horizontal da raiz.
   ============================================================ */
html, body {
  overflow-x: clip;        /* `clip` é mais seguro que `hidden` (não cria scroll context) */
  max-width: 100%;
}

/* ============================================================
   MOBILE — viewports até 640px
   ============================================================ */
@media (max-width: 640px) {

  /* --------------------------------------------------------
     NAV — encurtar CTA e dar respiro
     -------------------------------------------------------- */
  #top-nav { padding: 0 var(--space-4); }
  .nav-inner { gap: var(--space-3); height: 52px; }

  /* "Entrar" some no muito pequeno — só fica o CTA principal */
  .nav-actions .btn-ghost { display: none; }

  /* CTA "Começar agora..." vira "Cadastrar" + ícone, mais curto */
  .nav-actions .btn-primary {
    /* Esconde TODO o conteúdo (incluindo text nodes soltos) zerando font-size,
       e restaura no ::before e no SVG. */
    font-size: 0;
    padding: 6px 12px;
  }
  .nav-actions .btn-primary::before {
    content: 'Cadastrar';
    font-size: 13px;
    font-weight: var(--weight-medium);
    line-height: 1.2;
  }
  .nav-actions .btn-primary .arrow {
    /* SVG continua visível em tamanho normal */
    width: 14px;
    height: 14px;
  }

  /* --------------------------------------------------------
     HERO — typewriter sem altura fixa + título escala melhor
     -------------------------------------------------------- */
  .hero h1 {
    font-size: clamp(36px, 9vw, 52px);
    letter-spacing: -0.03em;
  }
  .typewriter-wrap {
    /* Altura mínima em vez de fixa — evita sobreposição quando
       o texto rotativo passa de 1 linha. */
    height: auto;
    min-height: 1.05em;
    /* Quebra de linha natural sem estourar o container */
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .hero-sub {
    font-size: var(--size-body-m);
    padding: 0 var(--space-2);
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: 0 var(--space-4);
  }
  .hero-cta .btn { width: 100%; }

  .hero-meta {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Badge NOVO + texto: fica grande no 320, encolher um pouco */
  .hero-badge {
    font-size: 13px;
    padding: 6px 10px 6px 6px;
    line-height: 1.35;
  }
  .hero-badge-tag { font-size: 10px; padding: 3px 7px; }

  /* --------------------------------------------------------
     MacBook: oculto no mobile até ajustar scroll/layout (evita 200vh + sticky).
     -------------------------------------------------------- */
  .macbook-stage {
    display: none !important;
  }

  /* --------------------------------------------------------
     ORBIT (Talentos) — reduzir e garantir contenção
     -------------------------------------------------------- */
  .orbit { max-width: 320px; }
  .orbit-core { width: 80px; height: 80px; }
  .orbit-core-mark { font-size: 52px; }
  .orbit-node {
    /* clampa pra não saírem do container; ajuste fino mantém visual */
    transform: scale(0.75) translate(var(--ox, 0), var(--oy, 0));
  }

  /* --------------------------------------------------------
     SECTION padding — encurtar respiros gigantes
     -------------------------------------------------------- */
  .section { padding: var(--space-16) 0; }

  /* --------------------------------------------------------
     CONTAINERS — garantir que respeitam o viewport
     -------------------------------------------------------- */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ============================================================
   ULTRA SMALL — viewports muito apertados (< 380px)
   ============================================================ */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(32px, 8.5vw, 42px); }
  .hero-badge { font-size: 12px; }
  .nav-logo-name { font-size: 14px; }
  .nav-logo-mark { width: 24px; height: 24px; }
}