/* Respiro vertical da seção conforme frame desktop 938:4994. */
.clinical-section {
  padding: 122px 0 136px;
}

/* Shell desktop: grid com painel à esquerda e copy/summary/cta à direita.
   No mobile, colapsa para flex-column preservando a ordem do HTML:
   title → panel → summary → cta. */
.clinical-shell {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 642px 559px;
  grid-template-areas:
    "panel copy"
    "panel summary"
    "panel cta";
  column-gap: 75px;
  row-gap: 30px;
  justify-content: center;
  align-items: start;
}

/* Bloco de título — coluna direita, linha 1. */
.clinical-copy {
  grid-area: copy;
}

/* Título gradiente. */
.clinical-title {
  margin: 0;
  background: linear-gradient(169deg, #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: 700;
  line-height: 1.356;
  letter-spacing: 0.76px;
}

/* Painel de cards — coluna esquerda, span de 3 linhas. */
.clinical-panel {
  grid-area: panel;
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
}

/* Base compartilhada dos dois cards do painel. */
.clinical-card {
  grid-column: 1;
  grid-row: 1;
  background: #e4eeff;
  border: 1.868px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(132, 92, 255, 0.08);
  width: 574px;
  transform-origin: center;
  will-change: transform;
}

/* Card 1: dados do paciente — âncora do overlay. */
.clinical-card--patient {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-left: 0;
  margin-top: 0;
  animation: clinical-card-float-main 7.2s ease-in-out infinite;
}

/* Card 2: saúde crítica — posicionado abaixo e deslocado à direita. */
.clinical-card--health {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 68px;
  margin-top: 315px;
  animation: clinical-card-float-overlay 6.4s ease-in-out infinite;
}

@keyframes clinical-card-float-main {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  30% {
    transform: translate3d(-4px, -8px, 0) rotate(-0.3deg);
  }

  55% {
    transform: translate3d(3px, -14px, 0) rotate(0.35deg);
  }

  82% {
    transform: translate3d(-2px, -5px, 0) rotate(-0.2deg);
  }
}

@keyframes clinical-card-float-overlay {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  24% {
    transform: translate3d(5px, -10px, 0) rotate(0.4deg);
  }

  58% {
    transform: translate3d(-4px, -16px, 0) rotate(-0.45deg);
  }

  84% {
    transform: translate3d(3px, -7px, 0) rotate(0.25deg);
  }
}

/* ---- Internos do card de paciente ---- */

/* Linha de cabeçalho: avatar + bloco de nome. */
.clinical-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Círculo com gradiente contendo o ícone de usuário. */
.clinical-card__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: linear-gradient(133deg, #57d4ff 0%, #845cff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícone de usuário proporcional dentro do círculo. */
.clinical-card__avatar img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Bloco com nome, label e badges da consulta. */
.clinical-card__name-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Nome da paciente. */
.clinical-card__name {
  margin: 0;
  color: #64748b;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.47;
  white-space: nowrap;
}

/* Rótulo "CONSULTA ATUAL" em roxo. */
.clinical-card__consult-label {
  margin: 0;
  color: #845cff;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: 0.24px;
}

/* Linha de badges de hora e status. */
.clinical-badge-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* Badge individual: hora ou status. */
.clinical-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.6px solid rgba(100, 116, 139, 0.2);
  border-radius: 7.2px;
  color: #64748b;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 6px;
  font-weight: 900;
  line-height: 1.47;
  white-space: nowrap;
}

/* Ícone de relógio dentro do badge de hora. */
.clinical-badge img {
  width: 10px;
  height: 10px;
  display: block;
}

/* Linha separadora entre as seções do card. */
.clinical-divider {
  width: 100%;
  border-top: 1px solid rgba(100, 116, 139, 0.15);
}

/* Grid de dados clínicos: 4 colunas, justify-between. */
.clinical-data-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 458px;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: 0.23px;
  white-space: nowrap;
}

