/* =========================================================
   PSINEXA 2.0 — responsivo + movimento reduzido
   1440+ · 1280 · 1024 · 768 · 430 · 390 · 375 · 320
   ========================================================= */

@media (min-width: 641px) {
  .hero__line { white-space: nowrap; }
}

@media (max-width: 1240px) {
  .float--d { right: -1.5%; }
}

@media (max-width: 1140px) {
  .nav__links a { padding: 8px 10px; font-size: .86rem; }
  .nav.is-scrolled .nav__inner { max-width: 100%; }
}

/* ---------- Tablet (≤1024) ---------- */
@media (max-width: 1024px) {
  .nav__links, .nav__login { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-scrolled .nav__inner { padding: 0 6px 0 18px; }

  .sec-head--split { grid-template-columns: 1fr; gap: 0; }
  .sec-head--split .lead { margin-top: 28px; }

  .position__grid { grid-template-columns: 1fr; }
  .position__visual { width: 100%; max-width: 640px; margin-inline: auto; }


  /* Showcase: coluna única, etapa ativa + progresso segmentado */
  .showcase__layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 20px; padding-top: 88px; padding-bottom: 24px; }
  .showcase__side .display { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .steps { margin-top: 18px; display: block; min-height: 108px; }
  .step { display: none; padding: 0; }
  .step.is-active { display: block; }
  .step::before, .step__bar { display: none; }
  .step__btn { font-size: 1.15rem; pointer-events: none; }
  .step__d { padding-left: 0; max-height: none; opacity: 1; margin-top: 6px; }
  .showcase__prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
  .showcase__prog i { position: relative; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .showcase__prog i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .showcase__stage { align-items: flex-start; }

  .security__top { grid-template-columns: 1fr; }
  .perm { max-width: 560px; }
  .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-grid li:nth-child(3) { padding-left: 0; border-left: 0; }
  .sec-grid li:nth-child(n+3) { margin-top: 28px; border-top: 1px solid var(--navy-line); }


  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }

  .footer__top { grid-template-columns: 1fr; gap: 48px; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tablet retrato (≤820) ---------- */
@media (max-width: 820px) {
  .aud { grid-template-columns: 1fr; }
  .aud__item { min-height: 0; }
  .aud__item h3 { padding-top: 48px; }

  .plans { grid-template-columns: 1fr; max-width: 500px; }
  .plan--featured { order: -1; }
  .plan__head { min-height: 0; }

}

/* ---------- Mobile (≤640) ---------- */
@media (max-width: 640px) {
  :root { --section: 96px; }

  .hero { padding-top: 128px; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3.3rem); letter-spacing: -0.045em; }
  .hero__line { display: inline; }
  .hero__line:first-child::after { content: " "; }
  .hero__ctas { width: 100%; flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .hero__stage { margin-top: 56px; }

  /* Mobile: interface de celular em vez do painel desktop reduzido */
  .hero__frame { display: none; }
  .hero__phone { display: block; }
  .hero__halo { inset: 8% -10% 0; }
  .float.float--c { display: none; }
  .float.float--a { top: -26px; left: -4px; }
  .float.float--d { top: auto; bottom: 13%; right: -6px; }
  .float__in { padding: 9px 13px 9px 9px; gap: 9px; border-radius: 13px; }
  .float__in b { font-size: .84rem; }
  .float__in small { font-size: .7rem; }
  .float__in .ic { width: 28px; height: 28px; border-radius: 9px; }
  .float__in .ic svg { width: 14px; height: 14px; }

  .facts { gap: 20px; }
  .facts dt { font-size: 2.1rem; }
  .snip-stage { aspect-ratio: auto; display: grid; gap: 12px; padding: 20px 14px; }
  .snip-stage::before { inset: 0; border-radius: 28px; }
  .snip { position: relative; inset: auto; width: auto !important; }
  .snip--note { margin-left: 18%; }
  .snip--pay { margin-right: 14%; }
  .snip--week { display: none; }

  .bento { gap: 12px; }

  .showcase { height: 380vh; }
  .showcase__layout { padding-top: 84px; gap: 14px; }
  .showcase__side .eyebrow { margin-bottom: 12px; }
  .steps { min-height: 118px; }
  .step__btn { font-size: 1.05rem; }
  .step__d { font-size: .9rem; }

  .sec-grid { grid-template-columns: 1fr; }
  .sec-grid li, .sec-grid li + li { margin-top: 0; padding: 30px 0 4px; border-left: 0; border-top: 1px solid var(--navy-line); }
  .sec-grid li:first-child { border-top: 0; }
  .perm { padding: 16px; }
  .perm__head { flex-direction: column; gap: 2px; }
  .perm__table { grid-template-columns: 1.3fr repeat(4, 1fr); font-size: .74rem; column-gap: 2px; }
  .perm__table > small { font-size: .6rem; }
  .perm__role .av { display: none; }
  .perm__table > i { width: 24px; height: 24px; }


  .acc__btn { padding: 22px 0; }
  .pricing__notes { flex-direction: column; align-items: center; gap: 10px; }

  .final .btn { width: 100%; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 560px) {
  .nav__cta { display: none; }
}

/* ---------- Telas muito estreitas (≤375 / 320) ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(2rem, 10.6vw, 2.5rem); }
  .pill-label { font-size: .76rem; }
  .plan__price b { font-size: 3.1rem; }
  .phone { width: 84vw; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- Notebooks baixos ---------- */
@media (max-height: 720px) and (min-width: 1025px) {
  .showcase__layout { padding-top: 84px; }
  .steps { margin-top: 24px; }
  .step { padding-block: 10px; }
}

/* ---------- 2.1: novas seções ---------- */
@media (max-width: 1024px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco__flow { gap: 14px; }
  .eco__ui { max-width: none; }
}
@media (max-width: 820px) {
  /* Fluxo vira linha do tempo vertical */
  .eco__flow { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
  .eco__track { left: 22px; right: auto; top: 23px; bottom: 23px; width: 2px; height: auto; }
  .eco__fill { transform-origin: 50% 0; transform: scaleY(var(--eco, 0)); }
  .eco__pulse { left: 50%; top: calc(var(--eco, 0) * 100%); transition: top .9s var(--ease); }
  .eco__node { display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; align-items: start; text-align: left; }
  .eco__dot { grid-row: span 4; }
  .eco__k { margin-top: 2px; }
  .eco__node h3 { margin-top: 4px; }
  .eco__d { max-width: none; }
  .eco__ui { grid-column: 2; margin-top: 14px; }
  .demo-tag--frame { top: 14px; right: 16px; }
}
@media (max-width: 560px) {
  .benefits { grid-template-columns: 1fr; gap: 24px; }
  .compare__table { min-width: 470px; font-size: .8rem; }
  .compare__table th, .compare__table td { padding: 11px 10px; }
  .compare__table th[scope="row"] { min-width: 132px; }
  .compare__hint { display: block; }
  .demo-tag--snip { position: relative; right: auto; top: auto; margin: 0 0 4px auto; }
  .final__ctas { flex-direction: column; width: 100%; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .seq, .nav { opacity: 1; filter: none; transform: none; }
  .js .reveal, .js .pop { opacity: 1; translate: none; scale: none; filter: none; }
  .js .draw, .app .area__line { stroke-dashoffset: 0; }
  .float__in { animation: none; }
  .cursor { display: none; }
  .eco__fill, .eco__pulse { transition: none; }
}