/* ===========================================================
   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; }
}

/* -----------------------------------------------------------
   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) {

  .hero {
    min-height: auto;
    padding-bottom: 0;                 /* formbar deixa de ser sobreposta */
    /* Gradiente original do mobile. */
    background: linear-gradient(180deg, #6B4A2C 0%, #90633C 50%, #C2A074 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; }
  .hero__airbnb { align-self: center; }
  .hero__disclaimer--desk { display: none; }
  .hero__disclaimer--mob {
    text-align: center;
    max-width: min(96vw, 480px);
    margin: 1.4rem auto 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.5rem;
  }

  /* 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.2rem;   /* desce logo + título + "Studios" */
    padding-bottom: 3.8rem;  /* compensa a descida do endereço (mantém a altura da seção) */
  }

  .hero__content { gap: 0.7rem; }

  /* -logo.png maior no mobile */
  .hero__logo { width: clamp(235px, 68vw, 315px); }

  /* mais largura útil no hero (gutter menor) → título, "Studios..." e imagem maiores */
  .hero .container,
  .hero .row { --bs-gutter-x: 1rem; }
  /* sem gutter vertical → imagem sobe, menos espaço após "Studios..." */
  .hero .row { --bs-gutter-y: 0; }

  /* Group 9-mobile (título) maior */
  .hero__title {
    margin-top: 0.6rem;                  /* perto da logo, sem colar */
    width: clamp(275px, 80vw, 315px);    /* Group 9-mobile um pouco menor */
  }
  .hero__title-serif { font-size: 1.35rem; }

  .hero__visual { margin-top: -0.8rem; gap: 0; }   /* sobe a imagem; endereço colado nela */
  /* imagem GRANDE, centralizada (align-items:center do .hero__visual) + leve deslocamento fixo p/ esquerda */
  .hero__frame {
    width: auto;
    max-width: none;
    position: relative;
    left: -0.8rem;
  }
  .hero__img { height: clamp(320px, 55svh, 520px); width: auto; max-width: none; }

  .hero__radial { display: none; }   /* sem sunburst no mobile */

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

  /* Seção 25H / Transcender o tempo — tudo centralizado no mobile */
  .tempo { padding: 3rem 0; }
  /* Isolation_Mode: faixa fina na borda esquerda, cobrindo toda a seção, sem passar sob a galeria */
  .tempo__img {
    top: 0;
    left: -6px;
    width: 20px;
    height: 100%;
    transform: none;
    opacity: 1;
  }
  .tempo__inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-left: 0;
  }
  .tempo__text {
    width: clamp(200px, 56vw, 270px);
  }
  .tempo__gallery {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .tempo__slides { aspect-ratio: 338 / 353; }
  .tempo__nav { justify-content: center; }

  /* Formulário: mais centralizado e sem pré-preenchimento (como o print) */
  .form-lead { max-width: 330px; }
  .form-lead__field input::placeholder { color: transparent; }

  /* linha acima de "HANDMADE BY SENSORIAL" */
  .hero__credit {
    max-width: 330px;
    margin-inline: auto;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  /* "STUDIOS..." ~ Group 12: reduz suave em telas menores, sem bold */
  .hero__highlight { font-size: clamp(0.8rem, 3.7vw, 1.02rem); letter-spacing: 0; }

  /* no mobile o endereço fica abaixo da imagem (some a versão desktop) */
  .hero__location--desk { display: none; }
  .hero__location { font-size: 0.82rem; }   /* endereço um pouco maior no mobile */
  /* a Group 87-mobile.png tem espaço vazio na base → puxo o endereço p/ perto do conteúdo visível */
  .hero__location--mob { margin-top: -3.5rem; }

  /* pin do endereço vira pin-mobile.png no mobile */
  .hero__location-icon {
    background: url("../img/pin-mobile.png") center / contain no-repeat;
    border-radius: 0;
  }
  .hero__location-icon svg { display: none; }

  /* traço separador entre o título (Group 9) e "Studios..." */
  .hero__highlight::before {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0.6rem auto 1rem;
  }
}

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