/* ==========================================================================
   Página Genoma+ (genoma.html)
   Genoma+ é uma marca parceira com identidade própria (azul e verde da logo).
   As cores dela aparecem só como detalhe (brilho da capa, ícones dos
   benefícios); botões, textos e o restante seguem o Mídia Kit do hospital.
   ========================================================================== */
.page-hero--genoma {
  --genoma-azul: #53AFE6;
  --genoma-verde: #81CC2A;
  padding-bottom: 0;
}

/* Brilho azul/verde da marca no lugar do brilho laranja padrão */
.page-hero--genoma::before {
  background: radial-gradient(circle, rgba(83, 175, 230, 0.22) 0%, rgba(83, 175, 230, 0) 65%);
}

.page-hero--genoma .page-hero__grid {
  gap: var(--espaco-6);
}

.page-hero--genoma .page-hero__conteudo {
  padding-bottom: var(--espaco-4);
}

@media (min-width: 992px) {
  .page-hero--genoma .page-hero__grid {
    align-items: end;
    grid-template-columns: 1fr 1fr;
  }

  .page-hero--genoma .page-hero__conteudo {
    align-self: center;
    padding-bottom: var(--espaco-9);
  }
}

.genoma-logo {
  display: block;
  width: 240px;
  height: auto;
  margin-bottom: var(--espaco-6);
}

@media (min-width: 768px) {
  .genoma-logo { width: 300px; }
}

/* Foto recortada (fundo transparente) apoiada na base do cabeçalho */
.genoma-capa {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.genoma-capa::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: min(100%, 540px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, rgba(83, 175, 230, 0.45) 0%, rgba(83, 175, 230, 0) 60%),
    radial-gradient(circle at 70% 65%, rgba(129, 204, 42, 0.35) 0%, rgba(129, 204, 42, 0) 55%);
  pointer-events: none;
}

.genoma-capa img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

@media (min-width: 768px) {
  .genoma-capa img { max-width: 440px; }
}

@media (min-width: 992px) {
  .genoma-capa img { max-width: 520px; }
}

.genoma-capa .card-flutuante {
  left: 0;
  right: auto;
  bottom: var(--espaco-6);
  max-width: 270px;
}

.genoma-capa .card-flutuante .icon { color: var(--genoma-verde); }

@media (min-width: 992px) {
  .genoma-capa .card-flutuante { bottom: var(--espaco-9); }
}

/* ---------- Benefícios: cards com foto ---------- */
.card-beneficio {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transicao-padrao), box-shadow var(--transicao-padrao);
}

.card-beneficio__foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card-beneficio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}

.card-beneficio:hover .card-beneficio__foto img { transform: scale(1.05); }

.card-beneficio__corpo {
  flex: 1;
  position: relative;
  padding: 0 var(--espaco-5) var(--espaco-5);
}

/* O ícone "sobe" na borda da foto */
.card-beneficio .card__icon {
  margin-top: calc(-1 * var(--espaco-6));
  margin-bottom: var(--espaco-3);
  position: relative;
  background-color: var(--cor-branco);
  box-shadow: var(--sombra-md);
}

.card-beneficio .card__title { margin: 0; }

/* No celular, cada benefício vira uma linha compacta: foto à esquerda, título à direita */
@media (max-width: 575px) {
  .card-beneficio {
    flex-direction: row;
    align-items: center;
  }

  .card-beneficio__foto {
    flex-shrink: 0;
    width: 112px;
    aspect-ratio: 1;
  }

  .card-beneficio__corpo { padding: var(--espaco-4) var(--espaco-5); }

  .card-beneficio .card__icon { display: none; }
}

/* ---------- Coleta: a foto acompanha a altura do passo a passo ---------- */
@media (min-width: 992px) {
  .split--coleta { align-items: stretch; }

  .split--coleta .foto-moldura { display: flex; }

  .split--coleta .media-foto {
    flex: 1;
    aspect-ratio: auto;
    min-height: 480px;
  }
}