/* =====================================================================
   Ajustes de celular.

   Carregado DEPOIS de hero-original.css, por isso os `!important`:
   precisam vencer as regras verbatim do modelo e os estilos inline do
   markup. Aqui ficam duas coisas:

     1. o topo da home, redistribuído para caber bem numa tela estreita;
     2. o menu de navegação, que o modelo simplesmente escondia.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Topo da home
   --------------------------------------------------------------------- */

@media (max-width: 760px) {

  /* A altura do topo é a SOMA das suas duas partes, não uma fração da
     tela: em cima o slogan, embaixo a faixa reservada à foto.

     Uma fração da tela não servia. A foto é desenhada pela LARGURA
     (224% da arte ⇒ altura ≈ 98vw), e a fração vinha da ALTURA — num
     aparelho estreito e comprido a foto passava a medida e subia até
     debaixo do texto. Agora quem manda é o conteúdo: o slogan ocupa o
     que precisar, a foto tem os 98vw dela reservados no padding de
     baixo, e o bloco cresce conforme o slogan ganha ou perde linhas.

     `svh` desconta as barras do navegador; `vh` fica de reserva para
     quem não suporta. Os dois só valem de piso, para o topo não
     encolher demais com um slogan curto. */
  .hero-sec {
    height: auto !important;
    min-height: 70vh !important;
    min-height: 70svh !important;
    max-height: none !important;
    padding-top: 56px !important;
    padding-bottom: calc(98vw + 18px) !important;
  }

  /* --- slogan: no topo, e agora dentro do fluxo, para a altura dele
         entrar na conta do bloco. `relative` em vez de `static` só para
         manter o z-index, que sem posição seria ignorado e deixaria a
         foto por cima do texto. --- */
  .hero-slogan-wrap {
    position: relative !important;
    inset: auto !important;
    align-items: flex-start !important;
  }
  .hero-slogan { padding: 46px 20px 0 !important; }
  .hero-slogan-txt {
    font-size: clamp(23px, 6.6vw, 30px) !important;
    line-height: 1.2 !important;
  }

  /* --- prédio: ancorado na base --- */
  /* A arte é 1600×700, mas o edifício ocupa só a faixa x≈200–700 (31% da
     largura, centrado em ~24%) — o resto é vazio, reservado ao slogan no
     desktop.

     Dimensionar pela ALTURA do bloco (como faz o desktop) obrigava a
     recalibrar o recorte toda vez que a altura mudasse. Aqui a escala e o
     recorte são expressos em relação à LARGURA, então o edifício sai
     sempre com ~70% da largura da tela e centrado, seja qual for a
     altura do bloco:

       largura da arte = 224% da tela  →  edifício = 0,31 × 224% ≈ 70%

     A posição horizontal desloca o prédio: como a arte é 2,24× a tela,
     cada ponto percentual vale 1,24% da largura. Os 8% de agora põem o
     prédio ~5,6% da tela à esquerda do centro.                          */
  /* A caixa vai do topo à base do bloco: a foto se desenha sozinha pela
     largura e fica colada embaixo, então a caixa só precisa ser alta o
     bastante para nunca recortá-la. */
  .hero-building {
    inset: 0 0 0 0 !important;
    height: auto !important;
    background-size: 224% auto !important;
    background-position: 8% bottom !important;
  }

  /* O chão preto cobria 32% da altura e escondia as fitas.
     Aqui fica só como base, abaixo da imagem. */
  .hero-chao { height: 9% !important; }

  /* O halo acompanha o prédio em vez de ficar no centro da tela. */
  .hero-nucleo {
    width: 280px !important;
    height: 280px !important;
    top: 72% !important;
  }
}

/* Telas baixas: o slogan encolhe e o prédio cede um pouco de largura,
   senão a arte não caberia inteira no bloco. */
@media (max-width: 760px) and (max-height: 680px) {
  /* A foto encolhe logo abaixo; a reserva embaixo encolhe junto. */
  .hero-sec { padding-bottom: calc(84vw + 14px) !important; }
  .hero-slogan { padding-top: 30px !important; }
  .hero-slogan-txt { font-size: clamp(19px, 5.4vw, 23px) !important; }
  .hero-building {
    background-size: 192% auto !important;   /* edifício ≈ 60% da tela */
    background-position: 2% bottom !important;
  }
  .hero-nucleo { width: 210px !important; height: 210px !important; }
}

