/* INOVSAN - LP Google Ads - VERSÃO B (só no index-b.html)
   Hero com fotografia a toda a largura, véu azul-noite e o formulário num cartão branco por cima.
   Mobile/tablet: a foto fica atrás do H1 + subtítulo + botão e o cartão do formulário sobe 64px por cima dela.
   Desktop: foto em fundo de toda a secção, texto à esquerda, formulário à direita.
   AA: o véu nunca desce abaixo de 0,74 de azul-noite atrás do texto. No pior caso (céu branco por baixo),
   o branco dá 6,6:1 e o subtítulo #CFDDE9 dá 4,8:1. */

.hero-b {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 64px auto;
  background: var(--grey);
  padding-bottom: var(--gap);
}
.hero-b-bg { grid-row: 1 / 3; grid-column: 1; position: relative; overflow: hidden; background: var(--navy); }
.hero-b-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.hero-b-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 34, 46, .76) 0%, rgba(18, 34, 46, .74) 45%, rgba(18, 34, 46, .9) 100%);
}

.hero-b-inner { display: contents; }

.hero-b-text {
  grid-row: 1; grid-column: 1; position: relative; z-index: 1;
  padding: 40px calc(var(--gap) + 20px) 36px;
  color: var(--white);
}
.hero-b-text :focus-visible { outline-color: var(--white); }
.hero-b h1 { font-size: clamp(2.125rem, 1.35rem + 3.2vw, 3.75rem); line-height: 1.08; letter-spacing: -0.01em; max-width: 12.5em; }

.hero-b .hero-b-form { grid-row: 2 / 4; grid-column: 1; position: relative; z-index: 1; margin-inline: var(--gap); }

@media (min-width: 768px) {
  .hero-b { grid-template-rows: auto 80px auto; }
  .hero-b-text { padding: 64px calc(var(--gutter) + 40px) 48px; }
  .hero-b .hero-b-form { margin-inline: var(--gutter); }
}

@media (min-width: 1024px) {
  .hero-b { display: block; padding: 0; }
  .hero-b-bg { position: absolute; inset: 0; }
  .hero-b-bg img { object-position: 50% 55%; }
  .hero-b-bg::after {
    background: linear-gradient(90deg, rgba(18, 34, 46, .92) 0%, rgba(18, 34, 46, .84) 45%, rgba(18, 34, 46, .55) 75%, rgba(18, 34, 46, .4) 100%);
  }
  .hero-b-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center;
    padding-block: 56px;
  }
  .hero-b-text { grid-row: 1; grid-column: 1; padding: 0 0 8px; }
  .hero-b .hero-b-form { grid-row: 1; grid-column: 2; margin: 0; }
}