/* =============================================================
   GOLD BLACK — responsive.css
   Mobile-first overrides. Defaults in style.css = desktop+.
   Breakpoints: ≤767 mobile, 768-1023 tablet, 1024+ desktop.
   ============================================================= */

/* ============================================================
   LARGE DESKTOP — 1440px+
   ============================================================ */
@media (min-width: 1440px) {
  :root { --gutter: 48px; }
  .section { padding: 140px 0; }
}

/* ============================================================
   TABLET — 768px to 1023px
   ============================================================ */
@media (max-width: 1023px) {
  :root { --header-h: 72px; }

  .section { padding: 88px 0; }
  .section__header { margin-bottom: 56px; }

  /* Header */
  .header__nav { display: none; }
  .header__cta { display: none; }
  .header__burger { display: flex; }
  .header__logo-img { height: 56px; }

  /* Hero */
  .hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 72px; }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero__divider { display: none; }
  .hero__media { aspect-ratio: 4/3; max-height: 480px; }

  /* Conceito */
  .conceito__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .conceito__media { aspect-ratio: 16/10; max-height: 480px; }

  /* Diferenciais */
  .diferenciais__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Serviços */
  .servico {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 48px 16px;
  }
  .servico__num { font-size: 4.5rem; }

  /* Equipe */
  .equipe__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .profissional:last-child { grid-column: 1 / -1; max-width: 50%; }

  /* Gallery */
  .gallery__track { aspect-ratio: 4/3; }

  /* Contato */
  .contato__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ============================================================
   MOBILE — up to 767px
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
  }
  body { font-size: 15px; }

  .section { padding: 64px 0; }
  .section__header { margin-bottom: 40px; }
  .section__title { font-size: clamp(1.75rem, 7vw, 2.25rem); }

  .btn { padding: 14px 22px; font-size: 0.8125rem; }

  /* Header */
  .header__logo-img { height: 48px; }

  /* Hero */
  .hero { padding-top: calc(var(--header-h) + 32px); padding-bottom: 56px; }
  .hero__inner { gap: 36px; }
  .hero__title { font-size: clamp(2rem, 9vw, 3rem); }
  .hero__subtitle { font-size: 1rem; margin-bottom: 28px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__media { aspect-ratio: 3/4; max-height: none; }

  /* Conceito */
  .conceito__inner { gap: 36px; }
  .conceito__highlight { font-size: 1.125rem; padding-left: 16px; }

  /* Diferenciais */
  .diferenciais__grid {
    grid-template-columns: 1fr;
  }
  .diferencial { padding: 36px 24px; }
  .diferencial__num { font-size: 2rem; }

  /* Serviços */
  .servicos__list { border-top: 1px solid var(--color-line); }
  .servico { padding: 40px 8px; }
  .servico__num { font-size: 3.5rem; }
  .servico__title { font-size: 1.5rem; }
  .servico__lead { font-size: 1rem; }

  /* Equipe */
  .equipe__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .profissional:last-child { max-width: 100%; }
  .profissional__nome { font-size: 1.5rem; }
  .profissional__quote { font-size: 1rem; }

  /* Gallery */
  .gallery__track { aspect-ratio: 1/1; }
  .gallery__controls { font-size: 0.75rem; }

  /* Lightbox */
  .lightbox__nav { padding: 12px; font-size: 1.5rem; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close { top: 16px; right: 16px; font-size: 2rem; }

  /* Depoimentos */
  .testimonials__quote-mark { font-size: 8rem; top: -24px; }
  .testimonial__text { font-size: 1.125rem; }
  .testimonials__controls { gap: 20px; flex-wrap: wrap; }

  /* CTA Final */
  .cta-final {
    padding: 88px 0;
    background-attachment: scroll;
  }
  .cta-final__actions { flex-direction: column; align-items: stretch; }
  .cta-final__actions .btn { width: 100%; }

  /* Contato */
  .contato__mapa { height: 260px; }

  /* Footer */
  .footer { padding: 56px 0 24px; }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
  }

  /* Modal */
  .modal { padding: 0; align-items: stretch; }
  .modal__dialog {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: 64px 24px 32px;
  }
  .form__row--two { grid-template-columns: 1fr; gap: 20px; }
  .mobile-menu__list a { font-size: 1.75rem; }
}

/* ============================================================
   VERY SMALL — up to 380px
   ============================================================ */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .hero__title { font-size: 2rem; }
  .modal__title { font-size: 1.625rem; }
}
