/*
 * 02-hero.css
 * Seção: Hero (headline, video, CTA, marquee de credenciais)
 *
 * Fonte da verdade: docs/recon-conteudo-estrutura.md (seção 1),
 * docs/recon-visual-tokens.md (Hero) e docs/recon-animacoes-responsividade.md (Hero).
 * Todos os valores usam var(--token) de styles/tokens.css — ver docs/CONVENCOES.md.
 */

.hero {
  position: relative;
  overflow: hidden;
  /* Cor sampleada do próprio JPG de fundo (assets/hero/topo-formatura.jpg,
     pixel da faixa verde sólida à esquerda: #19372D) — usada como
     background-color de fallback (aparece 1 frame antes da imagem carregar,
     ou se ela falhar) para não haver flash de cor errada. */
  background-color: #19372D;
  min-height: clamp(480px, 46vw, 680px);
  display: flex;
  flex-direction: column;
  padding-block: clamp(48px, 8vw, var(--space-secao-vertical));
  padding-bottom: 0; /* a faixa de credenciais cola no rodapé da seção */
}

/* Fundo full-bleed real (2026-08-13) — ver comentário completo no HTML.
   background-position: right center mantém a foto (lado direito da imagem)
   visível mesmo quando o recorte de cover precisa cortar largura em telas
   mais estreitas que a proporção nativa (1920x897) do asset. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../../assets/hero/topo-formatura.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Reforço de legibilidade sobre a faixa esquerda (onde o texto fica) — a
   própria imagem já vem com esse esmaecimento embutido, este overlay é só
   uma garantia extra caso o recorte automático (cover) mude o enquadramento
   em proporções de tela muito diferentes da nativa. Mesma cor sampleada da
   imagem (#19372D), gradiente horizontal (antes era vertical, de quando o
   fundo era só um overlay escuro sobre foto genérica). */
.hero__dim-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(25, 55, 45, 0.55) 0%,
    rgba(25, 55, 45, 0.32) 42%,
    rgba(25, 55, 45, 0) 68%
  );
}

.hero__container {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-bottom: clamp(48px, 8vw, var(--space-secao-vertical));
}

/* ---------------------------------------------------------------------------
 * Coluna de texto
 * ------------------------------------------------------------------------- */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Sem a coluna de vídeo ao lado, o texto precisa de um teto de largura
     próprio — do contrário ele se estica pela faixa clara da foto (à
     direita) e fica ilegível sobre o rosto/corpo da modelo. ~55% da largura
     nativa da imagem (1920x897) é faixa verde sólida antes da foto começar
     a aparecer; 640px cobre essa faixa com folga em containers largos sem
     invadir a foto. */
  max-width: 640px;
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(32px, 4.2vw, var(--fs-h1-hero));
  font-weight: var(--fw-h1-hero);
  line-height: var(--lh-h1-hero);
}

.hero__title-line {
  /* Cada linha é escrita manualmente no HTML (2 frases), mas em telas mais
     estreitas cada `<span>` pode quebrar em 2 linhas por conta própria —
     sem isso, a quebra automática deixa a última linha com poucas palavras
     ("órfã"), quebrando o desenho do título. balance redistribui as
     palavras dessa linha de forma equilibrada quando ela precisa quebrar. */
  text-wrap: balance;
}

.hero__title-line--muted {
  color: var(--cor-texto-cinza-medio);
}

.hero__title-line--strong {
  color: var(--cor-texto-branco);
}

.hero__subtitle {
  /* Ajustado de 46ch para 58ch: a copy real do Novo Sistema é um parágrafo mais longo
     e formal que a frase curta da referência — mais largura evita empilhar muitas linhas
     estreitas dentro da coluna de texto. */
  max-width: 58ch;
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-medio);
}

.hero__badge-line {
  display: flex;
  /* Corrigido (2026-08-11): a frase ("Módulo presencial em São Paulo ou Lisboa · Início
     da turma 2026") precisa ficar SEMPRE em 1 linha só nos breakpoints em que este badge
     é visível (desktop 1440 e desktop comprimido 1024 — no mobile ele já vira display:none
     abaixo). Em vez de só disfarçar o alinhamento pra quando quebrava (flex-start), o
     tamanho de fonte do texto agora é fluido (ver .hero__badge-text) e garante que cabe
     em 1 linha nas 2 larguras; align-items volta a center pois não há mais quebra a
     acomodar. */
  align-items: center;
  gap: 8px;
  font-size: var(--fs-preco-inline);
  font-weight: var(--fw-preco-inline);
  line-height: var(--lh-preco-inline);
  color: var(--cor-destaque-em-verde);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.hero__badge-icon {
  font-size: 1.1em;
  line-height: inherit;
  flex-shrink: 0;
}

.hero__badge-text {
  /* Fonte fluida só deste elemento (não altera mais nada do hero): decresce um pouco
     mais rápido que o resto do hero pra caber em 1 linha mesmo na coluna de texto mais
     estreita do breakpoint 1024px, sem depender de quebra. Letter-spacing também reduzido
     aqui (não no .hero__badge-line, pra não afetar o ícone) pra ganhar mais margem. */
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(12px, 0.55vw + 8px, var(--fs-preco-inline));
  letter-spacing: 0.02em;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.hero__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--botao-height-sm);
  padding: var(--botao-padding);
  border-radius: var(--botao-radius-sm);
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero__cta-btn:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.hero__cta-btn:focus-visible {
  outline: 2px solid var(--cor-fundo-claro);
  outline-offset: 3px;
}

.hero__cta-arrow {
  font-weight: var(--peso-semibold);
}

.hero__cta-price {
  font-size: var(--fs-preco-inline);
  font-weight: var(--fw-preco-inline);
  line-height: var(--lh-preco-inline);
  color: var(--cor-texto-branco);
}

/* ---------------------------------------------------------------------------
 * Faixa de credenciais (marquee infinito, full-bleed, loop via CSS)
 * ------------------------------------------------------------------------- */

.hero-credenciais {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--cor-fundo-preto-puro);
}

