/* =====================================================
   PÉGASUS MOTO PEÇAS — responsive.css
   Mobile-first breakpoints:
     sm  ≥ 480px
     md  ≥ 768px
     lg  ≥ 1024px
     xl  ≥ 1280px
   ===================================================== */

/* =====================================================
   BASE MOBILE (< 480px)
   ===================================================== */

/* Navbar */
.nav-toggle { display: flex; }
.nav-cta { display: none; }

.nav-links {
  display: none;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(13,13,13,.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px 16px 32px;
  border-bottom: 1px solid var(--border);
  gap: 4px;
  animation: slideDown .22s ease;
}
.nav-links.open { display: flex; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-link {
  padding: 12px 16px;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

/* Hero */
.hero { height: 100svh; }
.hero-content { padding: 0 24px; }
.hero-line-1, .hero-line-2 { font-size: clamp(2.8rem, 14vw, 5rem); }
.hero-subtitle { font-size: .9rem; }
.hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
.btn-hero { width: 100%; max-width: 320px; justify-content: center; }

/* Diferenciais */
.cards-3 { grid-template-columns: 1fr; }

/* Categorias */
.cards-4 { grid-template-columns: repeat(2, 1fr); }

/* Sobre */
.sobre-grid { grid-template-columns: 1fr; gap: 40px; }
.sobre-visual { order: 2; }
.sobre-text { order: 1; }
.sobre-img-placeholder { max-width: 280px; aspect-ratio: 1; font-size: 5rem; }
.sobre-badge-group { justify-content: center; }
.sobre-features { grid-template-columns: 1fr; }

/* Depoimentos */
.testimonials-grid { grid-template-columns: 1fr; }
.rating-summary { flex-direction: column; gap: 8px; }
.rating-big { font-size: 3rem; }

/* Contato */
.contato-grid { grid-template-columns: 1fr; gap: 40px; }
.contato-form-wrap { padding: 28px 20px; }

/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 36px; }
.footer-bottom-inner { flex-direction: column; text-align: center; }
.footer-links-col ul { gap: 8px; }

/* Section */
.section { padding: 64px 0; }
.section-header { margin-bottom: 36px; }

/* Float button position */
.whatsapp-float { bottom: 20px; right: 20px; width: 54px; height: 54px; }
.back-to-top { bottom: 86px; right: 20px; }

/* =====================================================
   SM — ≥ 480px
   ===================================================== */
@media (min-width: 480px) {
  .hero-line-1, .hero-line-2 { font-size: clamp(3.2rem, 11vw, 6rem); }
  .hero-actions { flex-direction: row; align-items: center; }
  .btn-hero { width: auto; max-width: none; }

  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   MD — ≥ 768px
   ===================================================== */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border: none;
    animation: none;
  }
  .nav-link { font-size: .875rem; padding: 8px 12px; }
  .nav-cta { display: inline-flex; }

  .cards-3 { grid-template-columns: repeat(3, 1fr); }

  .sobre-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sobre-visual { order: 1; }
  .sobre-text { order: 2; }
  .sobre-features { grid-template-columns: 1fr 1fr; }
  .sobre-img-placeholder { max-width: 100%; }

  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  .contato-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bottom-inner { flex-direction: row; text-align: left; }

  .section { padding: 80px 0; }
}

/* =====================================================
   LG — ≥ 1024px
   ===================================================== */
@media (min-width: 1024px) {
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 2fr; gap: 48px; }

  .section { padding: 96px 0; }

  .hero-title { font-size: 3.5rem; }
}

/* =====================================================
   XL — ≥ 1280px
   ===================================================== */
@media (min-width: 1280px) {
  .hero-title { font-size: 4.5rem; }
  .sobre-grid { gap: 72px; }
  .contato-grid { gap: 56px; }
}

/* =====================================================
   TOUCH / HOVER media query — remove hover effects
   on true touch-only devices
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
  .card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border-light); }
  .card-categoria:hover::before { opacity: 0; }
  .card-categoria:hover .cat-title,
  .card-categoria:hover .cat-text,
  .card-categoria:hover .cat-cta { color: inherit; }
  .cat-cta { color: var(--orange); }
  .cat-title { color: var(--text); }
  .cat-text { color: var(--text-muted); }
  .btn:hover { transform: none; }
  .whatsapp-float:hover { transform: none; animation: floatPulse 2.5s ease-in-out infinite; }
  .back-to-top:hover { transform: none; }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .hero-scroll-hint { display: none; }
  .whatsapp-float { animation: none; }
}

/* =====================================================
   PRINT
   ===================================================== */
@media print {
  .header, .whatsapp-float, .back-to-top, .hero-scroll-hint, .nav-toggle { display: none; }
  body { color: #000; background: #fff; }
  .section { padding: 32px 0; break-inside: avoid; }
  .hero { min-height: auto; padding: 32px 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .7em; }
}