/* ===== #heroi — nao vaza para fora de .bl-heroi ===== */
.bl-heroi {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 2rem + 9vw, 9rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  /* O degrade e CSS, nao do shader: o canvas e transparente e fica por cima. */
  background: linear-gradient(160deg,
              var(--bl-branco) 0%, var(--bl-nevoa) 62%, #EFEFF3 100%);
}
.bl-heroi__fundo {
  position: absolute; inset: 0; z-index: -1;
  display: grid; place-items: center end;
  padding-right: clamp(0rem, -6rem + 12vw, 7rem);
  pointer-events: none;
}
/* O SVG de 495 B e o fallback inteiro: zero imagem no caminho critico.
   O estatico e o que a maioria ve — o portao desliga o canvas em boa parte
   do trafego real por design —, entao ele nao pode ser "B a 7%". Maior e um
   ponto mais opaco: o que cresce e o CURSOR ambar dentro do simbolo, que e
   a mesma forma da marca de referencia na margem, ampliada. A menor marca
   da pagina e a maior sao a mesma coisa. */
.bl-heroi__marca {
  width: clamp(260px, 44vw, 680px); height: auto; opacity: .09;
}
.bl-heroi__texto { position: relative; z-index: 1; }
.bl-heroi__corpo { max-width: 46rem; }
/* A margem do heroi guarda duas coisas empilhadas — a etiqueta em cima e a
   procedencia embaixo — e o corpo atravessa as duas linhas. E o unico
   .bl-registro com duas celulas de margem, por isso a grade e explicita. */
@media (min-width: 720px) {
  .bl-heroi__abertura { grid-template-rows: auto 1fr; }
  .bl-heroi__abertura > .bl-eyebrow { grid-area: 1 / 1; }
  .bl-heroi__abertura > .bl-heroi__corpo { grid-area: 1 / 2 / 3 / 3; }
  .bl-heroi__abertura > .bl-fonte {
    grid-area: 2 / 1; align-self: start; margin-top: var(--bl-e4);
  }
  /* Sobre o degrade o cinza de apoio cai para 4,55:1 no ponto mais escuro.
     Aqui a nota inteira sobe para grafite-700: 8,74:1 no pior ponto. */
  .bl-heroi__abertura .bl-fonte { color: var(--bl-grafite-700); }
}
.bl-heroi__linha {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  /* 4,55:1 no ponto mais escuro do degrade (#EFEFF3) — medido, passa AA. */
  color: var(--bl-texto-fraco);
  max-width: 40ch;
}
.bl-heroi__acoes {
  display: flex; flex-wrap: wrap; gap: var(--bl-e3); margin-top: var(--bl-e5);
}
/* Abaixo de 640px os dois botoes nao cabem lado a lado (mesmo breakpoint
   de .bl-container em layout.css): empilham, mas com a MESMA largura —
   sem isso "Ver os projetos" fica estreito ao lado do CTA cheio. */
@media (max-width: 640px) {
  .bl-heroi__acoes { flex-direction: column; align-items: stretch; }
  .bl-heroi__acoes .bl-botao { width: 100%; }
}
/* O canvas da Task 11 entra aqui. Fica escondido ate o portao liberar. */
.bl-heroi__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.bl-heroi__canvas[data-ligado="1"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bl-heroi__canvas { transition: none; }
}