/* =====================================================================
   RESPONSIVE.CSS  —  Pontos de quebra
   Deve ser importado por ÚLTIMO para sobrescrever o layout base.
   Breakpoints: 1200 / 992 / 768 / 480
   ===================================================================== */

/* ---------------------------------------------------------------
   ≤ 1200px  —  ajustes finos de grade
   --------------------------------------------------------------- */
@media (max-width: 1200px) {
  .benefit + .benefit {
    padding-left: var(--space-5);
  }
}

/* ---------------------------------------------------------------
   ≤ 992px  —  tablet: grades de 4 → 2 colunas, layouts 2col → 1col
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  /* Navegação vira menu lateral */
  .nav-toggle {
    display: grid;
  }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    padding: calc(var(--header-h) + 1.5rem) var(--space-6) var(--space-8);
    transform: translateX(100%);
    transition: transform var(--t-base);
    z-index: var(--z-menu);
    overflow-y: auto;
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .primary-nav a {
    display: block;
    padding: 0.85rem 0.5rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-border);
  }

  .primary-nav a::after {
    display: none;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 9, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
    z-index: var(--z-header);
  }

  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Barra de benefícios: 2x2 */
  .benefits-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .benefit + .benefit {
    border-left: none;
    padding-left: 0;
  }

  .benefit:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: var(--space-5);
  }

  /* Layouts de duas colunas viram uma coluna */
  .campaign,
  .draws,
  .quote {
    grid-template-columns: 1fr;
  }

  .campaign-media {
    order: -1;
    max-width: 460px;
    margin-inline: auto;
  }

  .quote-form {
    order: 2;
  }

  /* Grades de cards: 4 → 2 */
  .cards-grid,
  .vehicles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Rodapé: 4 → 2 colunas */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------
   ≤ 768px  —  celular grande
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    background-size: cover;
    background-position: 78% center;
    text-align: left;
  }

  /* Reposiciona o fundo e garante leitura sobre camada translúcida */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(247, 245, 241, 0.95) 0%,
      rgba(247, 245, 241, 0.86) 55%,
      rgba(247, 245, 241, 0.6) 100%
    );
  }

  .hero-content {
    max-width: 100%;
    padding-block: var(--space-16) var(--space-12);
  }

  .benefits-bar {
    margin-top: calc(var(--space-12) * -1);
  }

  /* Grades de cards: 2 → scroll horizontal com snap */
  .cards-grid,
  .vehicles-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .cards-grid > *,
  .vehicles-grid > * {
    scroll-snap-align: start;
  }

  /* Formulário em coluna única */
  .form-grid {
    grid-template-columns: 1fr;
  }

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

  /* Mobile é rolagem manual: oculta o menu hambúrguer e a navegação lateral */
  .nav-toggle { display: none; }
  .primary-nav { display: none; }
}

/* ---------------------------------------------------------------
   ≤ 480px  —  celular pequeno
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --header-h: 64px;
  }

  .header-actions .btn--header span {
    display: none; /* mantém só o ícone do WhatsApp no header */
  }

  .header-actions .btn--header {
    padding: 0.6rem;
    width: 44px;
  }

  .benefits-inner {
    grid-template-columns: 1fr;
  }

  .benefit:nth-child(even) {
    border-left: none;
    padding-left: 0;
  }

  .benefit + .benefit {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--space-5);
  }

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

  .cards-grid,
  .vehicles-grid {
    grid-auto-columns: minmax(86%, 1fr);
  }

  .wa-float .wa-tooltip {
    display: none; /* só o ícone no celular pequeno */
  }
}

/* =====================================================================
   RESPONSIVO — novas seções one page
   ===================================================================== */
@media (max-width: 992px) {
  .about { grid-template-columns: 1fr; }
  .about-media { order: -1; max-width: 560px; margin-inline: auto; }

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

  .member-inner { justify-content: center; text-align: center; }

  .reviews-summary { flex-direction: column; align-items: flex-start; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }

  .contact { grid-template-columns: 1fr; }
  .contact-map { position: static; }

  .footer-grid--slim { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-actions { width: 100%; }
  .reviews-actions .btn { flex: 1 1 auto; }
  .member-links { gap: var(--space-4) var(--space-5); }
  .contact-cta { width: 100%; }
  .contact-cta .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .member-inner { flex-direction: column; }
  .member-links { flex-direction: column; align-items: center; gap: var(--space-3); }
  .footer-grid--slim { grid-template-columns: 1fr; }
  .draws-meta { gap: var(--space-5); }
}

/* App Total10 — responsivo */
@media (max-width: 992px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-shot { width: min(260px, 70%); }
}
@media (max-width: 480px) {
  .app-features { grid-template-columns: 1fr; }
  .app-actions { flex-direction: column; align-items: flex-start; }
}