/* ============================================================
   LCSJ Elétrica — responsive.css
   Mobile-first media queries
   ============================================================ */

/* ================================================================
   Tablet — até 768px
   ================================================================ */
@media (max-width: 768px) {

  /* Header */
  .header-nav,
  .header-cta { display: none; }

  .header-whatsapp-mobile { display: inline-flex; margin-left: auto; }

  /* Hero */
  .hero-inner { padding-block: 4rem 3rem; max-width: 100%; }

  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .trust-bar { gap: 0.875rem; }
  .trust-divider { display: none; }

  /* Números */
  .numbers-grid { grid-template-columns: 1fr; }
  .number-item { border-right: none; border-bottom: 0.5px solid var(--lcsj-border-dark); }
  .number-item:last-child { border-bottom: none; }

  /* Serviços */
  .services-grid { grid-template-columns: 1fr; }
  .carousel-btn { opacity: 0.75; }
  .carousel-btn[disabled] { opacity: 0.2 !important; }

  /* Empreitada */
  .section-empreitada { padding-block: 5rem; }

  /* Serviços Realizados */
  .portfolio-slide { flex: 0 0 100%; }
  .portfolio-carousel { padding-inline: 2.75rem; }
  .portfolio-btn { top: 50%; }

  /* Diferenciais */
  .differentials-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* CTA Banner */
  .cta-banner-inner { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .cta-banner-actions { width: 100%; }
  .cta-banner-actions .btn { flex: 1; justify-content: center; }

  /* Formulário */
  .contact-inner { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }

  .btn-submit { width: 100%; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ================================================================
   Mobile pequeno — até 480px
   ================================================================ */
@media (max-width: 480px) {

  .section-hero { min-height: 100svh; }

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

  .number-value { font-size: 2.5rem; }

  .section-services,
  .section-differentials,
  .section-contact { padding-block: 3.5rem; }

  .section-numbers { padding-block: 2.5rem; }

  .cta-banner-actions { flex-direction: column; }
  .cta-banner-actions .btn { width: 100%; justify-content: center; }

  .clients-grid { grid-template-columns: 1fr; }
  .client-card { padding: 1.375rem 1.25rem; }
  .section-clients { clip-path: polygon(0 3rem, 100% 0, 100% 100%, 0 100%); padding-top: 6rem; }

  .form-footer { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   Tablet médio — entre 769px e 960px
   ================================================================ */
@media (min-width: 769px) and (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   Desktop largo — acima de 1200px
   ================================================================ */
@media (min-width: 1200px) {
  .hero-inner { padding-block: 7rem 5rem; }
}