/* ==========================================================================
   Garimpo de Viajantes · Landing v2 · 01 Hero
   Fonte: Figma 103:2 "01 · Hero (terreno vivo na frente do nome)", 1440 × 900.
   O frame é uma captura; medidas lidas da imagem no 1440.
   Camadas do hero: fundo (CSS) → nome GARIMPO → terreno (canvas) → texto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo fixo · faixa Midnight translúcida, 88px no 1440
   -------------------------------------------------------------------------- */

/* Barra transparente, flutuando sobre o hero: o fundo do terreno aparece
   por trás. Ao rolar ela continua sem cor; só desfoca o que passa por baixo
   e ganha uma régua fina, para logo e botão seguirem legíveis. */
.v2-topo {
  --v2-topo-h: 88px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: var(--linha) solid transparent;
  transition:
    background-color var(--d-3) var(--ease-out-quart),
    border-color var(--d-3) var(--ease-out-quart),
    backdrop-filter var(--d-3) var(--ease-out-quart),
    -webkit-backdrop-filter var(--d-3) var(--ease-out-quart);
}

.v2-topo[data-preso="sim"] {
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--v2-borda-sutil);
}

/* Sobre uma seção clara (data-sobre, landing.js), o vidro ganha corpo de
   NightSkye: logo azul, links e botão Mint continuam no fundo escuro para o
   qual foram desenhados, e a barra vira uma tampa escura sobre a folha clara. */
.v2-topo[data-sobre="claro"] {
  background-color: color-mix(in srgb, var(--gp-nightskye) 94%, transparent);
  border-bottom-color: transparent;
}

/* âncoras (#agendar etc.) param abaixo da barra fixa */
html { scroll-padding-top: 88px; }

.v2-topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--v2-topo-h);
}

.v2-topo__marca {
  display: inline-flex;
  flex: none;
  border-radius: 4px;
}
.v2-topo__marca img {
  display: block;
  width: auto;
  height: 28px;     /* captura: 125 × 28 */
}

/* Botão contorno da captura: 166 × 48, raio 4, DM Sans 14 */
.v2-topo .v2-topo__cta {
  min-height: 48px;
  padding: 0 18px;
  gap: 14px;
  border-radius: 4px;
  font-size: 14px;
  --btn-borda: color-mix(in srgb, var(--gp-mint) 32%, transparent);
}
.v2-topo .v2-topo__cta:hover { --btn-borda: var(--ink); }

.v2-topo a:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero · ocupa o resto da primeira dobra
   O brilho radial abaixo é replicado no shader do terreno (01-terreno.js,
   BRILHO). Se mudar aqui, mude lá, senão a encosta aparece como recorte.
   -------------------------------------------------------------------------- */

