/* ===========================================================
   Living Full 25h — Responsividade
   Breakpoints alinhados ao Bootstrap 5.
   =========================================================== */

/* -----------------------------------------------------------
   Ajuste fino em telas muito largas (≥ 1400px)
   ----------------------------------------------------------- */
@media (min-width: 1400px) {
  .hero__content { max-width: 600px; }
  .hero__frame { width: min(100%, 540px); }
}

/* -----------------------------------------------------------
   TABLET / abaixo de lg (≤ 991.98px)
   -> imagem abaixo do conteúdo; barra do formulário no fluxo;
      formulário passa a ser vertical (evita campos espremidos)
   ----------------------------------------------------------- */
@media (max-width: 991.98px) {

  .container{
    display: flex;
    justify-content: center;
  }

  .hero {
    min-height: auto;
    padding-bottom: 0;                 /* formbar deixa de ser sobreposta */
    /* gradiente vertical no empilhamento */
    background: linear-gradient(
      180deg,
      var(--c-brown-700) 0%,
      var(--c-brown-500) 55%,
      var(--c-beige-300) 100%
    );
  }

  .hero__inner {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  /* conteúdo centralizado */
  .hero__content {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .hero__highlight {
    padding-left: 0;
    border-left: 0;                    /* sem barra lateral quando centralizado */
  }

  .hero__location { align-self: center; }

  /* imagem abaixo do conteúdo */
  .hero__visual { margin-top: 3rem; }
  .hero__frame { width: min(100%, 560px); margin-inline: auto; }
  .hero__radial { width: 130%; }

  /* barra do formulário: fluxo normal e empilha crédito abaixo */
  .hero__formbar {
    position: static;
    display: block;
    padding: 2.6rem 0 3rem;
  }

  /* formulário vertical */
  .form-lead {
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
    max-width: 560px;
    margin-inline: auto;
  }
  .form-lead__field { width: 100%; }
  .form-lead__submit {
    width: 100%;
    padding: 1rem;
    margin-top: 0.4rem;
  }

  .hero__credit {
    position: static;
    text-align: center;
    margin: 1.6rem 0 0;
  }
}

/* -----------------------------------------------------------
   MOBILE (≤ 767.98px)
   -> tudo empilhado; imagem em largura total; card centralizado
   ----------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hero__inner {
    padding-top: 2.6rem;
    padding-bottom: 2.4rem;
  }

  .hero__content { gap: 1.5rem; }

  .hero__title { font-size: 1.55rem; }
  .hero__title-serif { font-size: 1.35rem; }

  .hero__visual { margin-top: 2.4rem; }
  .hero__frame { width: 100%; }         /* imagem ocupa largura total */
  .hero__radial { width: 126%; }

  .hero__badge {
    right: 50%;
    transform: translateX(50%);
    bottom: -20px;
    white-space: nowrap;
  }
}

/* -----------------------------------------------------------
   MOBILE pequeno (≤ 480px)
   ----------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__title {
    font-size: 1.25rem;
    letter-spacing: 0;
  }
  .hero__title-serif { font-size: 1.15rem; }
  .hero__highlight { font-size: 1.05rem; }
  .hero__location { font-size: 0.64rem; padding-right: 1rem; }
  .hero__badge { font-size: 0.64rem; padding: 0.55rem 0.95rem; }
}