/* ==========================================================================
   Emporio Office — Responsivo
   Ajustes por breakpoint (mobile-first; aqui afinamos telas menores).
   ========================================================================== */

/* < 992px : colapsa o menu, ajusta hero */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    background: rgba(255, 255, 255, .98);
    margin: .6rem -0.25rem -0.4rem;
    padding: .8rem .6rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .site-nav .nav-link { padding: .65rem .9rem; }
  .site-nav .nav-link.active::after { display: none; }
  .site-nav .navbar-nav { gap: .15rem; }
  .nav-cta { margin-top: .6rem; }

  .about__badge { position: static; margin: 1.2rem auto 0; max-width: 100%; }
  .hero__stats { gap: 1.4rem; }
}

/* < 768px */
@media (max-width: 767.98px) {
  .topbar { font-size: .8rem; }

  /* ===== HERO mobile: compacto, CTA-first, chips 2-por-linha ===== */
  .hero {
    text-align: left;
    /* corta o piso de 80px do clamp: menos empurrão sob a navbar sticky (74px) */
    padding: clamp(40px, 9vw, 80px) 0 clamp(44px, 8vw, 70px);
    /* clareia o gradiente p/ a foto aparecer; texto à esquerda segue escuro */
    background:
      linear-gradient(160deg, rgba(18, 18, 24, .93) 0%, rgba(22, 22, 29, .82) 48%, rgba(26, 26, 33, .48) 100%),
      var(--hero-img, none) center / cover no-repeat,
      var(--grad-navy);
  }
  .hero::after { width: 320px; height: 320px; right: -16%; top: -22%; }
  .hero__inner { max-width: 100%; }

  /* ritmo vertical mais justo entre blocos */
  .hero .chip--glass.mb-3 {
    margin-bottom: .75rem !important;
    padding: .34rem .7rem;
    font-size: .74rem;
    letter-spacing: .02em;
  }
  .hero h1 { margin-bottom: .7rem; line-height: 1.14; text-wrap: balance; }
  .hero__lead { margin-bottom: 1.15rem; max-width: 100%; }

  /* CTA-first: WhatsApp em destaque, largura total */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    margin-bottom: 1.1rem;
  }
  .hero__actions .btn { flex: 1 1 auto; width: 100%; }
  .hero__actions .btn-wpp { font-size: 1.06rem; padding-block: .9rem; }
  .hero__actions .btn-outline-light-brand { padding-block: .72rem; font-size: .96rem; }

  /* CHIPS: 2 por linha; o 3º ocupa a linha inteira (nunca 1-por-linha) */
  .hero__chips { gap: .5rem; }
  .hero__chips .chip {
    flex: 1 1 calc(50% - .25rem);
    justify-content: center;
    min-width: 0;
    padding: .38rem .6rem;
    font-size: .8rem;
    gap: .35rem;
  }
  .hero__chips .chip:last-child { flex-basis: 100%; }
  .hero__chips .chip i { color: var(--brand); font-size: 1em; }

  /* ----- regras mobile já existentes (preservadas) ----- */
  .hero__stat b { font-size: 1.55rem; }
  .cta-band { text-align: center; }
  .cta-band .btn { width: 100%; }
  .wpp-float { width: 54px; height: 54px; font-size: 1.7rem; right: 16px; bottom: 16px; }
  .wpp-float__label { display: none; }
  .to-top { right: 18px; bottom: 80px; }
  .lb__prev, .lb__next { width: 42px; height: 42px; font-size: 1.2rem; }
}

/* < 576px */
@media (max-width: 575.98px) {
  .brand small { display: none; }

  /* HERO em telas bem estreitas: mais punch acima da dobra */
  .hero { padding-top: clamp(34px, 8vw, 56px); }
  .hero h1 { font-size: clamp(1.95rem, 7.6vw, 2.35rem); line-height: 1.16; letter-spacing: -.02em; }
  .hero__lead { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
  .hero__actions { margin-bottom: 1rem; }
  .hero__chips { gap: .4rem; }
  .hero__chips .chip { padding: .34rem .48rem; font-size: .73rem; gap: .3rem; }
  .hero__chips .chip i { font-size: .95em; }

  /* ----- regras já existentes (preservadas) ----- */
  .hero__stats { gap: 1.1rem 1.8rem; }
  .review-card, .service-card { padding: 1.6rem 1.4rem; }
}