/* =========================================================
   TABLET  (≤ 1024px)
========================================================= */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 70px; }
  .hero__visual { max-width: 480px; margin: 0 auto; }
  .hero__content { text-align: center; }
  .hero__subtitle { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__badges { justify-content: center; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .why__grid, .region__grid { grid-template-columns: 1fr; gap: 50px; }
  .why__content, .region__content { text-align: center; }
  .why__list { justify-content: center; max-width: 420px; margin: 28px auto 0; }
  .region__content .btn { margin-inline: auto; }
  .region__cities { justify-content: center; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* =========================================================
   MOBILE  (≤ 768px)
========================================================= */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  .nav { position: fixed; top: 68px; left: 20px; right: 20px; flex-direction: column; align-items: flex-start;
    background: rgba(27,21,18,0.96); backdrop-filter: blur(16px); border: 1px solid var(--line-dark);
    border-radius: var(--radius-md); padding: 22px 24px; gap: 18px;
    transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0.35s var(--ease); z-index: 95; }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-toggle { display: flex; }
  .btn--nav { display: none; }

  .cta-form {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  gap: 10px;
  box-sizing: border-box;
}

.cta-form__input {
    width: 100%;
    max-width: 420px;
    height: 52px; /* Trava a altura na vertical */
    flex: none; /* ISSO RESOLVE O PROBLEMA: impede que ele estique na vertical */
    padding: 0 22px;
    box-sizing: border-box;
  }
  .cta-form__submit {
  width: 100%;
  max-width: 420px;
  min-height: 44px;
  justify-content: center;
  box-sizing: border-box;
}
  .hero__actions .btn { width: 100%; justify-content: center; }

  .cta-form { flex-direction: column; align-items: stretch; }
  .cta-form__input { width: 100%; }
  .cta-form__submit { width: 100%; justify-content: center; }
  .hero__badges { flex-direction: column; align-items: flex-start; gap: 12px; }

  .manifest { padding: 24px 20px 22px; }
  .floating-chip { position: static; display: inline-flex; margin: 10px 6px 0 0; animation: none; }
  .floating-chip--1, .floating-chip--2 { top: auto; left: auto; right: auto; bottom: auto; }

  .section { padding: 80px 0; }
  .grid--3 { grid-template-columns: 1fr; }

  .timeline { grid-template-columns: 1fr; gap: 46px; padding-top: 10px; }
  .timeline__track { top: 0; left: 22px; right: auto; width: 2px; height: 100%; }
  .timeline__fill { width: 100% !important; height: 0%; }
  .timeline__truck { top: 0; left: 50%; }
  .timeline__step { text-align: left; padding-left: 58px; }
  .timeline__marker { position: absolute; left: 0; top: 0; margin: 0; }
  .timeline__step p { margin: 0; max-width: none; }

  .why__list { margin: 26px 0 0; text-align: left; }
  .why__content { text-align: left; }

  .faq-item { padding: 18px 20px; }
  .faq-item summary { font-size: 15px; }

  .empresa-content p { font-size: 15px; }
  .empresa-content h3 { font-size: 17px; margin: 26px 0 10px; }

  .footer__inner { grid-template-columns: 1fr; text-align: left; }
  .footer__brand p { max-width: none; }

  .whatsapp-float { width: 54px; height: 54px; bottom: 18px; right: 18px; }
}

.map-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.map-card iframe {
  width: 100%;
  height: 240px;
  display: block;
  border: 0;
}

@media (max-width: 480px) {
  .hero__title { font-size: 1.65rem; }
  .brand__name { font-size: 15px; }
  .manifest__meta { flex-direction: column; gap: 6px; }
}