/* ==========================================================================
   GULFIER — responsive.css
   Breakpoints: 1180px (desktop pequeno) / 960px (tablet) / 680px (mobile) / 420px (mobile pequeno)
   ========================================================================== */

/* ---------- 1180px — ajustes de grid amplos ---------- */
@media (max-width: 1180px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .products { grid-template-columns: repeat(3, 1fr); }
  .diff { grid-template-columns: repeat(3, 1fr); }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  .diff--three { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 960px — tablet: navegação colapsa, colunas reduzem ---------- */
@media (max-width: 960px) {
  .topbar__info span:nth-child(3) { display: none; }

  .nav { position: fixed; inset: 0 0 0 30%; top: 0; z-index: 150;
    background: var(--white); box-shadow: -10px 0 40px rgba(10,31,61,0.15);
    transform: translateX(100%); transition: transform 0.35s var(--ease);
    padding: 6rem 2rem 2rem; overflow-y: auto; }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .nav__list a { font-size: 1.05rem; }
  .nav-toggle { display: flex; }
  .header__phone { display: none; }
  .nav-overlay { position: fixed; inset: 0; background: rgba(10,31,61,0.5); z-index: 140; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .nav-overlay.is-open { opacity: 1; pointer-events: all; }

  .hero__grid { grid-template-columns: 1fr; min-height: auto; }
  .hero__media { clip-path: none; min-height: 320px; order: -1; }
  .hero__content { padding-block: var(--gap-xl); }

  .cats { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); }
  .diff { grid-template-columns: repeat(3, 1fr); }
  .diff--three { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .brands { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }

  .about-split { grid-template-columns: 1fr; }
  .about-split__media { max-width: 420px; margin-inline: auto; }

  .map-block { grid-template-columns: 1fr; }
  .map-block__frame { min-height: 300px; }

  .contact-layout { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr 1fr; }

  .footer__top { grid-template-columns: 1fr 1fr; }

  .gallery { grid-auto-rows: 140px; }
}

/* ---------- 680px — mobile ---------- */
@media (max-width: 680px) {
  :root { --gap-2xl: 3.5rem; --gap-xl: 2.5rem; }

  .topbar__info { gap: 0.9rem; }
  .topbar__info span:nth-child(2) { display: none; }
  .topbar__social { display: none; }

  .header__actions .btn--whatsapp span { display: none; }
  .header__actions .btn--whatsapp { width: 46px; height: 46px; padding: 0; border-radius: 50%; }

  .hero__title { font-size: 2.1rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__stats { gap: var(--gap-sm); }
  .hero__ribbon { display: none; }

  .cats { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .products { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .diff { grid-template-columns: 1fr 1fr; }
  .diff--three { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: 1fr 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .gallery__item:nth-child(4) { grid-row: span 1; }

  .cta-strip .container { flex-direction: column; text-align: center; }
  .cta-strip__actions { justify-content: center; width: 100%; }
  .cta-strip__actions .btn { flex: 1; }

  .footer__top { grid-template-columns: 1fr; gap: var(--gap-md); padding-block: var(--gap-lg); }
  .footer__bottom { flex-direction: column; text-align: center; }

  .form-grid { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }

  .whatsapp-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ---------- 420px — mobile pequeno ---------- */
@media (max-width: 420px) {
  .cats { grid-template-columns: 1fr 1fr; }
  .logo__sub { display: none; }
  .page-hero h1 { font-size: 1.6rem; }
  .reviews-summary { justify-content: center; text-align: center; }
}

/* ---------- Preferência por movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}