/* Seção de especialidades com retrato lateral no desktop e card único no mobile. */
.specialties-section {
  padding: 120px 0 108px;
}

/* Container central alinhado ao ritmo horizontal já usado no restante da landing. */
.specialties-shell {
  width: min(1343px, calc(100% - 48px));
  margin: 0 auto;
}

/* Estrutura desktop baseada no frame do Figma, com o retrato sobreposto ao painel roxo. */
.specialties-layout {
  display: grid;
  grid-template-columns: 443px 931px;
  align-items: center;
  justify-content: center;
  column-gap: 0;
  min-height: 674px;
}

/* Bloco decorativo do médico no lado esquerdo, visível apenas fora do mobile. */
.specialties-portrait {
  position: relative;
  width: 443px;
  height: 100%;
  overflow: visible;
}

/* Retângulo ciano traseiro que aparece deslocado para a direita no desktop. */
.specialties-portrait__cyan {
  position: absolute;
  left: 63px;
  width: 334px;
  height: 100%;
  border-radius: 45px;
  background: #57d4ff;
}

/* Foto principal com recorte amplo e canto arredondado como no Figma. */
.specialties-portrait__image {
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  object-fit: contain;
  object-position: left top;
}

/* Painel roxo principal que recebe o texto e as especialidades. */
.specialties-panel {
  width: 931px;
  min-height: 660px;
  padding: 60px;
  border-radius: 45px;
  background: #845cff;
  color: #fff;
}

/* Cabeçalho da seção com a largura de texto observada no desktop do Figma. */
.specialties-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 41px;
  max-width: 680px;
}

/* Título branco com peso alto e escala específica do bloco desktop. */
.specialties-title {
  margin: 0;
  font-family: "Muring Display", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.356;
  letter-spacing: 0.76px;
}

/* Descrição de apoio com a mesma largura e respiro do frame. */
.specialties-description {
  margin: 0;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.356;
  letter-spacing: 0.4px;
}

/* Grade desktop organizada em linhas para preservar a composição do Figma. */
.specialties-chips--desktop {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Cada linha agrupa chips com respiro fixo entre eles. */
.specialties-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

/* A lista mobile fica escondida fora do breakpoint menor. */
.specialties-chips--mobile {
  display: none;
}

/* Chip comum com fundo translúcido, ícone ciano e tipografia branca. */
.specialties-chip {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  padding: 20px 30px;
  border-radius: 98px;
  background: rgba(255, 255, 255, 0.15);
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #fff;
  white-space: nowrap;
}

/* Ícones mantidos em tamanho consistente para não variar o ritmo visual. */
.specialties-chip img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
}

/* Variante mais apagada usada no último item visível do mobile, atrás do fade. */
.specialties-chip--muted {
  opacity: 0.48;
}

/* Texto final do mobile, centralizado e fora da área com fade. */
.specialties-more {
  display: none;
}

/* Wrapper do comportamento de expandir/recolher usado apenas no mobile. */
.specialties-mobile-details {
  display: flex;
  flex-direction: column;
}

/* Tablet: empilha retrato e painel mantendo a identidade desktop antes de sumir no mobile. */
@media (max-width: 1024px) {
  .specialties-section {
    padding: 96px 0 92px;
  }

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

  .specialties-layout {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .specialties-portrait {
    position: relative;
    width: min(443px, 100%);
    height: 620px;
    top: 0;
    display: none;
  }

  .specialties-portrait__cyan {
    top: 16px;
    left: 42px;
    width: calc(100% - 78px);
    height: calc(100% - 16px);
  }

  .specialties-portrait__image {
    width: 100%;
    height: 571px;
  }

  .specialties-panel {
    width: 100%;
    margin-left: 0;
    padding: 52px 40px;
  }

  .specialties-header {
    max-width: 100%;
  }

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

  .specialties-description {
    font-size: 18px;
    letter-spacing: 0.36px;
  }

  .specialties-chips--desktop {
    gap: 18px;
  }

  .specialties-chip-row {
    flex-wrap: wrap;
    gap: 18px;
  }

  .specialties-chip {
    font-size: 18px;
  }
}

/* Mobile: usa apenas o card roxo com lista vertical, fade e chamada "Ver todos". */
@media (max-width: 480px) {
  .specialties-section {
    padding: 14px 0;
  }

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

  .specialties-layout {
    display: block;
    min-height: 0;
  }

  .specialties-portrait {
    display: none;
  }

  .specialties-panel {
    position: relative;
    margin-left: 0;
    width: 332px;
    min-height: 697px;
    padding: 60px 28px;
    border-radius: 30px;
  }

  .specialties-header {
    gap: 20px;
    margin-bottom: 41px;
    max-width: 100%;
  }

  .specialties-title {
    font-size: 26px;
    letter-spacing: 0.52px;
  }

  .specialties-description {
    font-size: 16px;
    line-height: 1.356;
    letter-spacing: 0.32px;
  }

  .specialties-chips--desktop {
    display: none;
  }

  .specialties-chips--mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Altura calculada para mostrar 5 chips (~58px cada + gap) */
    min-height: auto;
  }

  .specialties-chips--mobile .specialties-chip {
    width: 100%;
    gap: 12.685px;
    padding: 14.923px 22.384px;
    border-radius: 73.123px;
    font-size: 14.923px;
    line-height: 1.4;
    letter-spacing: -0.3731px;
  }

  .specialties-chips--mobile .specialties-chip img {
    width: 20.892px;
    height: 20.892px;
    flex-basis: 20.892px;
  }

  .specialties-mobile-extra {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .specialties-mobile-extra-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .specialties-fade {
    position: absolute;
    top: 250px;
    /* Sobre a 5ª pílula */
    left: -28px;
    width: calc(100% + 56px);
    height: 120px;
    background: linear-gradient(180deg, rgba(132, 92, 255, 0) 0%, #845cff 80%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
  }

  .specialties-more {
    display: block;
    width: 100%;
    margin: 16px auto 0;
    list-style: none;
    cursor: pointer;
    font-family: "Muring Text", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.356;
    letter-spacing: 0.32px;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 3;
  }

  .specialties-more::-webkit-details-marker {
    display: none;
  }

  .specialties-mobile-details[open] .specialties-mobile-extra {
    grid-template-rows: 1fr;
    order: 1;
  }

  .specialties-mobile-details[open] .specialties-more {
    order: 2;
  }

  .specialties-mobile-details[open]~.specialties-fade {
    opacity: 0;
    pointer-events: none;
  }

  .specialties-chips--mobile:has(.specialties-mobile-details[open]) .specialties-chip--muted {
    opacity: 1;
  }

  .specialties-mobile-details[open] .specialties-more {
    margin-top: 24px;
  }

  .specialties-mobile-details[open] .specialties-more {
    font-size: 0;
  }

  .specialties-mobile-details[open] .specialties-more::after {
    content: "Ver menos ↑";
    font-size: 16px;
    line-height: 1.356;
    letter-spacing: 0.32px;
  }
}