/* Aparelhos bem estreitos. */
@media (max-width: 380px) {
  .hero-slogan { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-slogan-txt { font-size: 22px !important; }
}

/* ---------------------------------------------------------------------
   Banners logo abaixo do topo

   No modelo eles ocupam a largura toda menos 22px de cada lado. Aqui
   ficam menores: a largura passa a ser uma fração da tela, e como os
   banners mantêm a proporção 2000/1258, a altura acompanha sozinha.

   A fração já foi 66,7% (25% menores que o modelo) e ficou apertada
   demais; 73,4% é isso mais 10%, o que dá cartões ~17% menores que o
   original.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {
  .banners-grid {
    width: 73.4% !important;
    max-width: 430px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 26px !important;   /* mais respiro entre os cartões que os 18px do modelo */
  }
}

/* ---------------------------------------------------------------------
   Seção de promoções

   Os vídeos aparecem inteiros, e num celular um vídeo 16:9 ocupa pouca
   altura. Manter a seção com a altura configurada para o desktop
   deixaria uma faixa preta enorme embaixo, então quando a roda só tem
   vídeo a seção passa a ter a altura do próprio vídeo.

   A classe `so-videos` é posta pelo PHP; havendo qualquer imagem, a
   altura configurada é respeitada.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {
  /* Sem respiro no celular: a área do vídeo vai de ponta a ponta. */
  .secao-promocoes { padding: 0 !important; }
  /* Altura da área do vídeo; o respiro entra por fora (content-box).
     58vw dá a altura de um vídeo 16:9 ocupando a largura da tela. */
  .secao-promocoes.so-videos { height: 58vw !important; }

  /* Sendo tudo Short (vertical), a área precisa ser alta em vez de larga.
     A altura de um 9:16 na largura da tela seria 178vw — alto demais num
     celular —, então fica limitada a 66% da tela: o vídeo estreita um
     pouco e ainda aparece inteiro. */
  .secao-promocoes.so-videos.so-vertical {
    height: min(178vw, 66vh) !important;
    height: min(178vw, 66svh) !important;
  }

  /* Player em 9:16. Só aqui: no desktop uma tira vertical ficaria com um
     quarto da largura da seção, então lá o player segue em 16:9 e quem
     centraliza o vídeo dentro dele é o próprio YouTube. */
  .promo-youtube.vertical iframe { aspect-ratio: 9 / 16; }
}

@supports (height: 1cqh) {
  @media (max-width: 760px) {
    .promo-youtube.vertical iframe {
      width:  min(100cqw, calc(100cqh * 9 / 16));
      height: min(100cqh, calc(100cqw * 16 / 9));
    }

    /* A capa ocupa exatamente a área do player. Sem isso a miniatura, que
       é 16:9, transbordaria dos lados do Short enquanto ele carrega. */
    .promo-youtube.vertical .promo-capa {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width:  min(100cqw, calc(100cqh * 9 / 16));
      height: min(100cqh, calc(100cqw * 16 / 9));
      object-fit: cover;   /* preenche a caixa vertical cortando as laterais */
    }
  }
}

/* ---------------------------------------------------------------------
   Fly-through (a assinatura que fecha a home)

   No desktop o corredor 3D ocupa a tela toda, o que faz sentido com as
   palavras grandes atravessando. No celular as palavras são pequenas e
   a assinatura ocupa pouco espaço, então a tela inteira deixava vazios
   largos acima e abaixo do texto.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {
  [data-fly],
  [data-fly-palco] {
    height: 62vh !important;
    height: 62svh !important;
    min-height: 400px !important;   /* piso para a assinatura não apertar */
  }
}

/* ---------------------------------------------------------------------
   Detalhe de modalidade / serviço como popup

   No desktop o painel abre embaixo da linha de cartões, o que funciona
   porque há espaço lateral. Num celular ele empurrava o resto da página
   para longe e obrigava a rolar de volta. Aqui ele toma a tela inteira.
   --------------------------------------------------------------------- */

