/* =========================================================
   Emoticomm Health · v4 institucional (homolog 19/10)
   Base = styles.css da v3, sem mudança; aqui só o que é novo
   ========================================================= */
/* Quem somos: a frase-síntese em destaque */
.body-text-strong {
  font-weight: 600;
}

/* =========================================================
   Nossa atuação · 23/10: a cliente escolheu a opção A (portas com foto)
   ========================================================= */
/* cada frente é um cartão com foto inteira e texto por cima */
.opA {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.opA-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(520px, 48vw, 660px);
  padding: clamp(24px, 3vw, 44px);
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: var(--radius-md);
}

.opA-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.opA-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(30 22 11 / 0) 18%, rgb(30 22 11 / 0.8) 52%, rgb(30 22 11 / 0.97) 100%);
}

.opA-card:hover > img {
  transform: scale(1.04);
}

.opA-profissionais { object-position: 86% center; }
.opA-empresas { object-position: 72% center; }

.opA-num {
  font: 300 clamp(3rem, 5.5vw, 4.6rem)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--color-yellow);
}

.opA-card h3 {
  margin: 8px 0 var(--space-sm);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
}

.opA-card p {
  max-width: 32em;
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.9;
}

.opA-card .button {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

@media (max-width: 760px) {
  .opA {
    grid-template-columns: 1fr;
  }

  /* foto no alto do cartão e texto embaixo, sem cobrir o rosto */
  .opA-card {
    min-height: 0;
    padding-top: 250px;
  }

  .opA-card > img {
    bottom: auto;
    height: 330px;
  }

  .opA-card::before {
    background: linear-gradient(180deg, rgb(30 22 11 / 0) 0, rgb(30 22 11 / 0) 150px, rgb(30 22 11 / 0.97) 320px);
  }

  .opA-profissionais { object-position: 90% center; }
  .opA-empresas { object-position: 75% center; }
}

/* Contato: "(opcional)" discreto no rótulo do campo */
.field small {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* Hero (22/10): executivo e executiva com tablet amarelo sempre à vista */
.hero .hero-executivo { object-position: 70% 28%; }
.hero .hero-executiva { object-position: 67% 28%; }

/* Hero no celular (23/10): a foto começa abaixo do cabeçalho, a cabeça não fica atrás do botão "Vamos conversar";
   a faixa de cima é só o fundo marrom, com a borda da foto esfumada */
@media (max-width: 600px) {
  .hero .hero-executivo,
  .hero .hero-executiva {
    box-sizing: border-box;
    padding-top: 56px;
    -webkit-mask-image: linear-gradient(180deg, transparent 50px, #000 110px);
    mask-image: linear-gradient(180deg, transparent 50px, #000 110px);
  }
}