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

/* Shell: grid desktop com coluna esquerda (copy + summary + cta) e painel direito.
   No mobile, o grid colapsa para flex-column e os elementos fluem
   na ordem do HTML: copy → panel → summary → cta. */
.infrastructure-shell {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 559px max-content;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "copy  panel"
    "summary panel"
    "cta   panel";
  column-gap: 70px;
  row-gap: 30px;
  justify-content: center;
}

/* Coluna textual esquerda — título e intro. */
.infrastructure-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

/* Título gradiente principal da subseção. */
.infrastructure-title {
  width: 396px;
  margin: 0;
  background: linear-gradient(158deg, #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;
}

/* Primeiro parágrafo — início da jornada. */
.infrastructure-intro {
  margin: 0;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.47;
}

/* Segundo parágrafo — fechamento da ideia, coluna esquerda no desktop. */
.infrastructure-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 escuro — coluna esquerda no desktop, largura pelo conteúdo. */
.infrastructure-cta {
  grid-area: cta;
  justify-self: start;
}

/* Painel da linha do tempo: CSS grid overlay — todos os cards no mesmo
   cell (col-1/row-1) e posicionados com margin-top + margin-left. */
.infrastructure-panel {
  grid-area: panel;
  align-self: center;
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
}

/* Base visual compartilhada por todos os cards. */
.infrastructure-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);
  transform-origin: center;
  will-change: transform;
}

/* Card superior de contexto das triagens — âncora do grid (mt/ml = 0). */
.infrastructure-card--header {
  width: 574px;
  height: 85px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  margin-top: 0;
  animation: infrastructure-card-float-header 7.4s ease-in-out infinite;
}

/* Ícone circular do header com gradiente. */
.infrastructure-card__header-icon {
  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;
}

/* SVG de warning proporcional dentro do círculo. */
.infrastructure-card__header-icon img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Agrupa as duas linhas de texto do card superior. */
.infrastructure-card__header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Eyebrow principal. */
.infrastructure-card__eyebrow {
  margin: 0;
  color: #64748b;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.47;
}

/* Linha de detalhe em roxo. */
.infrastructure-card__eyebrow-detail {
  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;
}

/* Cards principais com chips, sintoma e data. */
.infrastructure-card--entry {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Posicionamento do card moderado (mt = logo após header de 85px + 6px). */
.infrastructure-card--moderate {
  width: 578px;
  margin-top: 91px;
  margin-left: 37px;
  animation: infrastructure-card-float-a 6.8s ease-in-out infinite;
}

/* Posicionamento do card alto. */
.infrastructure-card--high {
  width: 595px;
  margin-top: 216px;
  margin-left: 56px;
  animation: infrastructure-card-float-b 7.9s ease-in-out infinite;
}

/* Posicionamento do card baixo. */
.infrastructure-card--low {
  width: 566px;
  margin-top: 342px;
  margin-left: 8px;
  animation: infrastructure-card-float-c 7.2s ease-in-out infinite;
}

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

  28% {
    transform: translate3d(-3px, -6px, 0) rotate(-0.2deg);
  }

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

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

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

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

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

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

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

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

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

  80% {
    transform: translate3d(-2px, -6px, 0) rotate(-0.18deg);
  }
}

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

  30% {
    transform: translate3d(3px, -9px, 0) rotate(0.2deg);
  }

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

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

/* Linha de chips superiores de cada entrada. */
.infrastructure-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Base dos chips de risco, especialidade e rating. */
.infrastructure-chip {
  min-height: 20px;
  padding: 8px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.47;
  white-space: nowrap;
}

/* Ícones dos chips. */
.infrastructure-chip img {
  width: 14px;
  height: 14px;
  display: block;
}

/* Chips neutros claros. */
.infrastructure-chip--soft {
  background: rgba(100, 116, 139, 0.04);
  border: 1.6px solid rgba(100, 116, 139, 0.31);
  color: #64748b;
}

/* Chip de nota com padding compacto à direita. */
.infrastructure-chip--rating {
  padding-right: 8px;
}

/* Base dos chips de risco coloridos. */
.infrastructure-chip--risk {
  color: #ffffff;
  border: 1.6px solid rgba(255, 255, 255, 0.35);
}

/* Risco moderado amarelo. */
.infrastructure-chip--moderate {
  background: #ffae00;
}

/* Risco alto vermelho. */
.infrastructure-chip--high {
  background: #ff3a3a;
}

/* Risco baixo cinza translúcido. */
.infrastructure-chip--low {
  background: rgba(100, 116, 139, 0.43);
  border-color: rgba(255, 255, 255, 0.31);
}