.detalhe-fundo {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(4, 4, 6, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.detalhe-fundo[hidden] { display: none; }

@media (max-width: 760px) {

  body.detalhe-aberto { overflow: hidden; }

  .detalhe {
    position: fixed; inset: 0;
    z-index: 90; margin: 0 !important;
    max-height: none; overflow: hidden;
    border: 0; border-radius: 0;
    animation: subirFolha .32s cubic-bezier(.22, 1, .36, 1);
  }

  /* Quem rola é o miolo, para o X não sumir junto com o conteúdo.
     `align-content: start` impede a grade de esticar as linhas para
     preencher a altura, o que abria um vão preto entre a foto e o texto
     quando o conteúdo é menor que a tela. */
  .detalhe .grade {
    height: 100%; max-height: none; overflow-y: auto;
    align-content: start;
  }

  /* A foto aparece inteira: a altura vem da própria imagem, em vez de uma
     caixa fixa que a recortaria. As fotos de modalidade são quadradas, e
     numa faixa de altura fixa sobrava corte em cima e embaixo. Assim
     também serve para qualquer proporção que venha a ser enviada. */
  .detalhe .foto { min-height: 0; height: auto; }
  .detalhe .foto img {
    position: relative; inset: auto;
    width: 100%; height: auto;
    object-fit: contain;
  }
  /* Sem a caixa fixa, o degradê lateral do desktop não faz sentido:
     fica só o esmaecido na base, que costura a foto com o texto. */
  .detalhe .foto::after {
    background: linear-gradient(180deg, rgba(14,14,16,0) 72%, rgba(14,14,16,.92) 100%);
  }

  .detalhe .texto { padding: 28px 22px; }

  /* `env(...)` afasta o conteúdo do entalhe e da barra de gestos. */
  .detalhe .fechar {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
  }
  .detalhe .texto { padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes subirFolha {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   2. Menu de navegação no celular

   O layout original escondia a nav por completo abaixo de 760px, o que
   deixava o site sem como chegar em Modalidades, Horários e Serviços
   pelo telefone. Aqui ela volta atrás de um botão ☰.

   O painel (`partials/menu-mobile.php`) é irmão do <header>, não filho:
   o cabeçalho tem `backdrop-filter`, e isso o torna bloco de contenção,
   então um filho `position: fixed` se mediria pela faixa do topo em vez
   da tela. Era o que acontecia antes — o painel nascia com 120px de
   altura, o fundo pintava só uma tira e os links vazavam por cima da
   página.
   --------------------------------------------------------------------- */

.abrir-menu { display: none; }

/* Fora do celular o painel simplesmente não existe. */
.menu-mobile { display: none; }

@media (max-width: 760px) {

  /* No celular fica só o ☰ à direita: o botão de contato do cabeçalho
     sai, já que ele existe dentro do painel. */
  .cabecalho > .btn-topo { display: none !important; }

  .abrir-menu {
    display: inline-flex !important;
    order: 3; flex: none;
    width: 44px; height: 44px; padding: 0;
    align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: #B48F3B; font: inherit; font-size: 24px; line-height: 1;
    cursor: pointer;
    transition: opacity .3s;
  }
  .abrir-menu:active { opacity: .55; }

  /* ---- o painel ---------------------------------------------------- */

  .menu-mobile {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 120;
    /* Respiro nas extremidades: 20px a mais do que os 20px que o painel
       já tinha, para o conteúdo descolar de verdade das bordas. */
    padding: calc(40px + env(safe-area-inset-top, 0px)) 40px
             calc(40px + env(safe-area-inset-bottom, 0px));
    background: #0a0a0c;
    /* Brilho dourado discreto no alto, para o painel não ficar um
       retângulo preto chapado. */
    background-image: radial-gradient(120% 62% at 50% -8%, rgba(180,143,59,.20), transparent 68%);
    color: #f4f4ef;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  body.menu-aberto .menu-mobile {
    opacity: 1; visibility: visible; transition-delay: 0s;
  }

  /* Enquanto o painel está aberto o fundo não rola. O JS ainda fixa o
     body para o celular não perder o ponto da página. */
  body.menu-aberto { overflow: hidden; }

  /* ---- topo: logo + fechar ----------------------------------------- */

  /* Mesma altura e mesmos recuos do cabeçalho, para o × cair
     exatamente onde estava o ☰ e nada dar salto ao abrir. */
  .menu-mobile .mm-topo {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    height: 40px;
    /* Só o × recua: a área de toque dele é maior que o desenho, e sem
       isso ele pareceria mais afastado da borda que a logo. */
    margin-right: -6px;
  }
  .menu-mobile .mm-logo { height: 36px; width: auto; display: block; }

  .fechar-menu {
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: #B48F3B; font: inherit; font-size: 30px; line-height: 1;
    cursor: pointer;
    transition: opacity .3s;
  }
  .fechar-menu:active { opacity: .55; }

  /* ---- links -------------------------------------------------------- */

  .menu-mobile .mm-links {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 0;
  }
  .menu-mobile .mm-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 19px 2px;
    border-bottom: 1px solid rgba(244, 244, 239, .09);
    color: #f4f4ef; text-decoration: none;
    font-size: clamp(19px, 5.6vw, 23px); font-weight: 300;
    letter-spacing: .01em; line-height: 1.15;
    /* Entram escalonados, um logo depois do outro. */
    opacity: 0; transform: translateY(14px);
    transition: opacity .34s ease, transform .34s cubic-bezier(.22, 1, .36, 1), color .25s;
  }
  .menu-mobile .mm-links a:last-child { border-bottom: 0; }

  body.menu-aberto .menu-mobile .mm-links a {
    opacity: 1; transform: translateY(0);
    transition-delay: calc(.10s + var(--i, 0) * .055s);
  }

  .menu-mobile .mm-links a .mm-seta {
    flex: none; color: #B48F3B; opacity: 0;
    transform: translateX(-6px); transition: opacity .25s, transform .25s;
  }
  .menu-mobile .mm-links a:active { color: #B48F3B; }

  /* A página em que se está fica dourada e com a seta à mostra. */
  .menu-mobile .mm-links a.ativo { color: #B48F3B; font-weight: 500; }
  .menu-mobile .mm-links a.ativo .mm-seta { opacity: 1; transform: translateX(0); }

  /* ---- rodapé do painel: contato ------------------------------------ */

  .menu-mobile .mm-rodape {
    flex: none; padding-top: 20px;
    border-top: 1px solid rgba(180, 143, 59, .22);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .34s ease .32s, transform .34s ease .32s;
  }
  body.menu-aberto .menu-mobile .mm-rodape { opacity: 1; transform: translateY(0); }

  .menu-mobile .mm-zap {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 15px 24px;
    background: #B48F3B; color: #0c0c0d; text-decoration: none;
    font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .04em;
    border-radius: 100px;
  }
  .menu-mobile .mm-zap:active { background: #9d7c33; }

  .menu-mobile .mm-redes { display: flex; gap: 10px; }
  .menu-mobile .mm-redes a {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(180, 143, 59, .34);
    color: #B48F3B; text-decoration: none;
  }
  .menu-mobile .mm-redes a:active { background: rgba(180, 143, 59, .16); }

  /* Telas baixas (iPhone SE deitado, etc.): tudo mais compacto para o
     rodapé de contato não ser empurrado para fora. */
  @media (max-height: 620px) {
    .menu-mobile .mm-links a { padding: 13px 2px; font-size: 18px; }
    .menu-mobile .mm-rodape { gap: 10px; padding-top: 14px; }
    .menu-mobile .mm-redes { display: none; }
  }
}

/* O painel devolve o foco para dentro dele ao abrir. Quando o navegador
   decide mostrar o anel (navegação por teclado), que ele seja dourado em
   vez da caixa branca padrão. */
.menu-mobile a:focus-visible,
.menu-mobile button:focus-visible,
.abrir-menu:focus-visible {
  outline: 2px solid #B48F3B;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Quem prefere menos movimento recebe o painel sem deslize nem
   escalonamento — ele só aparece. */
@media (prefers-reduced-motion: reduce) {
  .menu-mobile,
  .menu-mobile .mm-links a,
  .menu-mobile .mm-rodape { transition-duration: .01ms !important; }
  .menu-mobile .mm-links a,
  .menu-mobile .mm-rodape { transform: none !important; }
  body.menu-aberto .menu-mobile .mm-links a { transition-delay: 0s !important; }
}

/* ---------------------------------------------------------------------
   Números da página Sobre em tela estreita

   O número e a unidade ficam lado a lado numa linha que não quebra. Com
   "+20 anos" isso nunca incomodou; com uma palavra longa — "SEMANA
   FREE" — a linha fica mais larga que a coluna, empurra a grade e o site
   ganha rolagem lateral. Deixar quebrar resolve sem mexer no desktop.
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  .sb-numeros > div > div { flex-wrap: wrap; }
  .sb-numeros, .sb-numeros > div { min-width: 0; }
}

/* ---------------------------------------------------------------------
   3. Barra de baixo do rodapé

   No desktop ela é uma linha só, com o botão de voltar ao topo montado
   no fio. No celular vira coluna, e precisa de mais ar: o botão ocupa a
   altura da borda, então sem respiro em cima ele encosta no botão do
   "treino experimental" logo acima.

   Estas regras moram aqui, e não em `site.css`, porque
   `hero-original.css` carrega depois dele e fixa `padding:20px 24px` na
   barra — de lá, nenhuma delas venceria.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {
  .footer-bottom {
    flex-direction: column !important;
    text-align: center;
    gap: 18px !important;
    padding: 54px 24px 44px !important;
  }
  .footer-bottom > div { justify-content: center !important; }

  /* Sozinha na linha, a assinatura pode crescer: no desktop ela divide
     a barra com o copyright e precisa ser discreta. Cresce inteira — o
     logo, o texto ao lado e o vão entre eles — para a proporção do
     conjunto não mudar. */
  .rodape-arke { gap: 11px !important; }
  .rodape-arke .marca img { height: 28px !important; }
  .rodape-arke .by { font-size: 14.5px !important; }
  .rodape-arke .marca-texto { font-size: 24px !important; }
}