/* Seção introdutória da vertical médica com mensagem à esquerda e médico em destaque. */
.scalable-section {
  padding: 70px 0 0;
}

/* Container alinhado ao frame desktop específico dessa subseção. */
.scalable-shell {
  width: min(1308px, calc(100% - 48px));
  margin: 0 auto;
}

/* Desktop com coluna de conteúdo alinhada à esquerda e visual à direita. */
.scalable-layout {
  display: grid;
  grid-template-columns: minmax(0, 738px) 466.998px;
  align-items: center;
  column-gap: 80px;
  min-height: 692px;
}

/* Bloco textual único para manter logo, título, descrição e CTA no mesmo eixo. */
.scalable-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  min-width: 0;
}

/* Logo da marca acima do conteúdo principal da seção. */
.scalable-logo-link {
  display: block;
  width: fit-content;
  text-decoration: none;
}

.scalable-logo {
  width: 210px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Agrupa descrição e CTA sem quebrar o alinhamento da coluna. */
.scalable-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  min-width: 0;
}

/* Título em gradiente com largura e peso do layout desktop. */
.scalable-title {
  width: 100%;
  max-width: 675px;
  margin: 0;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 1.2px;
  background: linear-gradient(162.2deg, #57d4ff 0%, #845cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Descrição em cinza texto com a largura útil completa da coluna. */
.scalable-description {
  width: 100%;
  max-width: 738px;
  margin: 0;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.47;
}

/* CTA desktop preservando o componente escuro global. */
.scalable-cta__label {
  width: 198px;
}

/* Composição visual do médico com cartão traseiro gradiente. */
.scalable-visual {
  position: relative;
  width: 466.998px;
  height: 682.009px;
  justify-self: end;
}

/* Backdrop gradiente que aparece por trás da figura no desktop. */
.scalable-visual__backdrop {
  position: absolute;
  top: 129px;
  left: 28px;
  width: 422.276px;
  height: 520.322px;
  border-radius: 38.702px;
  background: linear-gradient(139.28deg, #57d4ff 0%, #845cff 100%);
}

/* Arte principal do médico ancorada na frente. */
.scalable-visual__image {
  position: absolute;
  inset: 0;
  width: 466.998px;
  height: 649.328px;
  display: block;
  object-fit: cover;
  border-radius: 38.702px;
}

/* Tablet: centraliza a composição e empilha o visual abaixo do conteúdo. */
@media (max-width: 1024px) {
  .scalable-section {
    padding: 96px 0;
  }

  .scalable-shell {
    width: min(100%, calc(100% - 40px));
  }

  .scalable-layout {
    grid-template-columns: 1fr;
    row-gap: 36px;
    align-items: center;
    justify-items: center;
    min-height: 0;
  }

  .scalable-content {
    width: min(720px, 100%);
    align-items: center;
    gap: 36px;
    text-align: center;
  }

  .scalable-logo {
    width: 172px;
  }

  .scalable-copy {
    width: 100%;
    align-items: center;
    gap: 28px;
  }

  .scalable-title,
  .scalable-description {
    width: 100%;
    text-align: center;
  }

  .scalable-title {
    max-width: none;
    font-size: 46px;
    line-height: 1.18;
    letter-spacing: 0.92px;
  }

  .scalable-description {
    max-width: none;
    font-size: 20px;
  }

  .scalable-visual {
    width: min(466.998px, 100%);
    height: 560px;
    justify-self: center;
  }

  .scalable-visual__backdrop {
    top: 120px;
    left: 12px;
    width: calc(100% - 36px);
    height: 430px;
  }

  .scalable-visual__image {
    width: 100%;
    height: 100%;
  }
}

/* Mobile: segue o frame com conteúdo centralizado e imagem abaixo. */
@media (max-width: 480px) {
  .scalable-section {
    padding: 30px 0;
  }

  .scalable-shell {
    width: min(335px, calc(100% - 32px));
  }

  .scalable-layout {
    grid-template-columns: 1fr;
    row-gap: 19px;
    align-items: center;
    justify-items: center;
    min-height: 0;
  }

  .scalable-content {
    display: contents;
  }

  .scalable-logo-link {
    order: 1;
    justify-self: center;
  }

  .scalable-logo {
    width: 156px;
  }

  .scalable-copy {
    display: contents;
  }

  .scalable-title {
    order: 2;
    width: 299px;
    max-width: none;
    margin: 0;
    font-size: 28px;
    line-height: 1.356;
    letter-spacing: 0.56px;
    text-align: center;
  }

  .scalable-description {
    order: 4;
    width: 335px;
    max-width: none;
    font-size: 16px;
    line-height: 1.47;
    text-align: center;
  }

  .scalable-visual {
    order: 3;
    width: 326.548px;
    height: 410px; /* Alinhado com a imagem */
  }

  .scalable-visual__backdrop {
    top: 145.12px;
    left: 0.15px;
    width: 326.548px;
    height: 264.643px;
    border-radius: 29.948px;
  }

  .scalable-visual__image {
    width: 326.548px;
    height: 410px;
    border-radius: 29.948px;
  }

  .scalable-cta {
    order: 5;
    width: 272.308px;
    height: 66.294px;
    padding: 12.43px;
    gap: 7.136px;
    justify-self: center;
  }

  .scalable-cta__label {
    width: 198.879px;
    font-size: 14.92px;
    letter-spacing: 0.2984px;
  }

  .scalable-cta__icon,
  .scalable-cta__icon img {
    width: 41.433px;
    height: 41.433px;
    flex-basis: 41.433px;
  }
}