/* ===========================================================
   Aqua — Layout mobile / tablet (≤1024px)
   -----------------------------------------------------------
   Base de design: 414px (iPhone XR/11). A ESCALA (root
   font-size, âncora 414px) está em style.css. Aqui ficam só
   os overrides de LAYOUT do mobile — sem tocar no desktop.
   =========================================================== */

@media (max-width: 1024px) {

  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */
  .hero {
    min-height: auto;                /* header menor (altura pelo conteúdo) */
    padding: 1.75rem 1.5rem 2.5rem;
    justify-content: flex-start;
    gap: 1.25rem;
    background-image: url("../img/bg-home-mobile.png");  /* fundo próprio do mobile */
    background-size: cover;
    background-position: center;
  }
  /* máscara escurecendo o fundo */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);   /* escurece a bg-home-mobile */
    z-index: 0;
  }
  .hero__top,
  .hero__lead,
  .hero__address { position: relative; z-index: 1; }

  /* topo: logo à esquerda + hambúrguer à direita */
  .hero__top {
    margin-top: 0;
    align-items: flex-start;
    z-index: 7;   /* acima do lead → o menu aberto cobre o conteúdo */
  }
  .hero__logo {
    width: 13rem;      /* um pouco maior */
    max-width: 68vw;
    margin-left: 0;    /* mais para a esquerda que no desktop */
  }

  /* menu vira hambúrguer */
  .hero__nav { display: none; }
  .hero__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    width: 2.75rem;
    height: 2.1rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .hero__burger span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  /* estado aberto — vira "X" */
  .hero__burger.is-open span:nth-child(1) { transform: translateY(0.72rem) rotate(45deg); }
  .hero__burger.is-open span:nth-child(2) { opacity: 0; }
  .hero__burger.is-open span:nth-child(3) { transform: translateY(-0.72rem) rotate(-45deg); }

  /* menu aberto — painel largo, opções centralizadas, fundo bronze */
  .hero__nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: center;           /* opções centralizadas */
    gap: 1.75rem;
    position: absolute;
    top: 4.75rem;                  /* abaixo do topo (logo + hambúrguer) */
    left: 0;
    right: 0;
    z-index: 6;
    margin: 0;                     /* anula o margin-right do desktop */
    padding: 2.5rem 1.5rem;
    background: #b68760;           /* fundo bronze */
    font-size: 0.75rem;
    letter-spacing: 0.3em;
  }
  .hero__nav.is-open a { color: #ffffff; }
  .hero__nav.is-open span { display: none; } /* esconde os separadores | */

  /* bloco de textos alinhado ao logo (esquerda) */
  .hero__lead {
    margin-left: 0;
    gap: 0.5rem;
    margin-top: 3.25rem;   /* desce o bloco de textos + botão */
  }
  .hero__lead-title { width: 15rem; max-width: 74vw; margin-top: 0; }
  .hero__lead-sub {
    width: auto;
    max-width: none;
    margin-top: 0.55rem;
    font-size: 0.9375rem;    /* maior p/ evidenciar */
    letter-spacing: 0.16em;
  }
  .br-mob { display: inline; }   /* ativa as quebras no mobile */
  .hero__desc {                  /* specs Figma mobile: Montserrat 500, 11px, 0.3em */
    width: 19.1875rem;           /* 307px @414 */
    max-width: 100%;
    margin-top: 0.85rem;
    font-weight: 500;
    font-size: 0.6875rem;        /* 11px */
    line-height: 1.0625rem;      /* 17px */
    letter-spacing: 0.3em;
  }
  .hero__cta {                 /* specs Figma mobile: 192x28, #B68760 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12rem;              /* 192px @414 */
    height: 1.75rem;           /* 28px */
    padding: 0.3326rem 0.665rem;
    gap: 0.4156rem;
    margin-top: 1.25rem;
    background: #B68760;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  .hero__address {
    margin-left: 0;
    margin-top: 1.25rem;   /* sobe um pouco o pin + endereço */
    margin-bottom: 0;
    align-items: center;       /* endereço ao lado do pin */
    flex-wrap: nowrap;         /* tudo em uma linha */
    font-size: 0.5625rem;      /* menor p/ caber em uma linha */
    letter-spacing: 0.04em;
  }
  .hero__address span { min-width: 0; white-space: nowrap; }

  /* -------------------------------------------------------
     CONTATO — formulário vertical
     ------------------------------------------------------- */
  .contato {
    display: block;
    min-height: auto;
    background: #303032;            /* specs Figma mobile */
    padding: 0;
  }
  .contato__form {                  /* specs Figma: padding 31.7x31.1, gap 22.85 */
    flex-direction: column;
    align-items: flex-start;
    gap: 1.428rem;                  /* 22.85px @414 */
    padding: 1.9835rem 1.944rem;    /* 31.736px 31.1013px */
  }
  .field {
    width: 100%;
    max-width: none;
    height: auto;
  }
  /* mobile: só nome, telefone e e-mail (esconde o select) */
  .field--pref { display: none; }
  .field label { font-size: 0.5rem; }   /* NOME / TELEFONE / E-MAIL menores */

  /* todos os botões "Quero mais informações" na mesma proporção */
  .contato__btn,
  .cidade__btn,
  .mapa__btn,
  .experiencia__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13.75rem;             /* ~220px @414 (um pouco maiores) */
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: 0.4rem 0.65rem;
    gap: 0.3125rem;
    font-size: 0.5625rem;        /* um pouco maior */
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .contato__btn { margin: 0.75rem auto 0; }

  /* -------------------------------------------------------
     VÍDEO — moldura menor (não pega a tela toda)
     ------------------------------------------------------- */
  .video { padding: 2rem 1.75rem; background: #303032; }  /* fundo escuro também no mobile */

  /* -------------------------------------------------------
     ESPAÇOS — foto da sala + blob (Group-mobile) sobreposto
     ------------------------------------------------------- */
  .espacos { padding: 1rem 1.75rem 2rem; overflow: visible; }
  .espacos__stage {
    aspect-ratio: 1454 / 980;   /* proporção da foto da sala */
    overflow: visible;          /* deixa o blob vazar à esquerda */
  }
  .espacos__viewport {
    left: 0;
    width: 100%;                /* foto ocupa todo o palco no mobile */
  }
  /* blob mobile: canto superior esquerdo, sangrando p/ a borda da tela */
  .espacos__overlay {
    content: url("../img/Group-mobile.png");
    top: -6%;
    left: -1.75rem;            /* cancela o padding → encosta na borda */
    height: auto;
    width: 52%;
  }
  /* setas centralizadas ao fim da foto */
  .espacos__controls {
    left: 50%;
    bottom: 0.85rem;
    gap: 0.75rem;
  }
  .espacos__btn-desk { display: none; }  /* botão do Group 85 é só desktop */

  /* setas na mesma proporção das demais (113.34 x 11.17), mas em preto */
  .espacos__arrow {
    width: 7.084rem;      /* 113.34px @414 */
    height: 0.698rem;     /* 11.17px */
    background: #1a1a1a;
  }
  .espacos__arrow svg line,
  .espacos__arrow svg polyline { stroke: #ffffff; }

  /* CTA abaixo da foto (mobile) */
  .mobile-only { display: block; }
  .espacos__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .espacos__cta {                /* mesma proporção dos demais botões */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13.75rem;             /* ~220px @414 */
    padding: 0.4rem 0.65rem;
    gap: 0.3125rem;
    background: #303032;
    color: #ffffff;
    font-family: 'Walkway Expand', 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* -------------------------------------------------------
     EXCEPCIONAL — Vector + texto3 + lista em coluna única
     ------------------------------------------------------- */
  .exepcional { padding-block: 0 2.5rem; }

  /* contorno bronze envolvendo SÓ o texto3 + "mais de 12 mil" (não a lista) */
  .exepcional__vector {
    top: 2rem;                 /* desce o contorno junto com o texto */
    left: -3.25rem;            /* sangra à esquerda (como no print) */
    width: 15rem;              /* um pouco maior */
    max-width: none;
    z-index: 1;
  }

  /* texto à esquerda + lista à direita, dentro do contorno */
  .exepcional__content {
    position: relative;
    z-index: 2;                /* textos por cima da linha bronze */
    padding: 3rem 1.25rem 2.5rem;
    gap: 1rem;
    align-items: flex-start;
  }
  .exepcional__head { padding-top: 1.75rem; flex: 0 0 8.25rem; width: 8.25rem; }
  .exepcional__title { width: 7.75rem; }   /* texto3 um pouco maior */
  .exepcional__sub {
    margin-top: 0.85rem;
    font-size: 0.6875rem;      /* um pouco maior */
    letter-spacing: 0.12em;
  }

  /* lista unificada numa torre só, empurrada p/ a direita da tela */
  .exepcional__lists {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 0 auto;        /* encosta a lista à direita */
    padding-top: 0.25rem;
  }
  .exepcional__lists ul { display: contents; }   /* funde as 2 colunas numa só */
  .exepcional__lists li {
    font-size: 0.5625rem;      /* fonte um pouco maior */
    letter-spacing: 0.08em;
  }
  .exepcional__lists .dash {
    width: 1rem;
    margin-right: 0.5rem;
  }
  /* reordena p/ a sequência do print (Pool→Quadra→Fitness→Spa→Gourmet→Pet→
     Salão→Coworking→Quadra Rec.→Playground→E muito mais) */
  .exepcional__lists ul:first-child li:nth-child(4) { order: 7; }  /* Salão de Festas */
  .exepcional__lists ul:first-child li:nth-child(5) { order: 8; }  /* Coworking */
  .exepcional__lists ul:last-child  li:nth-child(1) { order: 4; }  /* Spa */
  .exepcional__lists ul:last-child  li:nth-child(2) { order: 5; }  /* Espaços Gourmet */
  .exepcional__lists ul:last-child  li:nth-child(3) { order: 6; }  /* Pet Place */
  .exepcional__lists ul:last-child  li:nth-child(4) { order: 9; }  /* Quadra Recreativa */
  .exepcional__lists ul:last-child  li:nth-child(5) { order: 10; } /* Playground */
  .exepcional__lists ul:last-child  li:nth-child(6) { order: 11; } /* E muito mais */

  /* galeria — 2 fotos visíveis */
  .exepcional__track img {
    flex-basis: calc((100% - 0.5rem) / 2);
    width: calc((100% - 0.5rem) / 2);
  }

  /* setas — Rectangle 149: 113.34 x 11.17, bg #B68760 (preenchido) */
  .exepcional__controls { margin-top: 1.75rem; gap: 0.75rem; }
  .exepcional__arrow {
    width: 7.084rem;      /* 113.34px @414 */
    height: 0.698rem;     /* 11.17px */
    background: #b68760;
    border: none;
  }
  .exepcional__arrow svg line,
  .exepcional__arrow svg polyline { stroke: #303032; }

  /* -------------------------------------------------------
     EXPERIÊNCIA — cards maiores em galeria (scroll) + setas
     ------------------------------------------------------- */
  .experiencia { padding-block: 3.5rem 2.5rem; }
  .experiencia__title {
    margin-bottom: 1.75rem;
    padding-inline: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
  /* detalhe bronze no canto superior direito */
  .experiencia__vector {
    top: -5rem;        /* mais para cima */
    right: -2.75rem;
    width: 5rem;       /* menor */
  }

  /* viewport rolável (só o mobile tem overflow → só aqui vira galeria) */
  .experiencia__gallery {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .experiencia__gallery::-webkit-scrollbar { display: none; }

  /* galeria "peek": 1 card inteiro no centro + metades nas laterais */
  .experiencia__cards {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-inline: 26vw;  /* centraliza o card ativo (vizinhos pela metade) */
  }
  .expcard {
    flex: 0 0 48vw;        /* 1 card cheio; vizinhos aparecem pela metade */
    max-width: none;       /* neutraliza o 23% do desktop */
    scroll-snap-align: center;
  }
  /* conteúdo dos cards menor p/ caber sem sobrepor */
  .expcard__main { top: 46%; gap: 0.5rem; padding-inline: 0.5rem; }
  .expcard__icon { height: 1.6rem; }
  .expcard__main h3 { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .expcard__sub {
    bottom: 1rem;
    padding-inline: 0.85rem;
    font-size: 0.6875rem;   /* um pouco maior */
    line-height: 1.45;
  }

  /* setas — mesmo modelo da seção de cima (bronze preenchido) */
  .experiencia__controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }
  .experiencia__arrow {
    width: 7.084rem;      /* 113.34px @414 */
    height: 0.698rem;     /* 11.17px */
    padding: 0;
    border: none;
    background: #b68760;
    cursor: pointer;
  }
  .experiencia__arrow svg { width: 100%; height: 100%; display: block; }
  .experiencia__arrow svg line,
  .experiencia__arrow svg polyline { stroke: #303032; stroke-width: 1.4; fill: none; }

  /* -------------------------------------------------------
     ONDE A CIDADE — bolhas menores, imagens maiores,
     textos menores (acordeão)
     ------------------------------------------------------- */
  .cidade { padding-block: 3.5rem 3rem; }
  .cidade__camada { width: 5.25rem; top: -0.5rem; }  /* menores e descidas sutilmente */
  .cidade__inner { padding-inline: 1.25rem; }
  .cidade__title {                          /* título menor */
    margin-top: 0.75rem;                    /* desce um pouco */
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  /* imagem do painel aberto — altura uniforme */
  .cidade__panel-img {
    height: 12rem;
    object-fit: cover;
    object-position: center;
  }
  /* primeira (vogue) — imagem inteira, sem cortar */
  .cidade__item:first-child .cidade__panel-img {
    height: auto;
    object-fit: fill;
  }
  /* máscara escurecendo a imagem um pouco */
  .cidade__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }
  .cidade__panel-head { padding: 1rem 1.25rem; }
  .cidade__panel-head h3 {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;      /* maior */
    letter-spacing: 0.14em;
    font-weight: 700;         /* bold */
    white-space: nowrap;      /* sem quebra de linha */
  }
  .cidade__panel-head p {
    font-size: 0.75rem;       /* maior */
    line-height: 1.5;
    font-weight: 700;         /* bold */
    white-space: normal;      /* mobile: quebra (senão o texto é cortado) */
  }

  /* barra (cabeçalho clicável) — menor no mobile */
  .cidade__bar { padding: 0.9rem 1.25rem; }
  .cidade__bar span {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    font-weight: 700;         /* bold */
  }

  /* -------------------------------------------------------
     MAPA / RJZ CYRELA + Outros projetos
     ------------------------------------------------------- */
  .mapa { padding-block: 3rem 3.5rem; }
  .mapa__inner { padding-inline: 1.25rem; }
  .mapa__intro {
    margin-bottom: 1.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    line-height: 1.8;
  }
  .desktop-only { display: none; }   /* esconde o mapa do desktop no mobile */

  /* modal do form — mantém tamanhos menores no mobile (o aumento é só desktop) */
  .fmodal__card { padding: 2.75rem 1.75rem 2rem; }
  .fmodal__form { gap: 1.5rem; }
  .fmodal .field label { font-size: 0.5rem; }
  .fmodal .field input,
  .fmodal .field select { font-size: 0.8125rem; }
  .fmodal__btn { height: 2.75rem; font-size: 0.6875rem; }
  /* mapa mobile — grande, com scroll lateral + bullets */
  .mapa__map-mobile { display: block; }
  .mapa__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .mapa__scroller::-webkit-scrollbar { display: none; }
  .mapa__scroller img {
    height: 28rem;             /* mapa grande */
    width: auto;
    max-width: none;           /* mais largo que a tela → rola de lado */
    display: block;
  }
  .mapa__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
  }
  .mapa__dots span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(48, 48, 50, 0.28);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .mapa__dots span.is-active {
    width: 1.5rem;
    border-radius: 0.25rem;
    background: #303032;
  }
  .mapa__cta-wrap { margin-top: 1.5rem; }

  /* bloco RJZ Cyrela — logo em cima, texto embaixo (à esquerda) */
  .mapa__about {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 3rem;
  }
  .mapa__logo { width: 8rem; }
  .mapa__about-text {
    font-size: 0.75rem;       /* um pouco maior */
    line-height: 1.85;
  }

  .br-desk { display: none; }   /* quebra que só existe no desktop */

  .mapa__divider {
    margin: 2.5rem 0;
    border-top-color: #9c988f;  /* linha separadora mais forte */
  }
  .mapa__projects-title {
    margin-bottom: 1.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }

  /* projetos — 4 numa linha, imagens um pouco maiores na vertical */
  .mapa__projects { gap: 0.5rem; }
  .mapa__projects img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }
  .mapa__projects figcaption {   /* nomes maiores → tracking menor e quebra de linha */
    margin-top: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.5rem;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #303032;
  }

  /* -------------------------------------------------------
     RODAPÉ
     ------------------------------------------------------- */
  .footer { padding: 1.25rem 1.25rem; }
  .footer__logo {
    width: 2.5rem;       /* menor */
    margin-left: 0;      /* mais para a esquerda */
  }
  .footer__credit {
    font-size: 0.5rem;   /* menor */
    letter-spacing: 0.18em;
    white-space: nowrap; /* sem quebrar linha */
  }
}