/* =========================================================
   PEKRIA — Responsivo (desktop estreito / tablet / mobile)
   Breakpoints: 1024 · 900 · 720 · 520 · 420
   ========================================================= */

/* ---------- Desktop estreito / Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .timeline::before { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; align-items: stretch; }
  .testi { flex: 0 0 300px; }
  .posts { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* FAQ vira coluna única */
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }

  /* Feature vira coluna única */
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature:has(.feature-visual img),
  .feature.reverse:has(.feature-visual img) { grid-template-columns: 1fr; }
  .feature.reverse .feature-text { order: 0; }
  .feature-visual { aspect-ratio: 16/9; }

  /* Value prop vira coluna única (texto em cima, imagem embaixo) */
  .valueprop { grid-template-columns: 1fr; gap: 28px; }

  /* Como funciona vira coluna única; a imagem aparece dentro da etapa ativa */
  .howto { grid-template-columns: 1fr; gap: 28px; }
  .howto-media { display: none; }
  #como-funciona .howto-step.is-active .howto-inline-img {
    display: block;
    width: 100%;
    border-radius: 14px;
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,.16);
  }
}

/* ---------- Colapso do header / nav (≤ 900px) ---------- */
@media (max-width: 900px) {
  /* Header fixo no topo, acompanhando a rolagem */
  .header { position: fixed; top: 0; left: 0; right: 0; padding: 12px 12px 0; --nav-h: 64px; }
  .header.scrolled { padding-top: 10px; --nav-h: 58px; }
  .header .container { padding-inline: 16px; position: relative; }

  /* Menu = card flutuante refinado que desce do header */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);   /* divisória entre o header e o menu */
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 30px 14px 16px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    max-height: calc(100dvh - var(--nav-h) - 48px);
    overflow-y: auto;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }

  /* menu aberto: header + painel viram uma pílula só */
  .header.nav-open .nav {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: none;
    box-shadow: none;
    background: rgba(255,255,255,.98);
  }
  /* só os links do menu (os CTAs ficam em .nav-cta, mantêm cor própria) */
  .nav-links > a {
    width: 100%;
    padding: 14px 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav-links > a:last-of-type { border-bottom: none; }

  /* CTAs no rodapé do card, largura total */
  .nav-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .nav-cta .btn { width: 100%; justify-content: center; padding: 13px 20px; border-radius: 14px; font-size: 1rem; }

  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Hero: header agora é fixo (fora do fluxo), então sem recuo negativo */
  .hero { margin-top: 0; padding-top: 76px; }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }

  /* Botões podem quebrar linha em vez de estourar */
  .btn { white-space: normal; }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* título do hero um pouco menor no mobile */
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.2rem); margin-bottom: 18px; }
  /* menos espaço entre o bloco de texto e a imagem do painel */
  /* hero preenche a tela e centraliza o conteúdo verticalmente */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-inner { padding-block: clamp(40px, 7vw, 64px) clamp(36px, 9vw, 56px); }
  /* imagem do hero removida no mobile */
  .hero-media { display: none; }
  .hero::before { width: 520px; height: 520px; top: 70px; }

  /* Stats 2×2 com divisórias coerentes */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat { padding: 16px 12px; border-top: 1px solid rgba(255,255,255,.16); }
  .stat + .stat { border-left: none; }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.16); }
  .stat:nth-child(1), .stat:nth-child(2) { border-top: none; }
  /* números e rótulos um pouco maiores no mobile */
  .stat .num { font-size: 1.8rem; }
  .stat .lbl { font-size: 1rem; }

  /* "Como funciona" vira carrossel deslizável */
  .timeline {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    padding: 6px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline::before { display: none; }
  .tl-step { flex: 0 0 80%; scroll-snap-align: start; }
  .tl-step:hover .tl-card { transform: none; }
  .tl-card { border-radius: 18px; }
  .testi { flex: 0 0 84vw; max-width: 320px; }
  /* carrossel: card menor no mobile (setas seguem no rodapé) */
  .carousel-track .post,
  .carousel-track .testi { flex: 0 0 82vw; max-width: 340px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card { min-height: 160px; }
  .bento-card.wide { grid-column: auto; }
  .bento-card--img { min-height: 200px; }
  .cards { grid-template-columns: 1fr; }
  /* abas lado a lado no mobile (rola pro lado se não couber) */
  .tabs-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }

  /* etapa do "Como funciona": ícone acima do título + imagem em largura cheia (mobile) */
  #como-funciona .howto-step { display: flex; flex-direction: column; }
  #como-funciona .howto-ico { margin-bottom: 14px; }
  /* título das etapas do "Como funciona" menor no mobile */
  #como-funciona .howto-text h3 { font-size: 1.12rem; }

  /* rodapé centralizado no mobile */
  .footer { text-align: center; }
  .footer .brand { justify-content: center; }
  .footer-about { margin-inline: auto; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; align-items: center; }

  .hero-visual .cards { grid-template-columns: 1fr !important; }
  .valueprop { padding: 40px 24px; }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px) {
  /* não deixa o conteúdo esticar a coluna do grid e estourar a página */
  .feature, .feature-text, .feature-visual { min-width: 0; }

  /* Accordion no mobile: títulos um pouco menores, imagem segue abaixo */
  .accordion { margin-bottom: 22px; }
  .acc-title { font-size: 1.05rem; }
  .acc-desc { font-size: .96rem; }
}

