/* =========================================
   RESPONSIVE
   ========================================= */


/* =========================================
   BASE MOBILE — ATÉ 599px
   ========================================= */

@media (max-width: 599px) {

  :root {
    --container-padding: 1.1rem;
    --space-2xl: 4rem;
    --space-3xl: 5.5rem;
  }


  /* -----------------------------------------
     HEADER
     ----------------------------------------- */

  .header__toggle {
    display: flex;
    position: relative;
    z-index: 110;
  }

  /*
     MENU FECHADO
  */

  .header__nav {
    display: none;
  }

  /*
     MENU ABERTO
  */

  .header.nav-open .header__nav {

    display: flex !important;

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: var(--space-lg);

    /*
       FUNDO MARROM / DOURADO
    */

    background:
      radial-gradient(
        circle at 50% 30%,
        rgba(214, 160, 74, 0.12),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        #2A1D14 0%,
        #35251A 50%,
        #24180F 100%
      ) !important;

    /*
       CONTRASTE
    */

    border: none;

    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.45);

    z-index: 105;

    overflow-y: auto;

  }


  /* -----------------------------------------
     LINKS DO MENU
     ----------------------------------------- */

  .header.nav-open .header__nav-list {

    display: flex !important;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: var(--space-lg);

    margin: 0;
    padding: 0;

  }


  .header.nav-open .header__nav-link {

    color: #FFF7E8 !important;

    font-size: 1rem;

    font-weight: 600;

  }


  .header.nav-open .header__nav-link:hover,
  .header.nav-open .header__nav-link:focus-visible {

    color: #F0CC7A !important;

  }


  /* -----------------------------------------
     BOTÃO DO MENU
     ----------------------------------------- */

  .header.nav-open .header__cta {

    display: inline-flex !important;

  }


  /* -----------------------------------------
     ÍCONE DOS 3 PONTINHOS / X
     ----------------------------------------- */

  .header.nav-open .header__toggle {

    position: relative;

    z-index: 110;

  }


  .header.nav-open .header__toggle span {

    background: #F0CC7A !important;

  }


  /* -----------------------------------------
     HERO
     ----------------------------------------- */

  .hero__inner {

    grid-template-columns: 1fr;

    min-height: auto;

    gap: var(--space-lg);

  }


  .hero {

    padding-top: calc(
      var(--space-2xl) + var(--space-sm)
    );

    padding-bottom: var(--space-lg);

  }


  .hero__mark {

    order: -1;

    height: auto;

  }


  .hero__mark svg {

    width: 130px;

  }


  .hero__mark-glow {

    width: 220px;
    height: 220px;

  }


  .hero__headline {

    font-size: clamp(
      2rem,
      8vw,
      2.6rem
    );

  }


  .hero__actions {

    flex-direction: column;

    align-items: stretch;

  }


  .hero__actions .btn {

    width: 100%;

  }


  /* -----------------------------------------
     TRUSTBAR
     ----------------------------------------- */

  .trustbar__list {

    grid-template-columns: 1fr;

    gap: var(--space-md);

    padding-block: var(--space-md);

  }


  /* -----------------------------------------
     SOBRE / LOCALIZAÇÃO
     ----------------------------------------- */

  .about__inner,
  .location__inner {

    grid-template-columns: 1fr;

  }


  .about__visual {

    aspect-ratio: 16 / 10;

  }


  /* -----------------------------------------
     ÁREAS
     ----------------------------------------- */

  .areas__grid {

    grid-template-columns: 1fr;

  }


  /* -----------------------------------------
     PROCESSO
     ----------------------------------------- */

  .process__list {

    grid-template-columns: 1fr;

    gap: var(--space-xl);

  }


  .process__step:not(:last-child)::after {

    display: none;

  }


  /* -----------------------------------------
     FOOTER
     ----------------------------------------- */

  .footer__inner {

    grid-template-columns: 1fr;

    gap: var(--space-lg);

  }


  .footer__bottom {

    flex-direction: column;

    align-items: flex-start;

  }


  /* -----------------------------------------
     WHATSAPP
     ----------------------------------------- */

  .whatsapp-float {

    bottom: 16px;

    right: 16px;

    width: 52px;

    height: 52px;

  }

}


