/* ==========================================================================
   Garimpo de Viajantes · Landing v2 · Variante hero2 · "Palavra monumental"
   Fonte: Figma 9giyuHgNXk1R0G4EdNCDsE, página 06 · Rascunho.
   Desktop 150:27 (1440 × 900), mobile 150:372 (390 × 844), notas 150:580.
   A marca vira paisagem: a metade de baixo é uma foto lifestyle desfocada
   com "garimpo" em sans light sangrando pela base; a decisão fica em cima,
   compacta à esquerda, com um CTA só em azul.
   Pele da marca sobre o wireframe cinza: NightSkye no fundo, Garimpo só no
   CTA, Sky e Lime só nos números de prova e no "não", Mint na tinta.
   Ajustes do cliente já aplicados (vindos da hero5, 01/10/2026): sem
   sobretítulo, sem VSL, método como nota pequena sem cartão.
   O topo continua vindo de assets/v2/css/01-hero.css; aqui só se ajusta
   o que o wireframe pede (CTA em pílula, menu sem a cápsula de vidro).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo · nota 1: "Agendar sessão" em pílula com contorno
   -------------------------------------------------------------------------- */

.v2-topo .v2-topo__cta { border-radius: var(--r-pill); padding: 0 20px; }

@media (min-width: 56.0625rem) {
  /* menu em texto corrido, como no 150:27; a marca Midnight continua deslizando */
  .v2-menu {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .v2-menu__link { font-size: 15px; font-weight: var(--w-regular); }
}

@media (max-width: 56rem) {
  .v2-topo__abrir { border-radius: var(--r-pill); }
  .v2-topo .v2-topo__cta { padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   Hero · a dobra inteira. O padding-top reserva a altura do topo fixo,
   para nada ficar escondido sob a barra; a faixa ocupa o que sobra.
   -------------------------------------------------------------------------- */

.h2 {
  --h2-topo: 88px;
  --h2-borda: clamp(12px, 1.7vw, 24px);   /* respiro da faixa até a borda da tela, 24 no 1440 */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-block: calc(var(--h2-topo) + clamp(1.25rem, 2.2vw, 2rem)) var(--h2-borda);
  background:
    radial-gradient(ellipse 50% 40% at 22% 18%, #001A33 0%, transparent 100%),
    var(--gp-nightskye);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Bloco de decisão · título, apoio e CTA à esquerda; nota do método à direita
   -------------------------------------------------------------------------- */

.h2__palco {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6) var(--s-7);
}

.h2__acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

/* Nota 3 · promessa em 2 linhas de largura parecida (pedido do cliente,
   01/10/2026: "mesmo que aumente uma palavra"):
   Marketing medido em lucro, / não em volume de lead. */
.h2__titulo {
  margin: 0 0 0 -0.04em;   /* compensa o respiro lateral do "M" */
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1.1rem + 3.1vw, 3.625rem);
  font-weight: var(--w-medium);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* cada trecho é uma máscara; o verso sobe de dentro dela (01-hero2.js) */
.h2__mascara {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}
.h2__verso { display: inline-block; }

/* as quebras: 2 linhas no desktop, bloco de 4 no celular */
.h2__quebra-cel { display: none; }

/* Destaque da casa: itálico Light na cor de destaque (Sky, 11,7:1) */
.h2__nao em {
  padding-right: 0.06em;    /* a máscara não corta a perna do itálico */
  font-style: italic;
  font-weight: var(--w-light);
  letter-spacing: -0.02em;
  color: var(--v2-destaque);
}

.h2__apoio {
  max-width: 34em;
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);   /* 18 no 1440 */
  line-height: 1.45;
  color: var(--ink-2);
}

/* Nota 4 · CTA do 150:45: pílula Garimpo, círculo escuro com seta */
.h2__cta-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding-top: 6px;
}
.v2-cta.h2__cta {
  gap: 14px;
  padding: 6px 6px 6px 24px;
  font-size: 16px;
}
.h2__cta-circulo {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gp-nightskye);
  color: var(--gp-mint);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--d-2) var(--ease-out-quart);
}
.h2__cta:hover .h2__cta-circulo { transform: translateX(3px); }
.h2__cta:focus-visible { outline: 2px solid var(--gp-mint); outline-offset: 3px; }

/* "Sessão gratuita" é informação, não ação: sem cara de botão */
.h2__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-medium);
  line-height: 1.3;
}
.h2__selo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gp-lime);
}

/* --------------------------------------------------------------------------
   Nota 5 · o método como nota de margem: sem fundo, sem borda, pequeno
   Rótulo em ink-3 (6,0:1), frentes em Sky (11,7:1), itens em ink-2 (9,8:1),
   assinatura em itálico Light. Só no desktop, como pede a nota mobile.
   -------------------------------------------------------------------------- */

