/* ============================================================================
   MAI — responsive.css
   Todas as media queries do site, em ordem crescente (mobile-first a partir
   das bases definidas em style.css).

   Breakpoints:  640 (sm) · 768 (md) · 1024 (lg) · 1280 (xl)
   O layout foi desenhado no desktop e depois adaptado; as bases em style.css
   já são a versão mobile, então aqui só somamos.
   ========================================================================== */

/* ==========================================================================
   ≥ 640px — SM · telefone grande / tablet retrato
   ========================================================================== */
@media (min-width: 640px) {

  /* --- Hero --- */
  .hero__ctas { flex-direction: row; align-items: center; }
  .hero__ctas .btn { width: auto; }

  .hero__assurances {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
  }

  .console { padding: 1.25rem; }
  .console__live { display: block; }
  .panel--map { display: block; }

  .chip--tr { right: 2rem; }
  .chip--bl { left: 2rem; }

  /* --- Seção --- */
  .section-head__title { font-size: 2.75rem; }
  .br-sm { display: block; }

  /* --- Problema --- */
  .problem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem__art { height: 11rem; }

  .consequence { flex-direction: row; align-items: center; justify-content: space-between; }
  .consequence__aside { max-width: 20ch; text-align: right; }

  /* --- Plataforma --- */
  .app__topbar { padding-inline: 1.25rem; }
  .app__body { padding: 1.25rem; }
  .app__search { display: flex; }
  .panel--chart { padding: 1.25rem; }
  .insight { padding: 1.25rem; }

  /* --- Benefícios --- */
  .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits__wide { grid-column: span 2; }

  /* --- Diferenciais --- */
  .diff__title { font-size: 2.75rem; }
  .diff__row { gap: 2rem; }

  /* --- Público --- */
  .audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience__note { flex-direction: row; align-items: center; }

  /* --- Visão --- */
  .vision__title { font-size: 3.25rem; }
  .vision__pills { gap: 0.75rem; }

  /* --- CTA --- */
  .cta__title { font-size: 3rem; }
  .cta__buttons { width: auto; flex-direction: row; align-items: center; }
  .cta__contacts { flex-direction: row; }
  .cta__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* --- Footer --- */
  .footer__map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__legal { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   ≥ 768px — MD · tablet
   ========================================================================== */
@media (min-width: 768px) {
  :root { --section-y: 8rem; }

  .shell { padding-inline: 2rem; }

  .logos { padding-block: 6rem; }
}

/* ==========================================================================
   ≥ 1024px — LG · notebook
   A partir daqui os layouts trocam de eixo: trilhos ficam horizontais, o
   Motor de IA alterna os lados e a plataforma ganha a barra lateral.
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- Nav --- */
  .nav__links { display: flex; }
  .nav__actions { display: flex; }
  .nav__toggle { display: none; }

  /* --- Hero --- */
  .hero { padding-top: 9rem; padding-bottom: 7rem; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 4rem;
  }
  .hero__title { font-size: 3.9rem; }
  .hero__lead { font-size: 1.1875rem; }
  .hero__visual { max-width: none; }
  .console__grid { grid-template-columns: 1.05fr 1fr; }

  /* --- Seção --- */
  .section-head__title { font-size: 3.25rem; }
  .section-head__lead { font-size: 1.125rem; }

  /* --- Prova --- */
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats__cell { padding: 1.75rem; }
  .stats__value { font-size: 2.6rem; }

  /* --- Problema: bento assimétrico em 6 colunas --- */
  .problem__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 4rem; }
  .problem__cell { grid-column: span 2; }
  .problem__cell--wide { grid-column: span 3; }
  .consequence { padding: 2.25rem; }

  /* --- Como funciona: trilho passa a ser horizontal --- */
  .steps__rail-wrap { margin-top: 5rem; }
  .steps__rail {
    left: 0; top: 1.35rem;
    width: 100%; height: 1px;
  }
  .steps__fill {
    width: 0; height: 100%;
    background: linear-gradient(to right, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px 1px rgba(0, 217, 255, 0.5);
  }
  .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .steps__item { padding-left: 0; padding-top: 3.5rem; }

  /* --- Motor de IA: condutor central, cards alternando os lados --- */
  .engine__flow { margin-top: 6rem; }
  .engine__conduit,
  .engine__packets { left: 50%; transform: translateX(-50%); }

  .engine__list { gap: 2.5rem; }
  .engine__stage {
    grid-template-columns: 1fr auto 1fr;
    padding-left: 0;
  }
  .engine__node {
    position: static;
    grid-column-start: 2;
    transform: none;
  }
  .engine__card { max-width: 24rem; }

  /* Ímpares à esquerda (alinhados à direita), pares à direita. */
  .engine__stage .engine__card {
    grid-column-start: 1;
    justify-self: end;
    text-align: right;
  }
  .engine__stage .engine__chip { justify-content: flex-end; }
  .engine__stage--right .engine__card {
    grid-column-start: 3;
    justify-self: start;
    text-align: left;
  }
  .engine__stage--right .engine__chip { justify-content: flex-start; }

  /* Conector curto ligando o card ao condutor */
  .engine__stub {
    display: block;
    position: absolute;
    top: 50%;
    width: 2rem; height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 217, 255, 0.4));
  }
  .engine__stage .engine__stub { right: -2rem; }
  .engine__stage--right .engine__stub { left: -2rem; transform: rotate(180deg); }

  .engine__loop { margin-top: 3rem; padding-left: 0; }

  /* --- Plataforma --- */
  .app__grid { grid-template-columns: 13.5rem 1fr; }
  .app__sidebar { display: block; }

  /* --- Benefícios --- */
  .benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4rem; }

  /* --- Diferenciais: coluna esquerda fixa --- */
  .diff__grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 5rem;
  }
  .diff__rail { position: sticky; top: 8rem; align-self: start; }
  .diff__cta { display: block; }
  .diff__list li { padding-block: 2rem; }
  .diff__row h3 { font-size: 1.3125rem; }
  .diff__row p { font-size: 1rem; }

  /* --- Público --- */
  .audience__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 4rem; }
  .audience__note p { font-size: 1rem; }

  /* --- Visão --- */
  .vision { padding-top: 10rem; padding-bottom: 7rem; }
  .vision__title { font-size: 4rem; }
  .vision__lead { font-size: 1.1875rem; }
  .vision__rail-wrap { margin-top: 5rem; }

  /* --- CTA --- */
  .cta { padding-block: 8rem; }
  .cta__title { font-size: 3.5rem; }
  .cta__lead { font-size: 1.125rem; }
  .cta__steps { margin-top: 5rem; }

  /* --- Footer --- */
  .footer__inner { padding-block: 5rem; }
  .footer__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 4rem; }
  .footer__signoff p { margin-bottom: -1.25rem; }
}

/* ==========================================================================
   ≥ 1280px — XL · desktop
   ========================================================================== */
@media (min-width: 1280px) {
  :root { --section-y: 10rem; }

  .shell { padding-inline: 2.5rem; }

  /* Nav: só aqui sobra espaço para o CTA secundário */
  .nav__links { gap: 0.25rem; }
  .nav__links a { padding-inline: 0.875rem; font-size: 0.9375rem; }
  .nav__demo { display: inline-flex; }

  .hero__inner { gap: 5rem; }
  .hero__title { font-size: 4.35rem; }

  /* Plataforma em largura total */
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app__panels { grid-template-columns: 1.55fr 1fr; }
}

/* ==========================================================================
   Ajustes de orientação — paisagem em telefone
   Evita que o hero de 100dvh empurre todo o conteúdo para fora da tela.
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 7rem; padding-bottom: 4rem; }
}

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
@media (min-width: 640px) {
  .notfound__actions { flex-direction: row; }
}

@media (min-width: 1024px) {
  .page { padding-top: 11rem; padding-bottom: 8rem; }
  .page__title { font-size: 3rem; }
  .prose { font-size: 1.0625rem; }
  .notfound__title { font-size: 3.25rem; }
}