/* Hero: texto e CTA primeiro, foto do anúncio logo abaixo (celular) ou sangrando à direita (desktop).
   A figura é IRMÃ do bloco de texto e não recebe toque (pointer-events), então a faixa escura da foto
   pode passar por baixo dos botões. Foto, H1 e botões NÃO usam .reveal: LCP mede o que renderiza.
   O mockup vivo (cartão de aviso, agenda e selo de exemplo) está em secao-hero-mock.css. */

.hero {
  padding-top: var(--sp-5);
}

.hero__palco {
  position: relative;
}

.hero__container {
  position: relative;
  z-index: 2;
}

.hero__texto .eyebrow {
  margin-bottom: 12px;
}

.hero__sub {
  margin-top: 14px;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 22px;
}

.hero__ctas .btn {
  width: 100%;
}

/* ---------- Figura ---------- */
.hero-fig {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: -40px;
  overflow: hidden;
  background-color: var(--bg);
  container-type: inline-size;
}

.hero-fig,
.hero-fig * {
  pointer-events: none;
}

.hero-fig picture,
.hero-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-fig img {
  object-fit: cover;
}

/* Gradientes de fusão (pseudo-elemento, não máscara): topo sob os botões e base para a faixa de fatos */
.hero-fig::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--bg) 0, transparent 22%),
    linear-gradient(to top, var(--bg) 0, transparent 18%);
}

/* Fallback gráfico se a foto faltar (imagens.js marca .is-missing): brilho azul e duas linhas de neon */
.hero-fig.is-missing {
  background:
    linear-gradient(var(--blue), var(--blue)) 0 34% / 38% 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 100% 30% / 34% 2px no-repeat,
    radial-gradient(ellipse 70% 40% at 50% 28%, rgba(47, 123, 255, 0.35), transparent),
    var(--bg);
}

.is-missing img {
  visibility: hidden;
}

/* ---------- Ficha técnica: quatro fatos verificáveis (rótulo curto + fato em serifada, sem ícone) ---------- */
.fatos-faixa {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}

.fatos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding-inline: 0;
}

.fatos > div {
  padding: 14px var(--pad-x);
}

.fatos > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.fatos > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.fatos dt {
  color: var(--text);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* O mesmo filete azul de 16 px do eyebrow marca cada rótulo */
.fatos dt::before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  margin-bottom: 8px;
  background: var(--blue);
}

.fatos dd {
  margin: 2px 0 0;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------- Tablet: texto à esquerda, foto encostada à direita ---------- */
@media (min-width: 768px) {
  .hero {
    padding-top: var(--sp-6);
  }

  .hero__texto {
    max-width: 36rem;
  }

  .hero__ctas {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
  }

  .hero__ctas .btn {
    width: auto;
  }

  .hero-fig {
    width: 78%;
    margin-left: auto;
    margin-top: -48px;
  }

  .hero-fig::before {
    background:
      linear-gradient(to bottom, var(--bg) 0, transparent 22%),
      linear-gradient(to top, var(--bg) 0, transparent 18%),
      linear-gradient(to right, var(--bg) 0, transparent 24%);
  }

  .fatos {
    grid-template-columns: repeat(4, 1fr);
    padding-inline: var(--pad-x);
  }

  .fatos > div {
    padding: 16px var(--sp-4);
    border: 0;
    border-left: 1px solid var(--line);
  }

  .fatos > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .fatos dd {
    font-size: 1.1875rem;
  }
}

/* ---------- Desktop: duas colunas assimétricas, foto sangra à direita ---------- */
@media (min-width: 1024px) {
  .hero {
    --fig: min(46vw, 700px);
    padding-top: 0;
  }

  @supports (height: 1svh) {
    .hero {
      --fig: min(46vw, 78svh, 700px);
    }
  }

  .hero__palco {
    min-height: var(--fig);
  }

  /* min-height, não height: se o H1 ganhar uma linha a mais o bloco cresce em vez de cortar o texto */
  .hero__container {
    display: flex;
    align-items: center;
    min-height: var(--fig);
  }

  /* Largura do texto = o que sobra ao lado da figura. 100vw inclui a barra de rolagem (~15 px no Windows) e apertaria o
     intervalo entre texto e foto a 1024 px: onde há unidades de contêiner o palco é o contêiner e 100cqw é a largura
     útil, sem a barra. Sem elas fica o 100vw. */
  .hero__texto {
    max-width: min(35rem, calc(100vw - var(--fig) - var(--pad-x) * 2 - 24px));
  }

  @supports (width: 1cqw) {
    .hero__palco {
      container-type: inline-size;
    }

    .hero__texto {
      max-width: min(35rem, calc(100cqw - var(--fig) - var(--pad-x) * 2 - 24px));
    }
  }

  .hero-fig {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--fig);
    margin: 0;
  }
}