/* =========================================
   RESPONSIVIDADE — MOBILE FIRST
   Breakpoints:
     Mobile:  320px+  (base)
     Tablet:  768px+
     Desktop: 1024px+
     Large:   1280px+
   ========================================= */

/* Tablet → 768px+ */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-4);
  }

  /* Header: mostra CTA */
  .header__cta {
    display: inline-flex;
  }

  /* Hero: ações em linha */
  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Serviços: 2 colunas */
  .servicos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Garantia: 3 colunas */
  .garantia__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Galeria: slides maiores — proporção 4:5 mantida via aspect-ratio */
  .galeria__slide {
    width: 280px;
  }

  /* Galeria: footer em linha */
  .galeria__footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Depoimentos: 2 colunas */
  .depoimentos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2 colunas (tablet) — brand ocupa linha inteira */
  .footer__container {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* Desktop → 1024px+ */
@media (min-width: 1024px) {
  .header__logo-img {
    width: 140px;
  }

  .container {
    padding: 0 var(--space-4);
  }

  /* Tipografia: títulos maiores no desktop */
  .section-title {
    font-size: var(--font-size-4xl);
  }

  /* Header: nav visível, toggle oculto */
  .header__nav {
    display: flex;
    align-items: center;
  }

  .header__nav-list {
    flex-direction: row;
    gap: var(--space-1);
  }

  .header__nav-link {
    padding: var(--space-1) var(--space-2);
  }

  .header__toggle {
    display: none;
  }

  /* Hero: layout duas colunas */
  .hero__container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
  }

  .hero__content {
    text-align: left;
    flex: 1;
    animation-delay: 0s;
  }

  .hero__title {
    font-size: clamp(2.25rem, 3.5vw, 3rem);
  }

  .hero__subtitle {
    margin: 0;
  }

  .hero__actions {
    flex-direction: row;
    justify-content: flex-start;
  }

  .hero__stats {
    justify-content: flex-start;
  }

  .hero__visual {
    flex: 1;
    max-width: 520px;
  }

  /* Serviços: 3 colunas */
  .servicos__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Galeria: slides ainda maiores no desktop — proporção 4:5 mantida via aspect-ratio */
  .galeria__slide {
    width: 340px;
  }

  /* Sobre: duas colunas (imagem | conteúdo) + ordem restaurada */
  .sobre__container {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .sobre__image-wrapper {
    max-width: 460px;
    order: 1; /* imagem volta para a esquerda no desktop */
  }

  .sobre__content {
    order: 2; /* conteúdo à direita no desktop */
  }

  /* Diferenciais: 2 colunas no desktop */
  .diferenciais__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Serviço em Destaque: duas colunas */
  .destaque__container {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .destaque__content {
    flex: 1;
  }

  .destaque__features {
    flex: 1;
  }

  /* Contato: duas colunas (info | mapa) */
  .contato__container {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-6);
  }

  .contato__info {
    flex: 1;
  }

  .contato__mapa {
    flex: 1;
    min-height: 480px;
  }

  .contato__mapa-frame {
    min-height: 480px;
  }

  .contato__mapa-frame iframe {
    min-height: 480px;
  }

  /* Footer: 4 colunas (brand + nav + social + contato) */
  .footer__container {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-6);
    padding-top: 96px;
    padding-bottom: var(--space-8);
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__tagline {
    max-width: 340px;
  }

  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Large → 1280px+ */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--space-2);
  }
}

/* WhatsApp float — esconde label em mobile pequeno */
@media (max-width: 480px) {
  .whatsapp-float {
    padding: 14px;
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-float__label {
    display: none;
  }
}