/* ==========================================================================
   Breakpoints — desktop-first; overrides para tablet e mobile
   ========================================================================== */

/* ---------- < 1024px (tablet / abaixo de lg) ---------- */
@media (max-width: 1023px) {
  /* Header: troca nav desktop por menu mobile */
  .nav-desktop,
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Empilhamento: vira fluxo de blocos (igual ao original abaixo de lg).
     display:block evita qualquer overflow de trilha causado por conteúdo
     de largura fixa (nucleus) — os blocos sempre respeitam a largura disponível. */
  .hero-inner,
  .services-head,
  .services-grid,
  .about-inner,
  .faq-inner,
  .final-cta-inner {
    display: block;
  }

  /* Espaçamento entre os blocos empilhados (antes era o gap do grid) */
  .services-intro,
  .services-visual,
  .about-visual,
  .faq-list,
  .contact-form { margin-top: 2.5rem; }

  .hero-visual { display: flex; justify-content: center; margin-top: 3rem; }

  .services-visual-card { position: static; max-width: 460px; margin-inline: auto; width: 100%; }

  /* Automação: em tablet o fluxo precisa quebrar antes do layout mobile. */
  .flow-nodes { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .flow-node:not(:last-child)::after { display: none; }

  /* Antes/Depois: em larguras médias os fragmentos do painel "ANTES"
     colidiam entre si — versão compacta (mesma simplificação que o mobile
     já usava em ≤480px) e palco mais alto */
  .ba-stage { min-height: clamp(15rem, 30vw, 19rem); }
  .ba-fragment { width: min(52%, 13rem); padding: 0.8rem; }
  .ba-fragment-b { top: 44%; }
  .ba-fragment small,
  .ba-fragment::after { display: none; }
  .ba-fragment strong { font-size: 0.95rem; }

  /* Processo: timeline vira coluna única à esquerda */
  .timeline::before { left: 1.5rem; }
  .timeline-item { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 4rem; }
  .timeline-item:nth-child(odd) .timeline-label,
  .timeline-item:nth-child(even) .timeline-label,
  .timeline-item:nth-child(odd) .timeline-desc,
  .timeline-item:nth-child(even) .timeline-desc {
    text-align: left;
    padding: 0;
    order: initial;
  }
  .timeline-item:nth-child(even) .timeline-desc p { margin-left: 0; }
  .timeline-dot { left: 1.5rem; }
}

/* ---------- < 768px (mobile) ---------- */
@media (max-width: 767px) {
  .header-inner { height: 64px; }
  .mobile-menu { --mobile-menu-top: 64px; }

  .hero { padding-top: 8rem; padding-bottom: 5rem; }

  /* Nucleus do hero não precisa dos 520px no celular */
  .hero-visual .nucleus-wrap { --nucleus-size: 360px; }
  .hero-visual .earth-hero-wrap { --earth-hero-size: 360px; }
  /* Floating tags mais contidas para não vazar a viewport */
  .ft-2 { right: 0; }
  .ft-3 { left: -0.5rem; }

  .projects-head,
  .automation-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .projects-grid { grid-template-columns: 1fr; }

  /* Automação: nós em 2 colunas */
  .flow-nodes { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Manifesto e antes/depois: 1 coluna */
  .manifesto-list { grid-template-columns: 1fr; }
  .ba-items { grid-template-columns: 1fr; }
  .ba-compare {
    aspect-ratio: auto;
    min-height: clamp(34rem, 94vw, 40rem);
  }
  /* Palco mais alto e fragmentos em cascata vertical: nas metades
     estreitas do slider os três cards precisam de mais respiro.
     Cards mais largos evitam quebra de linha (e a colisão vertical). */
  .ba-stage { min-height: 17rem; }
  .ba-fragment { width: min(64%, 13rem); }
  .ba-fragment-a { top: 0.75rem; }
  .ba-fragment-b { top: 38%; }
  .ba-fragment-c { bottom: 0.75rem; }

  /* Serviços: detalhe em 1 coluna */
  .service-detail-inner ul { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1.5fr 8fr 1.5fr; }

  /* Formulário em 1 coluna */
  .form-grid { grid-template-columns: 1fr; }

  /* Footer empilhado */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Menu mobile rolável caso não caiba na altura */
  .mobile-menu.is-open {
    max-height: calc(100dvh - var(--mobile-menu-top, 64px));
    overflow-y: auto;
  }
}

/* ---------- <= 480px (celulares pequenos) ---------- */
@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
  .section { padding-block: clamp(3.25rem, 13vw, 5rem); }

  .hero { padding-top: 7rem; padding-bottom: 4rem; }
  .hero-title { font-size: clamp(1.85rem, 8.8vw, 2.4rem); line-height: 1.06; }
  .hero-lead { font-size: 1.05rem; margin-top: 1.5rem; }
  .hero-foot {
    position: relative;
    display: block;
    width: 100%;
    min-height: 2.8rem;
    padding-left: 1.25rem;
    padding-right: 7rem;
  }
  .hero-foot .dot {
    position: absolute;
    left: 0;
    top: 0.55em;
  }

  /* Em telas mínimas os títulos grandes respiram melhor um pouco mais soltos */
  .section-title,
  .ba-title,
  .manifesto-title,
  .differential-title,
  .final-cta-title { line-height: 1.12; }

  /* Títulos de seção menores para caber sem aperto */
  .section-title,
  .ba-title,
  .manifesto-title,
  .differential-title,
  .final-cta-title,
  .faq-head .section-title {
    font-size: clamp(1.7rem, 7.6vw, 2.3rem);
  }
  .differential-lead,
  .final-cta-lead,
  .services-intro,
  .projects-intro,
  .automation-intro { font-size: 1.05rem; }

  /* Legendas mono informativas: mínimo legível de 12px no celular */
  .hero-foot,
  .flow-caption,
  .final-cta-foot,
  .form-status { font-size: 0.75rem; }

  /* Nucleus menor */
  .hero-visual .nucleus-wrap { --nucleus-size: 300px; }
  .hero-visual .earth-hero-wrap { --earth-hero-size: 300px; }

  /* Botões de CTA empilham e ocupam a largura toda */
  .hero-actions,
  .final-cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn,
  .final-cta-actions .btn { width: 100%; }

  /* Antes/Depois vira uma peça mais vertical nas telas mínimas */
  .ba-compare { min-height: clamp(34rem, 150vw, 40rem); }
  .ba-panel { padding: 1.1rem; }
  .ba-panel-code { display: none; }
  .ba-panel-top,
  .ba-panel-foot {
    width: calc(50% - 0.75rem);
  }
  .ba-zone {
    width: calc(50% - 0.75rem);
    gap: 0.75rem;
  }
  .ba-stage { min-height: 13.5rem; border-radius: 0.75rem; }
  .ba-fragment {
    width: calc(100% - 1rem);
    padding: 0.75rem;
  }
  .ba-fragment-a { top: 0.5rem; left: 0.5rem; }
  .ba-fragment-b { top: 38%; right: 0.5rem; }
  .ba-fragment-c { display: none; }
  .ba-core-card {
    min-width: 0;
    width: calc(100% - 1rem);
    padding: 0.8rem;
  }
  .ba-node {
    width: calc(50% - 0.7rem);
    padding: 0.55rem;
  }
  .ba-node strong { font-size: 0.78rem; }
  .ba-node-a,
  .ba-node-c { left: 0.5rem; }
  .ba-node-b,
  .ba-node-d { right: 0.5rem; }
  .ba-node-a,
  .ba-node-b { top: 0.5rem; }
  .ba-node-c,
  .ba-node-d { bottom: 0.5rem; }
  .ba-proof-list { grid-template-columns: 1fr; }
  .ba-proof-list li {
    font-size: 0.78rem;
    gap: 0.4rem;
  }
  .ba-panel-foot { font-size: 0.54rem; }

  .ba-fragment small,
  .ba-fragment::after,
  .ba-core-card small,
  .ba-node {
    display: none;
  }
  .ba-fragment {
    padding: 0.65rem;
  }
  .ba-fragment strong {
    font-size: 0.86rem;
    line-height: 1.15;
  }
  .ba-core-card {
    display: grid;
    align-content: center;
    min-height: 5.75rem;
  }
  .ba-core-card strong {
    font-size: 0.9rem;
    line-height: 1.15;
  }
  .ba-flow-line-a { top: 34%; }
  .ba-flow-line-b { top: 50%; }
  .ba-flow-line-c { top: 66%; }

  /* Marquee grande (pilares) menor */
  .differential-track .pillar { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* Fluxo: nós em coluna única para não apertar */
  .flow-nodes { grid-template-columns: 1fr; }
}

/* ---------- Paisagem em telas baixas (celular deitado) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 6rem; padding-bottom: 3rem; }
  .mobile-menu.is-open { max-height: calc(100dvh - var(--mobile-menu-top, 80px)); overflow-y: auto; }
}

/* ---------- Ultrawide: container já limitado a 1320px; conteúdo centralizado ---------- */
@media (min-width: 1800px) {
  :root { --container-width: 1440px; }
}