/* ── RESPONSIVE ───────────────────────────────────────────────────────────────
   Escala de breakpoints (mobile-first na intenção, escrita max-width):
     1024px — laptop pequeno
     768px  — tablet / mobile grande  → ponto principal de stacking
     600px  — mobile                  → grids 3/2 col viram 1 col
     420px  — mobile pequeno          → navbar enxuta + densidade

   Overrides do design system (.img-section--split, .is-body, .is-col-content)
   vivem aqui: o DS em design-system-zutra/ é compartilhado e não é editado
   por esta landing. O ideal é portar essas regras para o próprio DS no futuro.
─────────────────────────────────────────────────────────────────────────────── */

/* ── 1024 · laptop ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-container,
  .lp-container--narrow { padding: 0 32px; }
  .lp-nav-inner { padding: 0 20px 0 32px; }
  .lp-grid-2  { gap: 48px; }
}

/* ── 768 · tablet / mobile grande — stacking principal ──────────────────────── */
@media (max-width: 768px) {
  .lp-wrap { margin: 12px; border-radius: var(--r-xl); }

  /* Parallax via background-attachment:fixed é caro em mobile — desativar */
  .lp-hero { background-attachment: scroll; }

  .lp-container,
  .lp-container--narrow { padding: 0 24px; }
  .lp-nav-inner { padding: 0 16px 0 24px; }

  .lp-section,
  .lp-section--surface,
  .lp-section--elevated { padding: 72px 0; }
  .lp-cta-banner { padding: 72px 0; }

  .lp-hero { padding: 72px 0 0; }
  .lp-hero-text { padding: 0 24px; }
  .lp-hero-img { width: calc(100% - 48px); margin-top: 48px; }

  /* Hero-proof: 3 → 2 colunas; 3º card (órfão) ocupa a linha inteira */
  .lp-hero-proof { grid-template-columns: 1fr 1fr; padding: 28px 24px; }
  .lp-hero-proof-card:last-child { grid-column: 1 / -1; }

  .lp-grid-2,
  .lp-grid-2--reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    direction: ltr;
  }
  .lp-grid-2--reverse > * { direction: ltr; }

  .lp-grid-3 { grid-template-columns: 1fr 1fr; }
  .lp-feature-cards-2 { grid-template-columns: 1fr; }

  /* Bento — 1 coluna, reset de posicionamento */
  .lp-bento { grid-template-columns: 1fr; }
  .lp-bento-01,
  .lp-bento-02,
  .lp-bento-img,
  .lp-bento-03 { grid-column: 1; grid-row: auto; }
  .lp-bento-img { min-height: 320px; }
  /* Ordem: 01 → 02 → gráfico → 03 */
  .lp-bento-01  { order: 1; }
  .lp-bento-02  { order: 2; }
  .lp-bento-img { order: 3; }
  .lp-bento-03  { order: 4; }

  /* Stats — grid conectado: 3 → 1 (linhas full-width com divisória inferior) */
  .lp-stat-grid { grid-template-columns: 1fr; }
  .lp-stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .lp-stat-item:last-child { border-bottom: none; }

  .lp-panel-grid--3 { grid-template-columns: 1fr 1fr; }
  .lp-panel-grid--2 { grid-template-columns: 1fr; }

  .lp-price-box,
  .lp-form-card { padding: 28px; }

  /* CTA final (DS img-section--split) — empilhar imagem sobre conteúdo */
  .img-section--split { grid-template-columns: 1fr; }
  .img-section--split .is-col-img { min-height: 220px; }
  /* min-width:0 evita que o min-content do botão (nowrap) estoure a coluna 1fr */
  .is-col-content { padding: 36px 28px; min-width: 0; }
  .is-actions { width: 100%; }

  /* Image section "hero" (DS) — reduzir respiro interno */
  .img-section--hero,
  .img-section--hero .is-body { min-height: 400px; }
  .img-section--hero .is-body { padding: 36px 28px; }

  .lp-footer-main { flex-direction: column; gap: 36px; }
  .lp-footer-nav  { gap: 36px; }

  /* Footer DS — responsivo */
  .ds-footer { padding: 40px 24px 0; }
  .ds-footer-main { grid-template-columns: 1fr; gap: 36px; }
  .ds-footer-nav  { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ds-footer-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ds-footer-meta-items { flex-wrap: wrap; gap: 16px; }

  /* Touch targets — botões pequenos e links de footer confortáveis no toque */
  .btn--sm { min-height: 40px; }
  .ds-footer-link { padding-top: 9px; padding-bottom: 9px; }
}

/* ── 600 · mobile — colunas restantes viram 1 ───────────────────────────────── */
@media (max-width: 600px) {
  .lp-wrap { margin: 8px; border-radius: var(--r-lg); }

  /* CTAs longos (--lg): permitir quebra de linha e reduzir tamanho.
     .btn tem white-space:nowrap no DS — sem isto o texto longo estoura
     a tela e é cortado pelo overflow:hidden das img-sections / cards. */
  .btn--lg {
    white-space: normal;
    text-align: center;
    padding: 13px 22px;
    font-size: 15px;
    max-width: 100%;
  }

  .lp-section,
  .lp-section--surface,
  .lp-section--elevated { padding: 56px 0; }
  .lp-cta-banner { padding: 56px 0; }

  .lp-hero { padding: 56px 0 0; }
  .lp-hero-img .img-ph { height: 280px; }

  .lp-hero-title { font-size: clamp(26px, 7vw, 40px); }
  .lp-h2         { font-size: clamp(22px, 6vw, 32px); }
  .lp-stat-num   { font-size: 44px; }
  .lp-cta-title  { font-size: clamp(22px, 6vw, 32px); }

  .lp-hero-proof    { grid-template-columns: 1fr; }
  .lp-grid-3        { grid-template-columns: 1fr; }
  .lp-panel-grid--3 { grid-template-columns: 1fr; }
  .lp-panel-grid--2 { grid-template-columns: 1fr; }

  /* Linhas de campos do form empilham (Nome/Empresa, Telefone/Time) */
  .lp-form-row { grid-template-columns: 1fr; }

  .lp-footer-nav { flex-direction: column; gap: 28px; }

  /* Footer DS — mobile */
  .ds-footer-nav { grid-template-columns: 1fr; }
}

/* ── 480 · navbar começa a apertar — encolher botões (Login continua visível) ── */
@media (max-width: 480px) {
  .lp-nav-inner { padding: 0 14px; }
  .lp-nav-actions { gap: 6px; }
  .lp-nav-actions .btn--sm { padding: 7px 12px; font-size: 12px; }
}

/* ── 420 · mobile pequeno — navbar enxuta + densidade ───────────────────────── */
@media (max-width: 420px) {
  .lp-container,
  .lp-container--narrow { padding: 0 20px; }

  /* Caber logo + Login + CTA sem estourar: oculta o ícone do CTA e reduz o logo */
  .lp-nav-inner { padding: 0 12px; }
  .lp-nav-actions .btn--sm { padding: 6px 10px; }
  .lp-nav-actions .btn svg { display: none; }
  .logo-svg--lp-nav { height: 22px; }

  .lp-section,
  .lp-section--surface,
  .lp-section--elevated { padding: 48px 0; }
  .lp-cta-banner { padding: 48px 0; }

  /* Mini-grid de personas empilha */
  .lp-persona-grid { grid-template-columns: 1fr; }
}