/* ---------- Mobile pequeno (≤ 420px) ---------- */
@media (max-width: 420px) {
  .container { padding-inline: 18px; }
  .btn-lg { padding: 15px 24px; font-size: 1rem; }

  .stat { padding: 16px 8px; }
  .stat .num { font-size: 1.9rem; }
  .stat .lbl { font-size: .95rem; }

  /* Float do WhatsApp menor, sem cobrir o CTA */
  .wpp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

/* ---------- Páginas legais (docs) ---------- */
@media (max-width: 1024px) {
  .docs { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .docs-toc { display: none; }
}
@media (max-width: 720px) {
  .docs { grid-template-columns: 1fr; padding-top: 110px; gap: 24px; }
  .docs-sidebar { position: static; top: auto; }
  .docs-sidebar nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .docs-sidebar a { border-left: none; border: 1px solid var(--line); padding: 8px 14px; }
  .docs-sidebar a.is-active { border-color: var(--orange); }
}

/* ---------- Como funciona: cards empilháveis no scroll (mobile) ---------- */
@media (max-width: 720px) {
  #como-funciona .howto-steps { display: block; }
  #como-funciona .howto-step,
  #como-funciona .howto-step.is-active {
    position: sticky;
    margin-bottom: 16px;
    background: linear-gradient(160deg, #4A2398 0%, #34176E 100%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 34px rgba(0,0,0,.32);
  }
  /* cada card gruda um pouco mais abaixo, criando o "baralho" */
  #como-funciona .howto-step:nth-child(1) { top: 88px; }
  #como-funciona .howto-step:nth-child(2) { top: 102px; }
  #como-funciona .howto-step:nth-child(3) { top: 116px; }
  #como-funciona .howto-step:nth-child(4) { top: 130px; }
  /* todo o conteúdo de cada etapa sempre visível (sem accordion no mobile) */
  #como-funciona .howto-step .howto-collapse { grid-template-rows: 1fr; }
  #como-funciona .howto-step .howto-inline-img {
    display: block; width: 100%;
    border-radius: 12px; margin-top: 16px;
    border: 1px solid rgba(255,255,255,.16);
  }
  #como-funciona .howto-text h3 { color: #fff; }
  #como-funciona .howto-step .howto-collapse p,
  #como-funciona .howto-step.is-active .howto-collapse p {
    background: none; border: none; padding: 0; margin-top: 8px;
    color: rgba(255,255,255,.85);
  }
  #como-funciona .howto-bar { display: none; }
}