/* Hero em vídeo de sangria total: filme ao fundo, véu para o texto ler,
   título e ações no canto inferior esquerdo, régua técnica no pé.

   O vídeo é atmosfera, não conteúdo: entra mudo, em loop, e o pôster
   aparece antes de ele carregar — quem está no 4G vê a imagem e nada
   trava esperando 1,7 MB. */

.hero {
  position: relative;
  background: var(--preto);
  color: var(--claro-medio);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(86vh, 780px);
  overflow: hidden;
  isolation: isolate;
}

.hero-video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Véu duplo: escurece da esquerda, onde fica o texto, e da base — assim o
   título ganha contraste sem apagar o filme inteiro. */
.hero-veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.26) 72%, rgba(0,0,0,.45) 100%),
    linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 46%);
}

/* A faixa centraliza o container e dá o respiro lateral; o texto apenas
   se limita dentro dela. Aplicar max-width na própria faixa jogava o
   bloco inteiro para o meio da tela, porque ela tem margin-inline: auto. */
.hero-corpo {
  position: relative;
  align-self: end;
  width: 100%;
  padding-block: clamp(40px, 6vw, 76px);
}
.hero-texto {
  display: grid; gap: 20px; justify-items: start;
  max-width: 46rem;
}
.hero-texto h1 { color: var(--claro-forte); }
.hero-texto h1 em { font-style: normal; color: var(--laranja); }
.hero-texto > p {
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  color: var(--claro-medio); max-width: 44ch;
}
.hero-texto strong { color: var(--claro-forte); font-weight: 700; }

.hero-acoes { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; }
.hero .botao-vazio { border-color: var(--claro-fraco); color: #fff; border-left-width: 0; }
.hero .botao-vazio:hover { background: #fff; border-color: #fff; color: var(--preto); }

/* Régua técnica no pé: números separados por fio, de ponta a ponta */
.hero-regua {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border-top: 1px solid var(--claro-linha);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-regua div {
  padding: 16px clamp(16px, 3vw, 32px);
  border-right: 1px solid var(--claro-linha);
  display: grid; gap: 1px;
}
.hero-regua div:last-child { border-right: 0; }
.hero-regua strong {
  font-variation-settings: "wdth" 118; font-weight: 900;
  font-size: 1.6rem; line-height: 1.1; color: var(--laranja);
}
.hero-regua span {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-fraco);
}

/* Controle do filme: discreto, canto superior direito */
.hero-pausa {
  position: absolute; top: clamp(16px, 3vw, 26px); right: clamp(16px, 3vw, 26px);
  z-index: 3; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--claro-linha); background: rgba(0,0,0,.42);
  color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .16s, border-color .16s;
}
.hero-pausa:hover { background: rgba(0,0,0,.72); border-color: var(--claro-fraco); }
.hero-pausa svg { width: 13px; height: 13px; fill: currentColor; }

@media (max-width: 760px) {
  .hero { min-height: min(76vh, 600px); }
  /* Empilhados, os botões deixam de ser um par colado: a borda volta */
  .hero-acoes { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 300px; }
  .hero .botao-vazio { border-left-width: 2px; }
  /* Rótulo quebrava em duas linhas tortas no retrato */
  .hero-texto .rotulo { font-size: .62rem; letter-spacing: .14em; }
  /* No retrato o texto ocupa a base inteira: o véu lateral não serve */
  .hero-veu {
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.52) 54%, rgba(0,0,0,.34) 100%);
  }
}