/* ============================================================
   CIBERFORENSE — responsive.css
   Ajustes por breakpoint. Base é desktop no style.css;
   aqui os grids colapsam progressivamente até o mobile.
   ============================================================ */

/* ---------- ≤ 1024px (tablets landscape) ---------- */
@media (max-width: 1024px) {
  .publicos-grid { grid-template-columns: repeat(3, 1fr); }
  .cards-grid    { grid-template-columns: repeat(2, 1fr); }
  .timeline      { grid-template-columns: repeat(2, 1fr); }
  .dif-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div[aria-label="Contato"] { grid-column: span 3; }
}

/* ---------- ≤ 880px (tablets portrait) ---------- */
@media (max-width: 880px) {

  /* Navegação vira menu hamburguer */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: .6rem;
    z-index: 110;
  }
  .nav-toggle span {
    width: 24px; height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav-list {
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: .6rem 4% 1.2rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s ease, opacity .3s ease, visibility .3s;
  }
  .nav-list.open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-list li { padding-block: .55rem; }
  .nav-list a:not(.btn) { display: block; font-size: 1rem; }
  .nav-cta { margin-top: .5rem; }
  .nav-cta .btn { width: 100%; }

  /* Hero empilha */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 480px; margin-inline: auto; }
  .chip-1 { right: 0; }
  .chip-2 { left: 0; }

  /* Grids */
  .casos-grid  { grid-template-columns: 1fr; }
  .quem-inner  { grid-template-columns: 1fr; }
  .quem-visual { order: 2; max-width: 520px; margin-inline: auto; }
  .cta-inner   { grid-template-columns: 1fr; }
  .lead-magnet { grid-template-columns: 1fr; }
  .blog-grid   { grid-template-columns: 1fr 1fr; }
  .stats       { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}

/* ---------- ≤ 620px (smartphones) ---------- */
@media (max-width: 620px) {
  html { scroll-padding-top: 76px; }

  .publicos-grid { grid-template-columns: 1fr 1fr; }
  .cards-grid    { grid-template-columns: 1fr; }
  .timeline      { grid-template-columns: 1fr; }
  .dif-grid      { grid-template-columns: 1fr; }
  .blog-grid     { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }

  .footer-grid   { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-grid > div[aria-label="Contato"] { grid-column: auto; }

  .hero-actions .btn { flex: 1 1 100%; }
  .hero-trust { gap: .9rem; }

  /* Timeline vertical com linha condutora no mobile */
  .timeline { position: relative; padding-left: 1.4rem; }
  .timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 10px; bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--secondary), var(--purple), var(--magenta));
    border-radius: 2px;
  }
  .tl-step::before {
    content: "";
    position: absolute;
    left: -1.4rem;
    top: 1.9rem;
    translate: -4px 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--magenta);
    box-shadow: 0 0 0 4px rgba(214, 41, 141, .18);
  }

  .whats-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

/* ---------- ≤ 400px (telas muito pequenas) ---------- */
@media (max-width: 400px) {
  .brand-logo { height: 40px; }
  .publicos-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .glass-chip { padding: .5rem .7rem; }
  .chip-hash, .chip-status { font-size: .74rem; }
}

/* ---------- Telas largas: respiro extra ---------- */
@media (min-width: 1440px) {
  :root { --container: 1240px; }
}