/* =========================================
   TABLET — 600px ATÉ 959px
   ========================================= */

@media (min-width: 600px) and (max-width: 959px) {


  /* -----------------------------------------
     HERO
     ----------------------------------------- */

  .hero__inner {

    grid-template-columns: 1fr;

    text-align: center;

    gap: var(--space-lg);

  }


  .hero__mark {

    order: -1;

  }


  .hero__mark svg {

    width: 170px;

  }


  .hero__text {

    margin-inline: auto;

  }


  .hero__eyebrow,
  .hero__actions,
  .hero__social {

    justify-content: center;

  }


  /* -----------------------------------------
     TRUSTBAR
     ----------------------------------------- */

  .trustbar__list {

    grid-template-columns: 1fr;

  }


  /* -----------------------------------------
     SOBRE
     ----------------------------------------- */

  .about__inner {

    grid-template-columns: 1fr;

  }


  /* -----------------------------------------
     ÁREAS
     ----------------------------------------- */

  .areas__grid {

    grid-template-columns: repeat(
      2,
      1fr
    );

  }


  /* -----------------------------------------
     PROCESSO
     ----------------------------------------- */

  .process__list {

    grid-template-columns: 1fr;

    gap: var(--space-xl);

  }


  .process__step:not(:last-child)::after {

    display: none;

  }


  /* -----------------------------------------
     LOCALIZAÇÃO
     ----------------------------------------- */

  .location__inner {

    grid-template-columns: 1fr;

  }


  /* -----------------------------------------
     FOOTER
     ----------------------------------------- */

  .footer__inner {

    grid-template-columns: 1fr 1fr;

  }

}


/* =========================================
   TELAS MUITO PEQUENAS — ATÉ 360px
   ========================================= */

@media (max-width: 360px) {

  .hero__headline {

    font-size: 1.9rem;

  }


  .btn {

    padding: 0.85rem 1.4rem;

    font-size: 0.8rem;

  }

}
/* =========================================
   HERO MOBILE — ORDEM DEFINITIVA
   ========================================= */

@media (max-width: 767px) {

  .hero {
    position: relative;
  }

  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* Conteúdo vem primeiro */
  .hero__content {
    position: relative !important;
    order: 1 !important;
    transform: none !important;
    width: 100% !important;
  }

  /* Foto obrigatoriamente depois do conteúdo */
  .hero__mark {
    position: relative !important;
    order: 2 !important;

    display: flex !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    margin-top: 1rem !important;

    transform: none !important;
  }

  .hero__mark img {
    display: block !important;

    width: min(100%, 390px) !important;
    max-width: 390px !important;

    height: auto !important;

    margin: 0 auto !important;
  }

  /* Redes continuam dentro do conteúdo */
  .hero__social {
    position: relative !important;
    z-index: 5 !important;
  }
}
/* =========================================
   HERO MOBILE — LINHA APÓS A FOTO
   NÃO ALTERA O FADE DA IMAGEM
   ========================================= */

@media (max-width: 767px) {

  .hero__mark {
    position: relative !important;
    padding-bottom: 0 !important;
  }

  /* Elemento decorativo separado da imagem */
  .hero__mark-glow {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: -2rem;

    width: 100% !important;
    height: 1px !important;

    background: linear-gradient(
      90deg,
      transparent 8%,
      rgba(201, 154, 74, 0.20),
      rgba(226, 192, 120, 0.65),
      rgba(201, 154, 74, 0.20),
      transparent 92%
    ) !important;

    opacity: 1 !important;

    pointer-events: none;
    z-index: 10;
  }

  /* Pequena estrela no centro */
  .hero__mark-glow::after {
    content: "✦";

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-size: 10px;
    line-height: 1;

    color: rgba(226, 192, 120, 0.9);

    background: var(--color-bg);
    padding: 0 7px;

    text-shadow: 0 0 10px rgba(201, 154, 74, 0.25);
  }

  /* Garante que a foto continue exatamente como estava */
  .hero__mark img {
    padding: 0 !important;
    margin: 0 auto !important;
  }
}