:root{
  /* ===== AJUSTES GERAIS ===== */
  --pad: 18px;
  --gap: 12px;

  /* Limite global (evita “gigante”) */
  --btn-max: 290px; /* era 260px */

  /* ===== AJUSTES DE TAMANHO (1 por botão/imagem) ===== */
  --btn-w: clamp(165px, 54vw, var(--btn-max)); /* era clamp(150px, 50vw, ...) */

  /* ===== topo/rodapé ===== */
  /* logoNome MAIOR */
  --logo-nome-w: clamp(195px, 62vw, 370px); /* era clamp(180px, 58vw, 340px) */

  /* Whats */
  --whats-w: clamp(135px, 44vw, 260px); /* era clamp(120px, 40vw, 230px) */

  /* ===== AJUSTES DE POSIÇÃO (Y) ===== */
  --btn-inicio-y: 0px;
  --btn-cursos-y: 0px;
  --btn-quem-somos-y: 0px;
  --btn-servicos-y: 0px;

  /* ajustes finos (se precisar) */
  --logo-nome-y: 0px;
  --whats-y: 0px;

  /* ajuste fino: reduz um pouco só esses 2 (1 = normal) */
  --btn-inicio-scale: 1;   /* era 0.96 */
  --btn-servicos-scale: 1; /* era 0.96 */

  /* NOVO: altura padrão para as imagens dos 4 botões (deixa visual igual) */
  --btn-h: 62px; /* era 56px */

  /* ===== logo Hydra (abaixo do Whats) ===== */
  --logo-hydra-w: clamp(360px, 102vw, 820px);
  --logo-hydra-y: 0px;
}

html, body{
  height: 100%;
  margin: 0;
  background: #000;
  overflow-x: hidden; /* iOS/Safari: evita estouro lateral */
}

/* ADICIONADO: background da seleção */
.selecao__bg{
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  height: 100svh;
  transform: translateX(-50%);
  object-fit: cover;          /* preenche a largura; recorte tende a ser vertical */
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;       /* não bloqueia clique nos botões */
}

.selecao{
  min-height: 100dvh;          /* fallback bom no Android */
  min-height: 100svh;          /* melhor que 100vh em mobile (Safari/iOS) */
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* antes: flex-start (topo) */
  gap: var(--gap);
  background: #000;
  box-sizing: border-box;
  padding-block: max(var(--pad), 12px); /* evita “colar” no topo/baixo */
  position: relative;
  z-index: 1;                 /* conteúdo acima do fundo */
}

/* cada item agora é um link/botão */
.selecao__item{
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  width: fit-content;     /* garante que o link “encolhe” ao conteúdo */
  margin-inline: auto;    /* centraliza o item no eixo horizontal */
}

/* a imagem continua controlando a área visual */
.selecao__img{
  display: block;
  height: var(--btn-h);      /* NOVO: mesma altura em todos */
  width: 100%;
  object-fit: contain;       /* NOVO: não distorce; encaixa na caixa */
  object-position: center;
  transition: transform 160ms ease, filter 160ms ease;
  transform-origin: center;
  margin-inline: auto;    /* centraliza a imagem dentro do link */
}

/* tamanhos + offsets por botão (aplicados no <a>) */
.selecao__btn-inicio{
  width: var(--btn-w);
  transform: translateY(var(--btn-inicio-y)); /* removido scale */
  transform-origin: center;
}

.selecao__btn-cursos{
  width: var(--btn-w);
  transform: translateY(var(--btn-cursos-y));
}

.selecao__btn-quem-somos{
  width: var(--btn-w);
  transform: translateY(var(--btn-quem-somos-y));
}

.selecao__btn-servicos{
  width: var(--btn-w);
  transform: translateY(var(--btn-servicos-y)); /* removido scale */
  transform-origin: center;
}

/* efeito (hover no desktop, active no mobile) */
@media (hover: hover) and (pointer: fine){
  .selecao__item:hover .selecao__img{
    transform: scale(1.06);
    filter: brightness(1.05);
  }
}

.selecao__item:active .selecao__img{
  transform: scale(0.98);
}

.selecao__item:focus-visible .selecao__img{
  outline: 2px solid #fff;
  outline-offset: 6px;
}

/* ===== topo (logoNome) ===== */
.mobile-home__logo-nome{
  display: block;
  width: var(--logo-nome-w);
  height: auto;
  margin-inline: auto;
  transform: translateY(var(--logo-nome-y));
}

/* NOVO: frase acima do Whats */
.selecao__cta{
  position: relative;
  z-index: 2;

  /* ALTERADO: ocupar "o tamanho do botão do Whats" */
  width: var(--whats-w);
  max-width: 100%;
  margin: 8px auto 6px;

  padding: 0;
  text-align: center;
  color: rgba(210, 218, 230, 0.92); /* prateado (menos branco) */
  white-space: nowrap;              /* 1 linha */
  overflow: hidden;                 /* garante que não quebre layout */
  text-overflow: ellipsis;          /* se não couber, corta com ... */
  text-wrap: initial;               /* neutraliza o balance anterior */

  /* ALTERADO: menor */
  font: 500 clamp(12px, 3.6vw, 15px)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  letter-spacing: 0.1px;
}

/* NOVO: texto entre logoNome e o primeiro botão */
.selecao__subtitle{
  position: relative;  /* ADICIONADO */
  z-index: 2;          /* ADICIONADO: garante acima do fundo */
  margin: 2px 0 4px;
  padding: 0;
  text-align: center;
  color: rgba(210, 218, 230, 0.92); /* mesmo prateado */
  font: 600 clamp(14px, 4.2vw, 18px)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ===== rodapé (Whats) ===== */
.mobile-home__whats{
  display: inline-block;
  width: fit-content;
  margin-inline: auto;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(var(--whats-y));
  text-decoration: none;
}
.mobile-home__whats-img{
  display: block;
  width: var(--whats-w);     /* mesma “pegada” visual dos botões */
  height: auto;
  margin-inline: auto;
  max-width: 100%;
  max-inline-size: 100%;
  transition: transform 160ms ease, filter 160ms ease;
  transform-origin: center;
}

/* reaproveita o mesmo comportamento de efeito */
@media (hover: hover) and (pointer: fine){
  .mobile-home__whats:hover .mobile-home__whats-img{
    transform: scale(1.06);
    filter: brightness(1.05);
  }
}
.mobile-home__whats:active .mobile-home__whats-img{
  transform: scale(0.98);
}
.mobile-home__whats:focus-visible .mobile-home__whats-img{
  outline: 2px solid #fff;
  outline-offset: 6px;
}

/* logo Hydra (abaixo do Whats) */
.selecao__logo-hydra{
  display: block;
  width: var(--logo-hydra-w);
  height: auto;
  margin-inline: auto;
  max-width: 100%;
  max-inline-size: 100%;
  transform: translateY(var(--logo-hydra-y));
  pointer-events: none;
  margin-top: -40px; /* garante que não exista “gap” extra entre Whats e Hydra */
}