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

html, body { overflow-x: hidden; }

/* ──────────── Animações dos demos de chatbot (todos os tamanhos) ──────────── */
@keyframes m-bubble-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes m-typing {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .m-chat-bubble-wrap { animation: none !important; }
}

/* Esconde scrollbar do carrossel de demos mantendo o swipe ativo */
.m-chatdemo-rail::-webkit-scrollbar { display: none; }
.m-chatdemo-rail { scrollbar-width: none; }

/* Centraliza e limita conteúdo das seções de demo em telas largas
   pra evitar que cards (phone/terminal) colem na borda direita */
.m-service-demos {
  padding-left: clamp(20px, 4vw, 64px) !important;
  padding-right: clamp(20px, 4vw, 64px) !important;
}
.m-service-demos > .m-service-demos-head,
.m-service-demos > .m-agent-tabs,
.m-service-demos > .m-agent-flavor-content {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
/* Operacional: centraliza e limita o stage */
.m-service-demos .m-ops-stage {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
/* Atendimento: cada slide do carrossel respeita max-width interno */
.m-service-demos .m-chatdemo-slide {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 8px;
}

/* Pulso usado pela barra de status do builder de site */
@keyframes m-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* Linha do terminal de operacional */
@keyframes m-line-in {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Morph de palavra (usado no MorphingTitle do hero da /site) */
@keyframes m-morph-in {
  0%   { opacity: 0; transform: translateY(0.18em); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .m-morph-word { animation: none !important; filter: none !important; }
}

/* Esconde scrollbar do terminal mas mantém o scroll funcional */
.m-opsterm > div:last-child::-webkit-scrollbar { width: 6px; }
.m-opsterm > div:last-child::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 99px; }
.m-sitebuilder-screen::-webkit-scrollbar { width: 6px; }
.m-sitebuilder-screen::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 99px; }

/* ──────────── Animação + → ↗ na lista editorial ──────────── */
.m-editorial-arrow {
  position: relative;
  width: 44px;
  height: 44px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}
.m-arrow-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform, opacity;
}
/* Estado padrão: + visível, ↗ escondida e pré-rotacionada */
.m-arrow-plus  { opacity: 1; transform: rotate(0deg) scale(1); }
.m-arrow-arrow { opacity: 0; transform: rotate(-90deg) scale(0.5); }
/* Hover: + gira fora, ↗ entra do lado */
.m-editorial-arrow.is-hover .m-arrow-plus  { opacity: 0; transform: rotate(90deg) scale(0.5); }
.m-editorial-arrow.is-hover .m-arrow-arrow { opacity: 1; transform: rotate(0deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .m-arrow-glyph { transition: opacity 100ms linear; transform: none !important; }
}

/* ──────────── Hero typewriter — layout das linhas ──────────── */
/* Desktop default: linha 1 (Sua) e linha 2 (empresa) ficam INLINE = "Sua empresa";
   linha 3 (já migrou.) vai pra próxima linha (block). */
.m-hero-line { display: inline; white-space: nowrap; }
.m-hero-line-1::after { content: ' '; white-space: pre; }
.m-hero-line-3 { display: block; }

/* Mobile: cada linha em uma linha própria */
@media (max-width: 720px) {
  .m-hero-line { display: block !important; white-space: nowrap; }
  .m-hero-line-1::after { content: '' !important; }
}

/* ──────────── 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 mobile: esconde links/CTA do desktop, mostra burger */
  .m-nav { padding: 16px 20px !important; gap: 12px; }
  .m-nav-tagline { display: none !important; }
  .m-nav-right { display: none !important; }
  .m-nav-burger { display: inline-flex !important; align-items: center; justify-content: center; }
  .m-nav-drawer a:active { background: rgba(10,10,10,0.04); }

  /* 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; }

  /* Blog list — 3 cols (meta · texto · data) viram empilhado vertical */
  .m-blog-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .m-blog-row .m-blog-date { text-align: left !important; }
  .m-blog-title { font-size: 26px !important; }
  .m-blog-lead { font-size: 15px !important; }
}

@media (max-width: 720px) {
  /* ──────────── Página Chatbot — ServiceHero/Deliverables/Timeline/Cases/FAQ ──────────── */

  /* ServiceHero: empilha colunas, reduz título, prazo/preço lado a lado mas menores */
  .m-service-hero { padding: 56px 20px 64px !important; }
  .m-service-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
  }
  .m-service-hero-title {
    font-size: clamp(56px, 17vw, 96px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
  }
  .m-service-hero-sub { font-size: 17px !important; }
  .m-service-hero-meta-cell { padding: 14px !important; }
  .m-service-hero-meta-cell + div { padding: 14px !important; }
  .m-service-hero-meta div[style*="font-size: 28px"],
  .m-service-hero-meta > div > div:last-child {
    font-size: 22px !important;
  }

  /* ServiceDeliverables: 1 coluna, header empilhado, título menor */
  .m-service-deliverables { padding: 64px 20px !important; }
  .m-service-deliverables-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 32px !important;
  }
  .m-service-deliverables-title { font-size: 44px !important; }
  .m-service-deliverables-grid { grid-template-columns: 1fr !important; }
  .m-service-deliverables-cell { padding: 24px !important; min-height: auto !important; }

  /* ServiceTimeline: 5 cols → 1 col, dia em formato de lista vertical */
  .m-service-timeline { padding: 64px 20px !important; }
  .m-service-timeline-title { font-size: 44px !important; margin-bottom: 36px !important; }
  .m-service-timeline-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .m-service-timeline-cell { padding: 20px 0 24px 0 !important; }

  /* ServiceCases: 1 col, número grande menor */
  .m-service-cases { padding: 64px 20px !important; }
  .m-service-cases-title { font-size: 44px !important; margin-bottom: 32px !important; }
  .m-service-cases-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .m-service-cases-card { padding: 24px !important; }
  .m-service-cases-head { flex-direction: column !important; gap: 4px !important; }
  .m-service-cases-name { font-size: 24px !important; }
  .m-service-cases-big { font-size: 64px !important; }
  .m-service-cases-quote { font-size: 17px !important; padding-left: 14px !important; }

  /* ServiceFAQ */
  .m-service-faq { padding: 64px 20px !important; }
  .m-service-faq-title { font-size: 40px !important; margin-bottom: 28px !important; }

  /* ServiceChatbotDemos: empilha texto e celular, celular menor */
  .m-service-demos { padding: 56px 20px 72px !important; }
  .m-service-demos-head { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; margin-bottom: 32px !important; }
  .m-service-demos-title { font-size: 40px !important; }
  .m-chatdemo-slide { grid-template-columns: 1fr !important; gap: 28px !important; }
  .m-chatdemo-meta > div:nth-child(2) { font-size: 26px !important; }
  .m-chatdemo-phone { width: 300px !important; }
  .m-chatdemo-phone > div { height: 480px !important; }
  .m-chatdemo-rail { gap: 20px !important; }

  /* Builder de site: bordas mais discretas no mobile */
  .m-sitebuilder { border-radius: 10px !important; }
  .m-sitebuilder-screen { min-height: 380px !important; }

  /* Hero com tiers (página /agente): empilha colunas, tiers ficam abaixo do título */
  .m-service-hero-tiers-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Demo operacional: empilha texto e terminal */
  .m-ops-stage { grid-template-columns: 1fr !important; gap: 24px !important; }
  .m-opsterm { max-width: 100% !important; }
  .m-opsterm > div:last-child { height: 320px !important; padding: 14px !important; font-size: 12px !important; }

  /* Tabs do agente: rola horizontal se não couber */
  .m-agent-tabs { width: 100%; justify-content: stretch !important; }
  .m-agent-tabs button { flex: 1; padding: 10px 16px !important; }

  /* CTA Band — reduz padding e fonte do textarea pra caber o placeholder */
  .m-cta-band { padding: 80px 20px !important; }
  .m-cta-band-title {
    font-size: clamp(56px, 14vw, 88px) !important;
    line-height: 0.95 !important;
    margin: 20px 0 32px !important;
  }
  .m-cta-band-input {
    font-size: 16px !important;
    padding: 12px 0 !important;
  }
  .m-cta-band-input::placeholder {
    font-size: 16px !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; }
}