/* Cada coluna de dados. */
.clinical-data-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 80px;
}

/* Coluna do IMC sem largura fixa. */
.clinical-data-col--imc {
  width: auto;
  align-self: flex-end;
}

/* Par label/valor de cada campo. */
.clinical-data-item {
  display: flex;
  flex-direction: column;
  padding-bottom: 3.83px;
}

/* Label em roxo. */
.clinical-data-label {
  color: #845cff;
}

/* Valor em cinza. */
.clinical-data-value {
  color: #64748b;
}

/* Seção de dados pessoais: ícone + rótulo + contatos. */
.clinical-personal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Linha com ícone e rótulo "DADOS PESSOAIS". */
.clinical-personal__header {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ícone de usuário miniatura para a seção de dados pessoais. */
.clinical-personal__icon {
  width: 15px;
  height: 15px;
  display: block;
  /* SVG usa var(--fill-0) — forçar cor roxo */
  filter: invert(40%) sepia(80%) saturate(1500%) hue-rotate(230deg) brightness(100%);
}

/* Rótulo "DADOS PESSOAIS" em roxo. */
.clinical-personal__label {
  color: #845cff;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: 0.21px;
}

/* Linha de contatos: telefone à esquerda, email à direita. */
.clinical-personal__data {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 335px;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: 0.23px;
  white-space: nowrap;
}

/* ---- Internos do card de saúde crítica ---- */

/* Título centralizado da seção de saúde. */
.clinical-health__title {
  margin: 0;
  text-align: center;
  color: #845cff;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: 0.21px;
}

/* Linha colorida de alergia ou comorbidade. */
.clinical-health__row {
  padding: 8px;
  border-radius: 7.2px;
  border: 1.6px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Linha de alergia em vermelho. */
.clinical-health__row--allergy {
  background: #ff3f2d;
}

/* Linha de comorbidade em amarelo. */
.clinical-health__row--comorbidity {
  background: #ffae00;
}

/* Header da linha: ícone + rótulo. */
.clinical-health__row-header {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  color: #ffffff;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.47;
  white-space: nowrap;
}

/* Ícone de alerta na linha de saúde. */
.clinical-health__row-header img {
  width: 13px;
  height: 14px;
  display: block;
}

/* Valor da linha (diagnóstico). */
.clinical-health__row-value {
  color: #ffffff;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.47;
}

/* ---- Copy column: summary e CTA ---- */

/* Texto de apoio na coluna direita. */
.clinical-summary {
  grid-area: summary;
  margin: 0;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.47;
}

/* CTA da seção, largura pelo conteúdo no desktop. */
.clinical-cta {
  grid-area: cta;
  justify-self: start;
}

/* ---- Tablet: colapsa para coluna única. ---- */
@media (max-width: 1340px) {
  .clinical-section {
    padding: 96px 0 108px;
  }

  .clinical-shell {
    width: min(720px, calc(100% - 48px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
  }

  .clinical-copy {
    width: min(100%, 620px);
    text-align: center;
  }

  .clinical-title {
    font-size: 42px;
    letter-spacing: 0.84px;
  }

  .clinical-summary {
    width: min(100%, 620px);
    text-align: center;
    font-size: 18px;
  }

  .clinical-cta {
    margin: 0 auto;
  }

  /* Painel reverte para flex-column: dois cards empilhados sem overlay. */
  .clinical-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: min(100%, 620px);
  }

  .clinical-card {
    grid-column: unset;
    grid-row: unset;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    animation: none;
  }

  .clinical-data-grid {
    width: 100%;
  }

  .clinical-personal__data {
    width: 100%;
  }
}

/* ---- Mobile: escala baseada no node 951:6688. ---- */
@media (max-width: 480px) {
  .clinical-section {
    padding: 86px 0 104px;
  }

  .clinical-shell {
    width: min(335px, calc(100% - 40px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
  }

  .clinical-copy {
    width: 321px;
    text-align: center;
  }

  .clinical-title {
    font-size: 28px;
    letter-spacing: 0.56px;
    text-align: center;
  }

  /* Painel mobile: grid overlay com cards escalados. */
  .clinical-panel {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    place-items: start;
    min-height: 264px;
  }

  /* Cards voltam ao overlay no mobile. */
  .clinical-card {
    grid-column: 1;
    grid-row: 1;
    width: 309.733px;
    border-radius: 8.639px;
    box-shadow: none;
    border-width: 1.008px;
  }

  .clinical-card--patient {
    height: 164.579px;
    padding: 8.639px;
    gap: 7.015px;
    margin-left: 0;
    margin-top: 0;
  }

  .clinical-card--health {
    height: 93.536px;
    padding: 8.639px;
    gap: 6.479px;
    margin-left: 17.27px;
    margin-top: 169.97px;
    animation: clinical-card-float-overlay-mobile 6.4s ease-in-out infinite;
  }

  .clinical-card--patient {
    animation: clinical-card-float-main-mobile 7.2s ease-in-out infinite;
  }

  .clinical-card__avatar {
    width: 23.758px;
    height: 23.758px;
    flex-basis: 23.758px;
  }

  .clinical-card__avatar img {
    width: 12px;
    height: 12px;
  }

  .clinical-card__name-block {
    gap: 2.698px;
  }

  .clinical-card__name {
    font-size: 8.639px;
  }

  .clinical-card__consult-label {
    font-size: 6.479px;
    letter-spacing: 0.1296px;
  }

  .clinical-badge-row {
    gap: 2.698px;
  }

  .clinical-badge {
    padding: 4.32px;
    border-radius: 3.888px;
    border-width: 0.864px;
    font-size: 3.25px;
    gap: 2.16px;
  }

  .clinical-badge img {
    width: 5.16px;
    height: 5.16px;
  }

  .clinical-data-grid {
    width: 247px;
    font-size: 6.203px;
    letter-spacing: 0.1241px;
  }

  .clinical-data-col {
    gap: 5.396px;
    width: auto;
  }

  .clinical-data-item {
    padding-bottom: 2.066px;
  }

  .clinical-personal {
    gap: 4px;
  }

  .clinical-personal__icon {
    width: 8px;
    height: 8px;
  }

  .clinical-personal__label {
    font-size: 5.615px;
    letter-spacing: 0.1123px;
  }

  .clinical-personal__data {
    width: 180.767px;
    font-size: 6.203px;
    letter-spacing: 0.1241px;
  }

  .clinical-health__title {
    font-size: 5.615px;
    letter-spacing: 0.1123px;
  }

  .clinical-health__row {
    padding: 4.32px;
    gap: 4.32px;
    border-radius: 3.888px;
    border-width: 0.864px;
  }

  .clinical-health__row-header {
    font-size: 4.897px;
    gap: 2.16px;
  }

  .clinical-health__row-header img {
    width: 7px;
    height: 7.63px;
  }

  .clinical-health__row-value {
    font-size: 4.897px;
  }

  .clinical-summary {
    width: 313px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
  }

  .clinical-cta {
    width: 272.308px;
    margin: 0 auto;
  }
}

@keyframes clinical-card-float-main-mobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  32% {
    transform: translate3d(-2px, -4px, 0) rotate(-0.25deg);
  }

  60% {
    transform: translate3d(2px, -7px, 0) rotate(0.3deg);
  }

  85% {
    transform: translate3d(-1px, -3px, 0) rotate(-0.15deg);
  }
}

@keyframes clinical-card-float-overlay-mobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  26% {
    transform: translate3d(3px, -5px, 0) rotate(0.35deg);
  }

  56% {
    transform: translate3d(-2px, -8px, 0) rotate(-0.35deg);
  }

  82% {
    transform: translate3d(2px, -4px, 0) rotate(0.2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clinical-card--patient,
  .clinical-card--health {
    animation: none;
  }
}