/* ==========================================================================
   Responsivo — ajustes por breakpoint
   Os grids de cards usam auto-fit/minmax e já se adaptam sozinhos; aqui ficam
   apenas os casos que exigem mudança real de layout ou de comportamento.
   ========================================================================== */

/* --- Até 900px: navegação vira painel lateral ---------------------------- */

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header__nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-header);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-6);
    width: min(21rem, 85vw);
    padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-8);
    background-color: var(--surface);
    border-inline-start: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease),
      visibility var(--dur) var(--ease);
  }

  .header__nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .header__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .header__link {
    display: block;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-base);
  }

  /* No painel vertical, o sublinhado animado não faz sentido. */
  .header__link::after {
    display: none;
  }

  .header__cta {
    width: 100%;
  }
}

/* --- A partir de 768px: serviços em duas colunas ------------------------- */

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- A partir de 900px: layouts de duas colunas -------------------------- */

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  .history__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

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

  .multibrand__content {
    padding: var(--space-9) var(--space-8);
  }
}

/* --- Até 768px: depoimentos viram carrossel deslizante ------------------- */

@media (max-width: 768px) {
  .testimonials__grid {
    display: flex;
    gap: var(--space-4);
    /* Rolagem horizontal com encaixe: um depoimento por vez. */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-5);
    /* Sangra até a borda da tela para o card seguinte aparecer "espiando". */
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    padding-bottom: var(--space-3);
    scrollbar-width: none;
  }

  .testimonials__grid::-webkit-scrollbar {
    display: none;
  }

  .testimonial {
    flex: 0 0 min(20rem, 82vw);
    scroll-snap-align: start;
  }

  /* Sem hover em toque; o translateY atrapalharia a rolagem. */
  .testimonial:hover {
    transform: none;
  }
}

/* Acima de 768px o carrossel não existe, então os controles somem. */
@media (min-width: 769px) {
  .testimonials__dots {
    display: none;
  }
}

/* --- Até 640px: telas pequenas ------------------------------------------ */

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + var(--space-9)) var(--space-11);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  /* A seta de rolagem competiria com os botões em telas curtas. */
  .hero__scroll-hint {
    display: none;
  }

  .highlights__grid {
    padding: var(--space-5);
    gap: var(--space-5);
  }

  .multibrand__content,
  .partners,
  .rating__card,
  .final-cta__card {
    padding-inline: var(--space-5);
  }

  .rating__card,
  .final-cta__card {
    padding-block: var(--space-8);
  }

  .fab--whatsapp {
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
  }

  .fab--top {
    inset-block-end: calc(var(--space-4) + 56px + var(--space-2));
    inset-inline-end: var(--space-4);
  }
}

/* --- Impressão ----------------------------------------------------------- */

@media print {
  .header,
  .nav-backdrop,
  .fab,
  .hero__scroll-hint,
  .location__map {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}