/* ========================================
   TABLET — max 1024px
   ======================================== */
@media (max-width: 1024px) {
  :root {
    --font-size-3xl: 2.75rem;
    --font-size-2xl: 2.2rem;
  }

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

  .sobre-content,
  .inss-content,
  .contato-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .isencao-box {
    grid-template-columns: 1fr;
  }

  .navbar__nav {
    gap: var(--space-md);
  }

  /* Detran cards — tablet: 1 coluna, proporção paisagem */
  .detran-grid {
    grid-template-columns: 1fr;
  }

  .detran-card {
    aspect-ratio: 16 / 7;
  }
}

/* ========================================
   MOBILE — max 768px
   ======================================== */
@media (max-width: 768px) {
  :root {
    --font-size-3xl: 2.2rem;
    --font-size-2xl: 1.75rem;
    --font-size-xl:  1.6rem;
    --font-size-lg:  1.3rem;
  }

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

  /* Navbar */
  .navbar__nav,
  .navbar__cta,
  .navbar__detran {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    padding-top: calc(var(--header-height) + var(--space-lg));
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__content {
    text-align: center;
  }

  .hero__subtitle {
    margin: 0 auto var(--space-xl);
  }

  .hero__image {
    order: 1;
  }

  .hero__car-img {
    max-width: 480px;
  }

  .hero__logo {
    width: 120px;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .trust-bar {
    gap: var(--space-lg);
  }

  /* Hero sub */
  .hero-sub__ctas {
    flex-direction: column;
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Detran cards */
  .detran-grid {
    grid-template-columns: 1fr;
  }

  .detran-card {
    aspect-ratio: 5 / 6; /* Increased aspect ratio for taller cards */
    margin-bottom: var(--space-lg);
  }

  .detran-card__img {
    height: auto;
    object-fit: cover; /* Ensures the image fits well within the new aspect ratio */
  }

  /* PcD + Táxi + Detran Banners */
  .pcd-banner,
  .taxi-banner,
  .detran-banner {
    height: 420px;
  }

  .pcd-banner__title,
  .taxi-banner__title,
  .detran-banner__title {
    font-size: var(--font-size-xl);
  }

  /* Service rows */
  .service-row {
    grid-template-columns: 1fr;
  }

  .service-row--dark .service-row__content,
  .service-row--light .service-row__content {
    padding: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .service-row__visual {
    margin: 0 var(--space-md) var(--space-md);
  }

  /* Highlight strip */
  .highlight-strip__inner {
    flex-direction: column;
    text-align: center;
  }

  .highlight-strip__cta {
    align-items: center;
    width: 100%;
  }

  .highlight-strip__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Buttons — allow wrap on mobile to prevent overflow */
  .btn {
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }

  /* isencao-box padding reduction */
  .isencao-box {
    padding: var(--space-lg);
  }

  /* Cards */
  .car-card__actions {
    flex-direction: column;
  }

  /* Steps */
  .steps {
    flex-direction: column;
    align-items: center;
  }

  .step::after {
    display: none;
  }

  /* Sobre */
  .sobre-section .container {
    border-radius: var(--border-radius-lg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .sobre-stats {
    grid-template-columns: 1fr 1fr;
  }

  .sobre-photo {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Sections */
  .section {
    padding: var(--space-xl) 0;
  }

  /* WhatsApp float */
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-float__tooltip {
    display: none;
  }
}

/* ========================================
   SMALL MOBILE — max 480px
   ======================================== */
@media (max-width: 480px) {
  :root {
    --font-size-3xl: 1.9rem;
    --font-size-2xl: 1.5rem;
    --font-size-xl:  1.4rem;
  }

  .hero__title {
    font-size: 1.75rem;
  }

  .btn-lg {
    padding: 0.875rem 1.5rem;
  }

  .sobre-stats {
    grid-template-columns: 1fr 1fr;
  }

  .section-title {
    font-size: 1.4rem;
  }
}