/* Secao centralizada do parecer medico, baseada no node Figma 1904:2666. */
.medical-opinion-section {
  padding: 120px 0 90px;
  overflow: hidden;
}

/* Shell desktop com largura suficiente para a fileira de tres cards. */
.medical-opinion-shell {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* Cabecalho central com titulo em gradiente e texto de apoio. */
.medical-opinion-header {
  width: min(100%, 800px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

/* Titulo em gradiente ciano-roxo, com strong controlando apenas o peso. */
.medical-opinion-title {
  width: min(100%, 798px);
  margin: 0;
  background: linear-gradient(172deg, #57d4ff 0%, #845cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.356;
  letter-spacing: 0.76px;
}

.medical-opinion-title strong {
  font-size: 34px;
  font-weight: 700;
}

/* Paragrafo com a largura e cor cinza do Figma. */
.medical-opinion-description {
  width: min(100%, 800px);
  margin: 0;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.47;
}

/* Fileira desktop calculada: 3 cards de 396px + gaps de 34px do node. */
.medical-opinion-cards {
  width: min(100%, 1256px);
  min-height: 270px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 34px;
}

/* Card roxo com icone ciano flutuando acima do topo, como no Figma. */
.medical-opinion-card {
  position: relative;
  height: 182px;
  padding: 30px;
  border-radius: 30px;
  display: flex;
  align-items: flex-end;
  background: #845cff;
  color: #ffffff;
}

.medical-opinion-card__icon {
  position: absolute;
  left: 30px;
  top: -30px;
  width: 65px;
  height: 65px;
  border-radius: 14.444px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #57d4ff;
}

.medical-opinion-card__icon img {
  width: 40.444px;
  height: 40.444px;
  display: block;
}

.medical-opinion-card:first-child .medical-opinion-card__icon img {
  width: 34.667px;
  height: 34.667px;
}

.medical-opinion-card__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.medical-opinion-card__title,
.medical-opinion-card__text {
  width: 100%;
  margin: 0;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.47;
}

.medical-opinion-card__title {
  font-weight: 700;
}

.medical-opinion-card__text {
  font-weight: 400;
}

/* CTA centralizado; a largura do rotulo segue o componente do Figma. */
.medical-opinion-cta {
  margin: 0 auto;
}

.medical-opinion-cta__label {
  width: 240px;
}

/* Tablet: colapsa os cards para uma coluna sem criar um terceiro layout visual. */
@media (max-width: 1340px) {
  .medical-opinion-section {
    padding: 96px 0;
  }

  .medical-opinion-shell {
    width: min(720px, calc(100% - 48px));
    gap: 32px;
  }

  .medical-opinion-title {
    font-size: 34px;
    letter-spacing: 0.68px;
  }

  .medical-opinion-title strong {
    font-size: inherit;
  }

  .medical-opinion-description {
    font-size: 18px;
  }

  .medical-opinion-cards {
    width: min(100%, 520px);
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 60px;
    padding-top: 30px;
  }

  .medical-opinion-card {
    height: auto;
    min-height: 150px;
    padding: 42px 30px 30px;
    border-radius: 24px;
  }
}

/* Mobile: largura util de 335px e tipografia compacta do padrao do projeto. */
@media (max-width: 480px) {
  .medical-opinion-section {
    padding: 30px 0 40px;
  }

  .medical-opinion-shell {
    width: min(335px, calc(100% - 40px));
    gap: 28px;
  }

  .medical-opinion-header {
    gap: 20px;
  }

  .medical-opinion-title {
    width: 100%;
    font-size: 28px;
    letter-spacing: 0.56px;
  }

  .medical-opinion-description {
    width: 100%;
    font-size: 16px;
  }

  .medical-opinion-cards {
    width: 100%;
    gap: 28px;
    padding-top: 18px;
  }

  .medical-opinion-card {
    height: auto;
    min-height: 142px;
    padding: 38px 22px 22px;
    border-radius: 22px;
  }

  .medical-opinion-card__icon {
    left: 22px;
    top: -18px;
    width: 47px;
    height: 47px;
  }

  .medical-opinion-card__icon img,
  .medical-opinion-card:first-child .medical-opinion-card__icon img {
    width: 27px;
    height: 27px;
  }

  .medical-opinion-card__copy {
    gap: 10px;
  }

  .medical-opinion-card__title,
  .medical-opinion-card__text {
    font-size: 16px;
  }

  .medical-opinion-cta {
    width: 272.308px;
    margin-top: 0;
  }

  .medical-opinion-cta__label {
    width: 198.879px;
  }
}