/* Texto do sintoma ou queixa. */
.infrastructure-card__question {
  margin: 0;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.47;
  letter-spacing: 0.24px;
}

/* Linha de data com ícone de relógio. */
.infrastructure-card__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #845cff;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.47;
  letter-spacing: 0.21px;
}

/* Ícone de relógio. */
.infrastructure-card__date img {
  width: 14px;
  height: 14px;
  display: block;
}

/* Tablet: colapsa para coluna única centralizada.
   Ordem do HTML: copy → panel → summary → cta (igual ao mobile). */
@media (max-width: 1180px) {
  .infrastructure-section {
    padding: 96px 0 108px;
  }

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

  .infrastructure-copy {
    width: min(100%, 620px);
    align-items: center;
    gap: 22px;
  }

  .infrastructure-title {
    width: min(100%, 620px);
    font-size: 42px;
    letter-spacing: 0.84px;
    text-align: center;
  }

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

  .infrastructure-cta {
    margin: 0 auto;
  }

  /* Painel reverte para flex-column. */
  .infrastructure-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    width: min(100%, 620px);
    align-self: auto;
  }

  /* Cards saem do overlay. */
  .infrastructure-card {
    grid-column: unset;
    grid-row: unset;
    animation: none;
  }

  .infrastructure-card--header,
  .infrastructure-card--moderate,
  .infrastructure-card--high,
  .infrastructure-card--low {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
}

/* Mobile segue os nodes 951:6577 e 951:6582. */
@media (max-width: 480px) {
  .infrastructure-section {
    padding: 86px 0 104px;
  }

  .infrastructure-shell {
    width: min(335px, calc(100% - 40px));
    gap: 25px;
  }

  .infrastructure-copy {
    gap: 19px;
  }

  .infrastructure-title {
    width: 299px;
    margin: 0 auto;
    font-size: 28px;
    line-height: 1.356;
    letter-spacing: 0.56px;
    text-align: center;
  }

  .infrastructure-intro {
    width: 313px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }

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

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

  .infrastructure-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 335px;
    align-self: auto;
  }

  .infrastructure-card {
    border-radius: 8.239px;
    box-shadow: none;
  }

  .infrastructure-card--header {
    width: 295.376px;
    height: auto;
    min-height: 50.422px;
    padding: 8.239px;
    gap: 4.119px;
    animation: infrastructure-card-float-header-mobile 7.4s ease-in-out infinite;
  }

  .infrastructure-card__header-icon {
    width: 22.656px;
    height: 22.656px;
    flex-basis: 22.656px;
  }

  .infrastructure-card__header-icon img {
    width: 12px;
    height: 12px;
  }

  .infrastructure-card__header-copy {
    gap: 4.119px;
  }

  .infrastructure-card__eyebrow {
    font-size: 8.239px;
  }

  .infrastructure-card__eyebrow-detail {
    font-size: 6.179px;
    letter-spacing: 0.1236px;
  }

  .infrastructure-card--entry {
    padding: 8.239px;
    gap: 6.179px;
    min-height: 70.861px;
  }

  .infrastructure-card--moderate {
    width: 297.435px;
    margin-top: 3.56px;
    margin-left: 19.04px;
    animation: infrastructure-card-float-a-mobile 6.8s ease-in-out infinite;
  }

  .infrastructure-card--high {
    width: 306.183px;
    margin-top: 3.56px;
    margin-left: 28.82px;
    animation: infrastructure-card-float-b-mobile 7.9s ease-in-out infinite;
  }

  .infrastructure-card--low {
    width: 291.26px;
    margin-top: 3.56px;
    margin-left: 4.12px;
    animation: infrastructure-card-float-c-mobile 7.2s ease-in-out infinite;
  }

  .infrastructure-chip-row {
    gap: 2.06px;
  }

  .infrastructure-chip {
    min-height: 15px;
    padding: 4.119px;
    border-radius: 3.707px;
    gap: 2.06px;
    font-size: 4.67px;
  }

  .infrastructure-chip img {
    width: 7.4px;
    height: 7.4px;
  }

  .infrastructure-card__question {
    font-size: 6.179px;
    letter-spacing: 0.1236px;
  }

  .infrastructure-card__date {
    gap: 4.119px;
    font-size: 5.355px;
    letter-spacing: 0.1071px;
  }

  .infrastructure-card__date img {
    width: 7.415px;
    height: 7.415px;
  }
}

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

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

  62% {
    transform: translate3d(1px, -5px, 0) rotate(0.18deg);
  }
}

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .infrastructure-card {
    animation: none;
  }
}