/* migrei. — mobile ajustes
   Sobrescreve inline styles dos componentes React no breakpoint ≤720px. */

html, body { overflow-x: hidden; }

/* ──────────── Typewriter caret (todos os tamanhos) ──────────── */
.m-caret {
  display: inline-block;
  color: var(--accent);
  margin-left: 0.04em;
  font-weight: 400;
  animation: m-caret-blink 1s step-end infinite;
}
.m-caret--done {
  /* continua piscando de leve depois que terminou */
  animation: m-caret-blink 1.2s step-end infinite;
  opacity: 0.6;
}
@keyframes m-caret-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .m-caret { animation: none; opacity: 1; }
}

/* ──────────── Mobile (≤ 720px) ──────────── */
@media (max-width: 720px) {

  /* Nav: esconde tag "/ IA descomplicada" e os links do menu (só wordmark + CTA) */
  .m-nav { padding: 16px 20px !important; gap: 12px; flex-wrap: wrap; }
  .m-nav-tagline { display: none !important; }
  .m-nav-link { display: none !important; }
  .m-nav-sep { display: none !important; }
  .m-nav-right { gap: 12px !important; }
  .m-nav button { padding: 10px 16px !important; font-size: 11px !important; }

  /* Hero Giant — padding e tipografia reduzidos, grid vira 1 col */
  .m-hero-giant { padding: 64px 20px 72px !important; }
  .m-hero-giant-chrome { flex-direction: column !important; gap: 4px; margin-bottom: 32px !important; }
  .m-hero-giant-title { font-size: clamp(64px, 19vw, 120px) !important; line-height: 0.95 !important; letter-spacing: -0.055em !important; }
  .m-hero-giant-info { grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 48px !important; }

  /* Services Editorial — empilha cada row verticalmente */
  .m-services-editorial { padding: 64px 20px !important; }
  .m-section-head { flex-direction: column !important; align-items: flex-start !important; gap: 20px; margin-bottom: 28px !important; }
  .m-section-title { font-size: 44px !important; }
  .m-editorial-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 28px 0 !important;
  }
  .m-editorial-title { font-size: 40px !important; }
  .m-editorial-arrow { display: none !important; }

  /* Process — 3 steps viram 1 coluna */
  .m-process { padding: 56px 20px !important; }
  .m-process-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Manifesto */
  .m-manifesto { padding: 80px 20px !important; }
  .m-manifesto-text { font-size: clamp(36px, 8vw, 56px) !important; line-height: 1.1 !important; }

  /* FAQ */
  .m-faq { padding: 64px 20px !important; }
  .m-faq-q { font-size: 18px !important; }

  /* Cases — 4 cols viram 2 cols */
  .m-cases { padding: 48px 20px !important; }
  .m-cases > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 8px; margin-bottom: 20px !important; }
  .m-cases-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .m-cases-grid > div { font-size: 16px !important; padding: 20px 12px !important; }

  /* CTA Manifesto */
  .m-cta-manifesto { padding: 80px 20px !important; }
  .m-cta-chrome { flex-direction: column !important; gap: 12px; align-items: flex-start !important; margin-bottom: 32px !important; }
  .m-cta-title { font-size: clamp(44px, 11vw, 72px) !important; }

  /* Footer — 4 cols viram 2 cols, wordmark menor */
  .m-footer { padding: 48px 20px 24px !important; }
  .m-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding-bottom: 32px !important; }
  .m-footer-grid > div:first-child { grid-column: 1 / -1; }
  .m-footer-grid > div:first-child span.wordmark,
  .m-footer-grid > div:first-child > :first-child { font-size: 40px !important; }
}

/* ──────────── Small mobile (≤ 400px) ──────────── */
@media (max-width: 400px) {
  .m-hero-giant-title { font-size: 56px !important; }
  .m-editorial-title { font-size: 32px !important; }
  .m-cases-grid > div { font-size: 14px !important; }
}