.v2-hero {
  --v2-topo-h: 88px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;   /* a barra agora flutua por cima: o hero ocupa a dobra inteira */
  padding-block: calc(var(--v2-topo-h) + clamp(2rem, 1rem + 3vw, 4.5rem)) clamp(2.25rem, 1rem + 4vw, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 52% at 50% 24%, #001E3A 0%, rgba(0, 30, 58, 0) 100%),
    var(--gp-nightskye);
}

/* Terreno: canvas cobrindo o hero, na frente do nome e atrás do texto */
.v2-hero__terreno {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Nome gigante · Bricolage Grotesque larga (wdth 100), como na captura.
   A largura acompanha o container por unidade de container (cqi).
   -------------------------------------------------------------------------- */

.v2-hero__nome-caixa {
  position: relative;
  z-index: 0;
  container-type: inline-size;
}

.v2-hero__nome {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25.4cqi;
  font-weight: var(--w-medium);
  font-stretch: 100%;
  font-variation-settings: "opsz" 96;
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-align: center;
  white-space: nowrap;
  color: var(--gp-mint);
  background: linear-gradient(180deg, var(--gp-mint) 0%, var(--gp-mint) 42%, #C4E6E4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Base · título à esquerda, apoio e CTA à direita
   -------------------------------------------------------------------------- */

.v2-hero__base {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  align-items: end;
  gap: var(--s-6) var(--s-7);
  margin-top: clamp(7rem, 26svh, 15rem);   /* espaço do terreno; o resto sobra no space-between */
}

.v2-hero__titulo {
  margin: 0;
  max-width: 10.5em;
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.625rem);   /* 36 a 58, captura 58 */
  font-weight: var(--w-regular);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 0 24px var(--gp-nightskye);
}

.v2-hero__apoio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.v2-hero__texto {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
  text-shadow: 0 0 12px var(--gp-nightskye), 0 0 4px var(--gp-nightskye);
}

/* CTA da captura: retângulo 244 × 51, raio 6, DM Sans Regular 15 */
.v2-hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 51px;
  padding: 0 24px;
  border-radius: 6px;
  background: var(--acento);
  color: var(--acento-ink);
  font-size: 15px;
  font-weight: var(--w-regular);
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--d-2) var(--ease-out-quart),
    transform var(--d-2) var(--ease-out-quart);
}
.v2-hero__cta:hover { background: #33B1FF; transform: translateY(-1px); }
.v2-hero__cta:active { background: #66C5FF; transform: none; }
.v2-hero__cta:focus-visible {
  outline: 2px solid var(--gp-mint);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {           /* 834 e abaixo: base empilhada */
  .v2-hero__base {
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(7rem, 24svh, 14rem);
  }
  .v2-hero__apoio { max-width: 34rem; }
}

@media (max-width: 40rem) {           /* celular */
  .v2-topo, .v2-hero { --v2-topo-h: 64px; }
  .v2-topo__marca img { height: 22px; }
  .v2-topo .v2-topo__cta { min-height: 40px; padding: 0 14px; gap: 10px; font-size: 13px; }

  .v2-hero { padding-block: 1.75rem 1.75rem; }
  .v2-hero__base { margin-top: 8.5rem; gap: var(--s-5); }
  .v2-hero__titulo { font-size: 2.375rem; }
  .v2-hero__apoio { gap: 20px; }
  .v2-hero__cta { width: 100%; justify-content: center; }
}

@media (max-width: 22rem) {
  .v2-topo .v2-topo__cta .seta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero__cta:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Menu de âncoras
   Desktop: pílula de vidro no centro da barra (o único vidro da página, por
   isso fica). Uma marca Midnight desliza até o link ativo (scroll-spy em
   01-menu.js) e acompanha o hover. O CTA "Agendar sessão" continua sendo o
   elemento mais forte da barra.
   Celular: botão de dois riscos abre um painel com os mesmos links, grandes.
   -------------------------------------------------------------------------- */

.v2-topo__acoes { display: flex; align-items: center; gap: 10px; }

.v2-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 5px;
  border: var(--linha) solid var(--v2-borda);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gp-nightskye) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.v2-topo__barra { position: relative; }

.v2-menu__lista {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-menu__link {
  display: block;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-2) var(--ease-out-quart);
}
.v2-menu__link:hover,
.v2-menu__link[aria-current="true"] { color: var(--ink); }

/* a marca que desliza; o JS define --x, --w e a opacidade */
.v2-menu__marca {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--w, 0px);
  translate: var(--x, 0px) 0;
  border-radius: var(--r-pill);
  background: var(--gp-midnight);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gp-sky) 22%, transparent);
  opacity: var(--visivel, 0);
  transition:
    translate var(--d-3) var(--ease-out-expo),
    width var(--d-3) var(--ease-out-expo),
    opacity var(--d-2) var(--ease-out-quart);
  pointer-events: none;
}

/* botão do celular: escondido no desktop */
.v2-topo__abrir { display: none; }

@media (max-width: 64rem) {
  .v2-menu__link { padding: 9px 12px; font-size: 13px; }
}

@media (max-width: 56rem) {
  .v2-topo__abrir {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: var(--linha) solid color-mix(in srgb, var(--gp-mint) 32%, transparent);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  /* dois riscos que viram um × */
  .v2-topo__risco,
  .v2-topo__risco::before {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--d-3) var(--ease-out-expo);
  }
  .v2-topo__risco { position: relative; transform: translateY(-3px); }
  .v2-topo__risco::before { content: ""; position: absolute; left: 0; top: 6px; }
  .v2-topo__abrir[aria-expanded="true"] .v2-topo__risco { transform: translateY(0) rotate(45deg); }
  .v2-topo__abrir[aria-expanded="true"] .v2-topo__risco::before { transform: translateY(-6px) rotate(-90deg); }

  /* painel: desce da barra, links grandes em coluna */
  .v2-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--v2-topo-h);
    translate: none;
    padding: var(--s-4) var(--margem) var(--s-6);
    border: 0;
    border-bottom: var(--linha) solid var(--v2-borda);
    border-radius: 0;
    background: color-mix(in srgb, var(--gp-nightskye) 94%, transparent);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity var(--d-3) var(--ease-out-expo),
      transform var(--d-3) var(--ease-out-expo),
      visibility 0s linear var(--d-3);
  }
  /* sobre seção clara o painel fica opaco: o vidro da barra impede o
     desfoque do painel, e o Vanilla vazaria pelos 6% */
  .v2-topo[data-sobre="claro"] .v2-menu { background: var(--gp-nightskye); }
  .v2-topo[data-menu="aberto"] .v2-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .v2-menu__lista { flex-direction: column; gap: 0; }
  .v2-menu__lista li { border-bottom: var(--linha) solid var(--regua); }
  .v2-menu__link {
    padding: 16px 0;
    border-radius: 0;
    font-size: 20px;
    color: var(--ink);
  }
  .v2-menu__link[aria-current="true"] { color: var(--gp-sky); }
  .v2-menu__marca { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-menu__marca, .v2-menu, .v2-topo__risco, .v2-topo__risco::before { transition: none; }
}

/* celular: o CTA não quebra ao dividir a barra com o botão do menu, e com o
   menu aberto a barra ganha fundo para o nome gigante do hero não vazar */
@media (max-width: 56rem) {
  .v2-topo .v2-topo__cta { white-space: nowrap; }
  .v2-topo[data-menu="aberto"] {
    background: color-mix(in srgb, var(--gp-nightskye) 94%, transparent);
    border-bottom-color: var(--v2-borda-sutil);
  }
}
@media (max-width: 22.5rem) {
  .v2-topo .v2-topo__cta { padding: 0 10px; font-size: 12px; }
}