.hero-credenciais__track {
  display: flex;
  width: max-content;
  animation: hero-credenciais-scroll 28s linear infinite;
}

.hero-credenciais__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-credenciais__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-inline: 32px;
  font-size: var(--fs-stats-hero);
  font-weight: var(--fw-stats-hero);
  line-height: var(--lh-stats-hero);
  color: var(--cor-branco-50);
  white-space: nowrap;
}

.hero-credenciais__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--cor-fundo-escuro-base);
  color: var(--cor-destaque-em-verde);
}

.hero-credenciais__icon svg {
  width: 16px;
  height: 16px;
}

@keyframes hero-credenciais-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero__container {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  /* ---------------------------------------------------------------------
   * Prioridade mobile: promessa (h1) + subpromessa (subtítulo) + botão de
   * CTA precisam caber sem rolagem excessiva ao abrir a página no celular.
   * Isso exige cortar espaçamentos/paddings generosos do desktop e esconder
   * elementos secundários (badge de local/data, texto de preço, faixa de
   * credenciais) que não são essenciais nesse primeiro instante — eles
   * continuam visíveis ao rolar.
   *
   * Fundo (2026-08-13, pedido do cliente — imagem própria para mobile):
   * assets/hero/topo-formatura-mobile.jpg, recorte vertical já preparado
   * com a foto ocupando o topo e esmaecendo para o verde sólido
   * institucional por baixo — diferente do desktop, aqui o texto fica
   * ABAIXO da foto, não sobreposto a ela, então não faz sentido usar
   * background-size:cover (cortaria a foto tentando preencher a tela) nem
   * o gradiente horizontal de .hero__dim-overlay (pensado para texto ao
   * LADO da foto, não abaixo). background-size:100% auto preserva a
   * proporção nativa da imagem (702x1168) — a faixa verde sólida do fim da
   * imagem emenda sem costura com o background-color abaixo (mesma cor,
   * sampleada do próprio arquivo) para qualquer altura extra que o texto
   * precisar. */
  .hero__bg {
    background-image: url('../../assets/hero/topo-formatura-mobile.jpg');
    background-size: 100% auto;
    background-position: top center;
  }

  .hero__dim-overlay {
    display: none;
  }

  .hero {
    min-height: 0;
    background-color: #123026;
    padding-block: 0;
  }

  .hero__container {
    /* Espaço reservado para a foto do fundo (ver .hero__bg acima) antes do
       texto começar — proporção calibrada visualmente contra a imagem (a
       foto propriamente dita ocupa ~42% da altura renderizada dela, que
       por sua vez é ~1.66x a largura da tela). */
    padding-top: clamp(260px, 68vw, 520px);
    padding-bottom: clamp(32px, 6vw, 48px);
  }

  .hero__content {
    max-width: none;
    text-align: center;
    align-items: center;
    gap: 10px;
    margin-inline: auto;
  }

  .hero__title {
    align-items: center;
    /* --lh-h1-hero é um valor fixo em px calibrado para o fs-h1-hero (52px)
       do desktop; no mobile o font-size cai bastante (clamp abaixo) mas
       essa variável não acompanha, sobrando ~2x de espaço em branco por
       linha quando o título quebra em várias linhas. Line-height relativo
       resolve isso independente de quantas linhas o texto ocupar. */
    line-height: 1.15;
  }

  .hero__subtitle {
    max-width: none;
    font-size: 15px;
    line-height: 1.4;
  }

  /* Badge de local/data e texto de "vagas limitadas" são informação de
     apoio, não a promessa/subpromessa/CTA que precisam estar imediatamente
     visíveis — escondidos só na primeira dobra mobile, seguem no fluxo
     normal (visíveis ao rolar) em telas maiores. */
  .hero__badge-line {
    display: none;
  }

  .hero__cta-row {
    justify-content: center;
    margin-top: 0;
  }

  .hero__cta-price {
    display: none;
  }
}

@media (max-width: 430px) {
  .hero__title {
    font-size: clamp(26px, 7.5vw, 34px);
  }

  .hero__cta-btn {
    width: 100%;
  }

  .hero-credenciais__item {
    font-size: 16px;
    padding-inline: 20px;
  }
}

/* Telas de celular bem estreitas (ex.: 320px de largura) — mesma prioridade
   de primeira dobra do breakpoint de 768px acima, só que com mais uma volta
   de aperto porque nessas larguras o subtítulo quebra em mais linhas. */
@media (max-width: 360px) {
  .hero {
    padding-block: clamp(8px, 3vw, 16px);
  }

  .hero__container {
    gap: 12px;
  }

  .hero__content {
    gap: 8px;
  }

  .hero__title {
    font-size: clamp(24px, 7vw, 30px);
  }

  .hero__subtitle {
    font-size: 14px;
    line-height: 1.35;
  }
}