.h2__nota {
  flex: 0 1 19rem;
  min-width: 0;
  padding-bottom: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.h2__nota-rotulo {
  margin: 0;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.h2__nota-assinatura {
  margin: 6px 0 0;
  padding-bottom: 12px;
  border-bottom: var(--linha) solid var(--regua);
  font-size: 14px;
  font-style: italic;
  font-weight: var(--w-light);
  line-height: 1.35;
}

.h2__nota-frentes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 12px 0 0;
}
.h2__nota-frente dt {
  margin-bottom: 6px;
  color: var(--gp-sky);
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.h2__nota-frente dd { margin: 0; }

/* --------------------------------------------------------------------------
   Nota 6 · a faixa da palavra monumental
   Ocupa o que sobra da dobra. É contêiner de largura: a palavra cresce com
   a faixa (cqi) e o teto em svh evita que ela engula a faixa em telas
   baixas e largas. (cqh não serve: com a altura vinda do flex, o Chrome
   resolve cqh como 0.)
   -------------------------------------------------------------------------- */

.h2__faixa {
  --h2-g: min(22.6cqi, 38svh);  /* GARIMPO em caixa alta (teste pedido em 01/10/2026): mais largo, corpo menor */
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: clamp(18rem, 44svh, 30rem);
  /* mesma largura do texto de cima e do menu: a coluna do .v2-container
     (pedido do cliente, 01/10/2026) */
  width: min(var(--v2-largura), 100% - 2 * var(--margem));
  margin: clamp(1.75rem, 3vw, 2rem) auto 0;
  border-radius: var(--r-3);
  overflow: clip;               /* a palavra sangra, a página não rola de lado */
  container-type: inline-size;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, #002A4D 0%, rgba(0, 30, 58, 0) 70%), var(--v2-cartao);
  border: var(--linha) solid var(--v2-borda-sutil);
}

/* Foto lifestyle (manual 7.2): grupo em viagem, luz natural, já desfocada
   no arquivo. Sobra 10% em cima e embaixo para o parallax. */
.h2__foto {
  position: absolute;
  inset: -10% 0;
  z-index: -1;
}
/* No lugar da foto, o terreno de pontos da página (pedido do cliente,
   01/10/2026): some no topo e ganha corpo embaixo, atrás da palavra. */
.h2__malha {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 8%, #000 55%);
}

/* --------------------------------------------------------------------------
   Nota 8 · régua de prova em vidro discreto sobre a foto
   Números em Bricolage Condensed; 12% → 20% em Lime, os outros em Sky.
   -------------------------------------------------------------------------- */

.h2__regua {
  position: absolute;
  top: clamp(14px, 1.7cqi, 24px);
  left: clamp(14px, 1.7cqi, 24px);
  display: flex;
  margin: 0;
  padding: 0;
  border: var(--linha) solid var(--v2-borda);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--gp-nightskye) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  list-style: none;
}

.h2__prova {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 20px 13px;
}
.h2__prova + .h2__prova { border-left: var(--linha) solid var(--v2-borda); }

.h2__num {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 0.8vw, 1.75rem);
  font-weight: var(--w-semibold);
  font-stretch: 75%;
  font-variation-settings: "opsz" 48;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--gp-sky);
}
.h2__num--lime { color: var(--gp-lime); }

.h2__legenda {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   A palavra · DM Sans Light, Mint, sangrando pela base da faixa
   -------------------------------------------------------------------------- */

.h2__marca {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.h2__palavra {
  display: block;
  margin-left: -0.05em;           /* o "g" encosta na borda, como o x −18 do Figma */
  margin-bottom: -0.07em;         /* só a base das maiúsculas encosta na borda (pedido: subir um pouco) */
  font-family: var(--font-sans);
  font-size: var(--h2-g);
  font-weight: var(--w-light);
  font-variation-settings: "opsz" 40;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gp-mint);
}
.h2__letra { display: inline-block; }

/* "de viajantes" pequeno no fim da palavra, como o "sonido studio" */
.h2__complemento {
  position: absolute;
  right: clamp(14px, 1.7cqi, 24px);
  bottom: calc(var(--h2-g) * 0.11);
  font-size: clamp(0.875rem, 2.15cqi, 1.875rem);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--gp-mint);
}

/* --------------------------------------------------------------------------
   Tablet · sem espaço para a nota ao lado, ela sai (o método tem seção própria)
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .h2__nota { display: none; }
}

/* --------------------------------------------------------------------------
   Celular · segue o 150:372
   Ordem: título em 4 linhas, apoio, CTA largo, selo, faixa até o fim da dobra.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .h2 { --h2-topo: 64px; padding-top: calc(var(--h2-topo) + 20px); }

  .h2__acao { width: 100%; gap: 16px; }

  /* bloco de 3 linhas de largura parecida:
     Marketing medido / em lucro, não em / volume de lead. */
  .h2__titulo { font-size: clamp(2rem, 10.8vw, 2.75rem); line-height: 1.02; }
  .h2__quebra-cel { display: inline; }
  .h2__quebra-desk { display: none; }

  .h2__apoio { font-size: 16px; line-height: 1.4; }

  .h2__cta-linha { width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 0; }
  .v2-cta.h2__cta {
    width: 100%;
    justify-content: space-between;
    padding-left: 22px;
    white-space: nowrap;
  }
  .h2__selo { font-size: 13px; }

  .h2__faixa {
    --h2-g: min(25cqi, 32svh);   /* caixa alta no celular */
    min-height: 19rem;
    margin-top: 24px;
    border-radius: var(--r-2);
  }

  /* régua: 3 colunas compactas, sem o "ecoturismo" */
  .h2__prova { padding: 8px 12px 9px; gap: 3px; }
  .h2__num { font-size: 1.25rem; }
  .h2__legenda { font-size: 11px; }
  .h2__legenda-extra { display: none; }

  /* a palavra sangra pela direita e pela base; o complemento sobe para cima dela */
  .h2__palavra { margin-left: -0.04em; }
  .h2__complemento { bottom: calc(var(--h2-g) * 0.92); font-size: 15px; }
}

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