/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Restore cursor on touch devices ── */
@media (hover: none) {
  body { cursor: auto; }
  .btn-primary, .btn-ghost, .scard, .pitem,
  .contact-pill, .fsocial, .nav-btn { cursor: pointer; }

  /* Sem animação de scroll no touch — overlay sempre visível */
  .pitem-overlay {
    background: linear-gradient(to top, rgba(13,13,15,.98) 0%, rgba(13,13,15,.4) 50%, transparent 100%);
  }
  .pitem-translate { transition: none; }
}

/* ── Tablet (≤ 1100px) ── */
@media (max-width: 1100px) {
  nav,
  nav.stuck          { padding-left: 2rem; padding-right: 2rem; }

  #sobre             { padding: 7rem 2rem; }
  #processo          { padding: 7rem 2rem; }
  #depoimentos       { padding: 7rem 2rem; }
  #cta               { padding: 8rem 2rem; }
  #numeros           { padding: 5rem 2rem; }
  #portfolio         { padding: 7rem 2rem; }
  .container         { padding: 0 2rem; }

  .about-grid        { grid-template-columns: 1fr; gap: 3rem; }
  .about-canvas-wrap { max-width: 460px; margin: 0 auto; }

  .services-grid     { grid-template-columns: 1fr; }
  .stats-grid        { grid-template-columns: repeat(2, 1fr); }
  .process-grid      { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .portfolio-grid    { grid-template-columns: repeat(2, 1fr); }
  .tgrid             { grid-template-columns: 1fr; }
  .footer-wrap       { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Mobile (≤ 680px) ── */
@media (max-width: 680px) {
  /* Nav */
  .nav-links         { display: flex; } /* shown as panel via JS */

  /* Hero */
  .hero-content      { padding: 3rem 1.25rem 0; }
  .hero-title        { font-size: clamp(2.6rem, 11vw, 3.8rem); line-height: 1; }
  .hero-sub          { font-size: .9rem; }
  .hero-ctas         { flex-direction: column; align-items: center; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100%; max-width: 340px; justify-content: center; text-align: center; }

  /* Sections */
  #sobre             { padding: 5rem 1.25rem; }
  #servicos          { padding: 5rem 0; }
  #numeros           { padding: 4rem 1.25rem; }
  #processo          { padding: 5rem 1.25rem; }
  #portfolio         { padding: 5rem 1.25rem; }
  #depoimentos       { padding: 5rem 1.25rem; }
  #cta               { padding: 5rem 1.25rem; }
  .container         { padding: 0 1.25rem; }

  /* About */
  .about-canvas-wrap { display: none; } /* hide 3D canvas on small mobile */

  /* Service cards */
  .scard             { padding: 2rem 1.75rem; border-radius: 16px; }

  /* Stats */
  .stats-grid        { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stat-card         { padding: 1.75rem 1rem; }

  /* Process */
  .process-grid      { grid-template-columns: 1fr; gap: 2.5rem; }
  .pstep             { padding: 0; text-align: left; display: flex; gap: 1.25rem; align-items: flex-start; }
  .pstep-num         { flex-shrink: 0; margin: 0; }
  .pstep > div       { text-align: left; }

  /* Portfolio */
  .portfolio-grid    { grid-template-columns: 1fr; gap: 1rem; }

  /* CTA */
  #cta h2            { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .cta-contact       { flex-direction: column; align-items: center; gap: 1rem; }
  .contact-pill      { width: 100%; max-width: 320px; justify-content: center; font-size: .78rem; }

  /* Email overflow fix — evita que o email longo quebre o layout */
  .btn-ghost         { font-size: .78rem; word-break: break-all; padding: .85rem 1.25rem; }

  /* Section header */
  .section-header    { margin-bottom: 3rem; }
  .section-header h2 { font-size: clamp(2rem, 8vw, 2.8rem); }

  /* Marquee */
  .marquee-track     { gap: 2rem; }
  .mitem             { font-size: .65rem; }

  /* Footer */
  .footer-wrap       { padding: 3.5rem 1.25rem; }
  .footer-bottom     { padding: 1.5rem 1.25rem; flex-direction: column; gap: 1rem; text-align: center; }
  .fsocials          { justify-content: center; }
}

/* ── Very small (≤ 380px) ── */
@media (max-width: 380px) {
  .hero-title        { font-size: clamp(2.2rem, 10vw, 3rem); }
  .stats-grid        { grid-template-columns: 1fr; }
}