/* Home: Hero */
.s-hero {
  position: relative;
}

.s-hero .swiper-button-next,
.s-hero .swiper-button-prev {
  position: absolute;
  top: 50%;
  bottom: auto;
  margin-top: 0;
  transform: translateY(-50%) scale(0.75);
  z-index: 2;

  font-weight: bold;
  color: var(--iipc-gray-lighen);
}

.s-hero .swiper-button-next {
  right: 12px;
  left: auto;
}

.s-hero .swiper-button-prev {
  left: 12px;
  right: auto;
}

.s-hero #slide-content {
  margin-bottom: 30px;
  overflow: hidden;
  max-width: 100%;
}

.s-hero .swiper-slide {
  max-width: 100%;
  box-sizing: border-box;
}

.slide {
  margin: 0;
  padding-block: 36px;
  /* row do Bootstrap: gutters laterais já no container */
  width: 100%;
  max-width: 100%;
}

.slide > [class*="col-"] {
  min-width: 0;
}

.slide-details {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.slide-details > strong {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 16px;
  color: var(--iipc-yellow);
}

.slide-details > .slide-date,
.slide-details > span.slide-date {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  box-sizing: border-box;
  position: relative;
  padding: 8px 14px;
  font-size: 16px;
  line-height: 1.4;

  background: var(--iipc-gray-lighen);
  color: var(--black);
}

.slide-details h2 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1.15;
  color: var(--iipc-gray-medium);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.slide-details h2 > span {
  color: var(--iipc-blue-extra-lighten);
}

.slide-details p {
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.4;
  color: var(--iipc-gray-medium);
  overflow-wrap: anywhere;
  max-width: 100%;
}

.slide-details p strong {
  font-weight: 700;
  color: inherit;
}

.slide-details > a {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  white-space: normal;
}

.slide-image {
  display: block;
  margin: 24px auto 0;
  max-width: 530px;
  width: 100%;
}

.slide-media {
  position: relative;
  width: 100%;
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}

.slide-media .slide-image {
  margin: 0;
  max-width: 100%;
}

.slide-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Home: Niveis */
.niveis-container {
  padding-block: 48px;
  background: #E7EAEC;
}

.nivel-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

.nivel-list .nivel-item {
  position: relative;
  overflow: hidden;
  display: block;
  transform-origin: center center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nivel-list .nivel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent linear-gradient(180deg, #6B8FEB00 0%, #113B72 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
  transition: opacity 0.15s ease;
  z-index: 1;
}

.nivel-list .nivel-item img {
  display: block;

  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transition: transform 0.15s ease;
}

.nivel-list .nivel-item strong {
  display: block;

  padding: 48px 24px;
  width: 100%;

  font-size: 18px;

  position: absolute;
  left: 0;
  bottom: 0;

  color: var(--white);

  z-index: 100;
  transition: transform 0.15s ease;
}

.nivel-list .nivel-item:hover::before {
  opacity: 1;
}

.nivel-list .nivel-item:hover {
  transform: scale(1.08);
  z-index: 3;
  box-shadow: 0 10px 30px rgba(10, 27, 56, 0.35);
}

/* Desktop grid: sem scale — tamanho vem de width/height fixos */
.nivel-list--grid .nivel-item:hover,
.nivel-list--grid .nivel-item:hover img {
  transform: none;
}

.nivel-list .nivel-item:hover img {
  transform: scale(1.03);
}

.nivel-list .nivel-item:hover strong {
  transform: translateY(-2px);
}

/* Home: Níveis no mobile em carrossel */
.niveis-container #slide-niveis {
  position: relative;
}

@media (max-width: 991.98px) {
  /* O Swiper precisa de overflow hidden no container para funcionar */
  .nivel-list {
    overflow: hidden;
  }

  /* A seção de níveis é full-width intencionalmente,
     mas o header (título) respeita o container Bootstrap */
  .s-niveis > header.container {
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
  }

  .niveis-container #slide-niveis {
    overflow: hidden;
    touch-action: pan-y;
  }

  .niveis-container #slide-niveis .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0;
  }

  .niveis-container #slide-niveis .nivel-item {
    height: 430px;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Swiper usa transform inline no .swiper-slide (= .nivel-item);
     scale no card seria sobrescrito — zoom só na imagem. */
  .niveis-container #slide-niveis .nivel-item:hover {
    transform: none;
  }

  .niveis-container #slide-niveis .nivel-item:hover img,
  .niveis-container #slide-niveis .nivel-item:focus-visible img,
  .niveis-container #slide-niveis .nivel-item.swiper-slide-active img {
    transform: scale(1.08);
  }

  .niveis-container #slide-niveis .nivel-item:hover strong,
  .niveis-container #slide-niveis .nivel-item:focus-visible strong,
  .niveis-container #slide-niveis .nivel-item.swiper-slide-active strong {
    transform: translateY(-4px);
  }

  .niveis-container #slide-niveis .swiper-slide img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  .niveis-container #slide-niveis .swiper-button-next,
  .niveis-container #slide-niveis .swiper-button-prev {
    /* Mesmo tamanho das setas do hero mobile */
    --swiper-navigation-size: 36px;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    margin-top: 0;
    border-radius: 0;
    background: transparent;
    color: var(--iipc-gray-lighen, #c4c4c4);
    z-index: 30;
    pointer-events: auto;
    font-weight: bold;
  }

  .niveis-container #slide-niveis .swiper-button-next {
    right: 8px;
  }

  .niveis-container #slide-niveis .swiper-button-prev {
    left: 8px;
  }

  .niveis-container #slide-niveis .swiper-button-next::after,
  .niveis-container #slide-niveis .swiper-button-prev::after {
    font-size: var(--swiper-navigation-size);
    font-weight: bold;
  }

  /* Botão "Ver Todos" — respiro antes de Destaques */
  .niveis-container {
    padding-bottom: 40px;
  }

  .niveis-container .niveis-ver-todos {
    --bs-gutter-x: 0;
    margin-top: 28px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
  }

  .s-mais-visitados.s-destaques {
    padding-top: 36px;
  }
}

/* Home: Cursos / Destaques */
.mais-visitados-container {
  position: relative;
}

/* Wrapper externo: reserva a faixa lateral das setas SEM padding no próprio
   elemento .swiper (o padding no Swiper faz ele calcular a largura errada e
   mostrar um card parcial extra). As setas ficam nessa faixa; o #slide-curso
   ocupa só a área interna, então o Swiper dimensiona exatamente 4 slides. */
.mais-visitados-container .destaques-swiper-wrap {
  position: relative;
}

.mais-visitados-container #slide-curso {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Neutraliza .curso-list (margin/gap de listagem estática) no carrossel */
  margin-inline: 0;
  margin-bottom: 0;
  display: block;
}

/* Destaques: área mais larga que o container-full padrão (1680) para caber
   4 cards + gap 30px sem esmagar os cards (ref. artboard ~1800). */
@media (min-width: 992px) {
  .mais-visitados-container .container.container-full {
    max-width: 1800px !important;
  }
}

/* Título Destaques = mesmo ritmo tipográfico de Níveis (.title global) */
.s-mais-visitados .title,
.s-destaques .title {
  width: auto;
  max-width: none;
}

.s-mais-visitados .title::before,
.s-destaques .title::before {
  width: 36px;
}

/* Desktop: 90px entre a seção de cima e a faixa azul / título Destaques */
@media (min-width: 992px) {
  .s-mais-visitados.s-destaques {
    margin-top: 90px;
  }
}

/* Cards do swiper de destaques — altura fixa no desktop (título + descrição curta). */
@media (min-width: 768px) {
  .mais-visitados-container .curso-item,
  .s-destaques .curso-item {
    height: 560px;
    min-height: 560px;
    max-height: 560px;
    box-shadow: none;
  }

  .mais-visitados-container .curso-item .curso-image,
  .s-destaques .curso-item .curso-image {
    background: #F7F7F7;
    line-height: 0;
  }
}

.mais-visitados-container .curso-item,
.s-destaques .curso-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
}

.mais-visitados-container .curso-item .curso-image,
.s-destaques .curso-item .curso-image {
  height: 200px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  box-sizing: content-box;
}

.mais-visitados-container .curso-item .curso-image:has(.curso-status-badge),
.s-destaques .curso-item .curso-image:has(.curso-status-badge) {
  padding-bottom: 40px;
}

/* Faixa INSCRITO / NÃO INSCRITO (mesmo padrão da listagem de cursos) */
.mais-visitados-container .curso-status-badge,
.s-destaques .curso-status-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: normal normal bold 16px/24px "Roboto", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 8px 12px;
  box-sizing: border-box;
  z-index: 2;
}

.mais-visitados-container .curso-status-badge--inscrito,
.s-destaques .curso-status-badge--inscrito {
  background-color: #D8B50A;
  color: #ffffff;
}

.mais-visitados-container .curso-status-badge--nao-inscrito,
.s-destaques .curso-status-badge--nao-inscrito {
  background-color: #ffffff;
  color: #D8B50A;
}

.mais-visitados-container .curso-item .curso-image picture,
.s-destaques .curso-item .curso-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mais-visitados-container .curso-item .curso-image img,
.s-destaques .curso-item .curso-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mais-visitados-container .curso-item .curso-details,
.s-destaques .curso-item .curso-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  padding: 22px 24px;
}

/* Metadados mais compactos para liberar espaço ao título/descrição */
.mais-visitados-container .curso-item .curso-metadata,
.s-destaques .curso-item .curso-metadata {
  margin-bottom: 10px;
}

.mais-visitados-container .curso-item .curso-body,
.s-destaques .curso-item .curso-body {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Título: até 2 linhas; o restante some com reticências */
.mais-visitados-container .curso-item .curso-body h3,
.s-destaques .curso-item .curso-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.3em * 2);
  flex-shrink: 0;
}

/* Descrição: sempre 2 linhas (não comprime nem sobrepõe o preço) */
.mais-visitados-container .curso-item .curso-body p,
.s-destaques .curso-item .curso-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-height: 3em;
}

.mais-visitados-container .curso-item .curso-footer,
.s-destaques .curso-item .curso-footer {
  flex-shrink: 0;
  margin-bottom: 12px;
}

.mais-visitados-container .curso-item .btn-curso,
.s-destaques .curso-item .btn-curso {
  flex-shrink: 0;
  width: 100%;
}

/* Desktop Destaques: título/descrição no topo; preço e pré-requisito alinhados entre cards */
@media (min-width: 768px) {
  .mais-visitados-container .curso-item .curso-body,
  .s-destaques .curso-item .curso-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .mais-visitados-container .curso-item .curso-body h3,
  .s-destaques .curso-item .curso-body h3 {
    min-height: calc(1.3em * 2);
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-body p,
  .s-destaques .curso-item .curso-body p {
    min-height: 3em;
    max-height: 3em;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-body:not(:has(> p))::after,
  .s-destaques .curso-item .curso-body:not(:has(> p))::after {
    content: '';
    display: block;
    min-height: 3em;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-footer,
  .s-destaques .curso-item .curso-footer {
    margin-top: auto;
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-footer span,
  .s-destaques .curso-item .curso-footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mais-visitados-container .curso-item .btn-curso,
  .s-destaques .curso-item .btn-curso {
    margin-top: 0;
  }
}

/* Desktop/tablet: faixa lateral (56px) no wrapper para as setas; o #slide-curso
   fica com a largura interna e o Swiper calcula exatamente 4 slides. */
@media (min-width: 768px) {
  .mais-visitados-container .destaques-swiper-wrap {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* Título Destaques alinhado ao título Níveis (mesmo container Bootstrap). */
@media (min-width: 1366px) and (max-width: 1919.98px) {
  .s-mais-visitados > header.container,
  .s-destaques > header.container,
  .s-niveis > header.container {
    max-width: calc(1320px * 100vw / 1920px) !important;
  }

  /* Níveis: margem lateral 120 do artboard */
  .niveis-container .container-fluid {
    max-width: 1920px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .mais-visitados-container .container.container-full {
    max-width: calc(1800px * 100vw / 1920px) !important;
  }

  .mais-visitados-container .destaques-swiper-wrap {
    padding-left: calc(56px * 100vw / 1920px);
    padding-right: calc(56px * 100vw / 1920px);
  }
}

.mais-visitados-container .destaques-swiper-wrap .swiper-button-next::after,
.mais-visitados-container .destaques-swiper-wrap .swiper-button-prev::after {
  display: none;
}

.mais-visitados-container .destaques-swiper-wrap .swiper-button-next > i,
.mais-visitados-container .destaques-swiper-wrap .swiper-button-prev > i {
  color: var(--iipc-gray-medium);
  font-size: 28px;
}

/* Setas na faixa lateral do wrapper; mesmo inset dos dois lados */
.mais-visitados-container .destaques-swiper-wrap .swiper-button-prev,
.mais-visitados-container .destaques-swiper-wrap .swiper-button-next {
  width: 44px;
  height: 44px;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.mais-visitados-container .destaques-swiper-wrap .swiper-button-prev {
  left: 6px;
  right: auto;
}

.mais-visitados-container .destaques-swiper-wrap .swiper-button-next {
  right: 6px;
  left: auto;
}

/* Mobile — card 260×440px (design), margem esquerda 30px */
@media (max-width: 767.98px) {
  .s-mais-visitados > header.container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .s-mais-visitados .title {
    font: normal normal bold 32px/40px "Roboto", sans-serif;
    margin-bottom: 24px;
    max-width: none;
  }

  .mais-visitados-container .container,
  .mais-visitados-container .container-full {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
    overflow: hidden;
  }

  /* Wrap: setas na margem; o Swiper (#slide-curso) recorta e mostra 1 card */
  .mais-visitados-container .destaques-swiper-wrap {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }

  .mais-visitados-container #slide-curso {
    padding-left: 0;
    padding-right: 0;
    margin-left: 28px;
    margin-right: 28px;
    overflow: hidden !important;
    width: auto;
    max-width: 100%;
  }

  .mais-visitados-container #slide-curso .swiper-wrapper {
    display: flex !important;
  }

  .mais-visitados-container #slide-curso .swiper-slide {
    width: 100% !important;
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }

  .mais-visitados-container .curso-item,
  .s-mais-visitados .curso-item,
  .s-destaques .curso-item {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #F7F7F7;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
  }

  .mais-visitados-container .curso-item .curso-image,
  .s-mais-visitados .curso-item .curso-image,
  .s-destaques .curso-item .curso-image {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .mais-visitados-container .curso-item .curso-image:has(.curso-status-badge),
  .s-mais-visitados .curso-item .curso-image:has(.curso-status-badge),
  .s-destaques .curso-item .curso-image:has(.curso-status-badge) {
    padding-bottom: 0;
  }

  .mais-visitados-container .curso-item .curso-image picture,
  .s-mais-visitados .curso-item .curso-image picture,
  .s-destaques .curso-item .curso-image picture {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-image img,
  .s-mais-visitados .curso-item .curso-image img,
  .s-destaques .curso-item .curso-image img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .mais-visitados-container .curso-status-badge,
  .s-mais-visitados .curso-status-badge,
  .s-destaques .curso-status-badge {
    position: relative;
    bottom: auto;
    left: auto;
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-details,
  .s-mais-visitados .curso-item .curso-details {
    padding: 16px 16px 18px;
    background: #F7F7F7;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .mais-visitados-container .curso-item .curso-metadata,
  .s-mais-visitados .curso-item .curso-metadata {
    margin-bottom: 12px;
    gap: 8px;
    font-size: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .mais-visitados-container .curso-item .curso-metadata .curso-date,
  .s-mais-visitados .curso-item .curso-metadata .curso-date {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    line-height: normal;
    color: #494B51;
    background: #DEDEDE;
  }

  .mais-visitados-container .curso-item .curso-body,
  .s-mais-visitados .curso-item .curso-body {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-height: 0;
  }

  .mais-visitados-container .curso-item .curso-body h3,
  .s-mais-visitados .curso-item .curso-body h3 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 8px;
    -webkit-line-clamp: 2;
    min-height: calc(1.3em * 2);
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-body p,
  .s-mais-visitados .curso-item .curso-body p {
    font-size: 13px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    min-height: calc(13px * 1.4 * 2);
    flex-shrink: 0;
  }

  .mais-visitados-container .curso-item .curso-body:not(:has(> p))::after,
  .s-mais-visitados .curso-item .curso-body:not(:has(> p))::after {
    content: '';
    display: block;
    min-height: calc(13px * 1.4 * 2);
  }

  .mais-visitados-container .curso-item .curso-footer,
  .s-mais-visitados .curso-item .curso-footer {
    margin-top: auto;
    margin-bottom: 14px;
  }

  .mais-visitados-container .curso-item .curso-footer span,
  .s-mais-visitados .curso-item .curso-footer span {
    font-size: 11px;
  }

  .mais-visitados-container .curso-item .curso-footer strong,
  .s-mais-visitados .curso-item .curso-footer strong {
    font-size: 14px;
  }

  .mais-visitados-container .curso-item .btn-curso,
  .s-mais-visitados .curso-item .btn-curso {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
  }

  /* Setas por cima das bordas do card (na faixa do margin do swiper) */
  .mais-visitados-container .destaques-swiper-wrap .swiper-button-prev,
  .mais-visitados-container .destaques-swiper-wrap .swiper-button-next {
    width: 28px;
    height: 28px;
    margin-top: 0;
    top: 58%;
    transform: translateY(-50%);
    color: #494B51;
    z-index: 20;
  }

  .mais-visitados-container .destaques-swiper-wrap .swiper-button-prev > i,
  .mais-visitados-container .destaques-swiper-wrap .swiper-button-next > i {
    font-size: 18px;
    color: #494B51;
  }

  .mais-visitados-container .destaques-swiper-wrap .swiper-button-prev {
    left: 2px;
  }

  .mais-visitados-container .destaques-swiper-wrap .swiper-button-next {
    right: 2px;
  }
}

/* Mobile/tablet: hero — grafismo fixo (bg-hero-mob) atrás da foto */
@media (max-width: 991.98px) {
  .s-hero {
    padding-bottom: 24px;
    overflow: visible;
    background: none;
  }

  .s-hero .container {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
    overflow: visible;
  }

  .s-hero #slide-content {
    margin-bottom: 0;
    overflow: visible;
  }

  .s-hero #slide-content .swiper-wrapper,
  .s-hero #slide-content .swiper-slide,
  .s-hero #slide-content .slide,
  .s-hero #slide-content .slide > [class*="col-"] {
    overflow: visible;
  }

  .slide {
    padding-block: 28px 32px;
    --bs-gutter-x: 1rem;
  }

  .slide-details {
    gap: 14px;
  }

  .slide-details > a.btn {
    display: none !important;
  }

  .slide-details > .slide-date,
  .slide-details > span.slide-date {
    padding: 8px 12px;
    font-size: 15px;
  }

  .slide-details h2 {
    font-size: clamp(26px, 8vw, 32px);
  }

  .slide-details p {
    font-size: 17px;
  }

  .slide-media {
    position: relative;
    margin-top: 16px;
    max-width: min(530px, 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    padding-inline: 0;
    box-sizing: border-box;
  }

  /* Grafismo mobile — bg-hero-mob.png no slot 530×438, atrás da foto */
  .slide-media::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    aspect-ratio: 530 / 438;
    background: url('../../images/bg-hero-mob.png') center / contain no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  .slide-image {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 530px;
    margin: 0 auto;
  }

  .slide-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 530px;
    height: auto;
    aspect-ratio: 530 / 438;
    object-fit: contain;
    object-position: center;
    margin-inline: auto;
    display: block;
  }

  .slide-cta-mobile {
    display: flex;
    width: auto;
    max-width: 100%;
    margin: 20px auto 0;
    align-self: center;
  }

  .slide > .col-12.d-lg-none {
    display: flex;
    justify-content: center;
  }

  .s-hero .slide-media .swiper-button-next,
  .s-hero .slide-media .swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) scale(0.85);
    z-index: 2;
    --swiper-navigation-size: 36px;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    color: var(--iipc-gray-lighen);
    background: transparent;
    border: 0;
    padding: 0;
    font-weight: bold;
  }

  .s-hero .slide-media .swiper-button-next::after,
  .s-hero .slide-media .swiper-button-prev::after {
    font-size: var(--swiper-navigation-size);
  }

  .s-hero .slide-media .swiper-button-prev {
    left: -4px !important;
    right: auto !important;
  }

  .s-hero .slide-media .swiper-button-next {
    right: -4px !important;
    left: auto !important;
  }

  .s-niveis {
    margin-top: 8px;
  }

  .s-niveis > header.container {
    margin-bottom: 8px;
  }
}

/* Responsive desktop */
@media (min-width: 992px) {
  .s-hero {
    margin-block: 40px;
    overflow: visible;
    /* Artboard 1920×712: escala com a viewport (em 1366 fica a mesma composição de 1920) */
    background: url('../../images/bg-hero@2x.jpg') no-repeat top center;
    background-size: min(1920px, 100vw) auto;
    min-height: calc(min(1920px, 100vw) * 712 / 1920);
    --swiper-navigation-size: 48px;
    /* Borda direita da bola no artboard 1920 (≈250 + 24px) */
    --hero-ball-end: calc(100vw * 274 / 1920);
    --hero-ball-gap: 16px;
  }

  .s-hero .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .s-hero #slide-content {
    margin-bottom: 0;
    overflow: hidden;
  }

  .slide {
    padding-block: 24px 40px;
  }

  .slide-details {
    gap: 18px;
    padding-right: 1.5rem;
    /* Em telas largas a margem do container já afasta a bola; 40px cobre a folga */
    padding-left: 40px;
  }

  .slide-details > .slide-date,
  .slide-details > span.slide-date {
    padding: 8px 16px;
    font-size: 18px;
  }

  .slide-details h2 {
    font-size: clamp(40px, 3.6vw, 64px);
    line-height: 1.08;
  }

  .slide-details p {
    font-size: clamp(18px, 1.35vw, 24px);
  }

  .slide-details > a {
    width: auto;
    align-self: flex-start;
  }

  .slide-image {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 795px;
  }

  /* Setas nas bordas do container (próximas do slide) */
  .s-hero .swiper-button-next,
  .s-hero .swiper-button-prev {
    position: absolute;
    top: 50%;
    bottom: auto;
    margin-top: 0;
    transform: translateY(-50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    color: var(--iipc-gray-lighen);
    font-weight: bold;
    z-index: 2;
  }

  .s-hero .swiper-button-next::after,
  .s-hero .swiper-button-prev::after {
    font-size: var(--swiper-navigation-size);
  }

  .s-hero .swiper-button-next {
    right: 0;
    left: auto;
  }

  .s-hero .swiper-button-prev {
    left: 0;
    right: auto;
  }

  /* Home: Niveis — 255×375 / hover 540×494; gap 30; margem 120 */
  .niveis-container .container-fluid {
    max-width: 1920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 120px;
    padding-right: 120px;
  }

  .s-niveis,
  .niveis-container {
    overflow: visible;
  }

  .niveis-container {
    padding-top: 139px;
    padding-bottom: 35px;
    min-height: 800px;
    box-sizing: border-box;

    background: transparent url('../../images/bg-niveis@2x.jpg') 0% 0% no-repeat padding-box;
    background-size: 1920px 800px;
    background-position: center top;
    opacity: 1;
  }

  /* Cards em fluxo. 255×375 → 540×494 */
  .niveis-container .nivel-list--grid {
    display: block !important;
    width: 100%;
    padding-block: 0;
    overflow: visible !important;
  }

  .niveis-container .nivel-list--grid .nivel-list__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    min-height: 494px;
    height: 494px;
    margin: 0 !important;
    --bs-gutter-x: 0;
    overflow: visible !important;
  }

  .niveis-container .nivel-list--grid .nivel-list__col {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    overflow: visible !important;
  }

  .niveis-container .nivel-list--grid .nivel-list__col:hover {
    z-index: 5;
  }

  .niveis-container .nivel-list--grid .nivel-item {
    display: block !important;
    position: relative !important;
    width: 255px !important;
    height: 375px !important;
    margin: 0 !important;
    overflow: hidden;
    transform: none !important;
    transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
  }

  .niveis-container .nivel-list--grid .nivel-list__col:hover .nivel-item {
    width: 540px !important;
    height: 494px !important;
    box-shadow: 0 8px 22px rgba(10, 27, 56, 0.28);
    transform: none !important;
  }

  .niveis-container .nivel-list--grid .nivel-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }

  .niveis-container .nivel-list--grid .nivel-item:hover,
  .niveis-container .nivel-list--grid .nivel-item:hover img,
  .niveis-container .nivel-list--grid .nivel-item:hover strong {
    transform: none !important;
  }

  .niveis-container .nivel-list--grid .nivel-item strong {
    padding: 28px 20px;
    font-size: 16px;
  }

  .niveis-container .niveis-ver-todos {
    --bs-gutter-x: 0;
    margin-top: 24px;
    margin-bottom: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .niveis-container .niveis-ver-todos .col-12 {
    display: flex;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .niveis-container .niveis-ver-todos__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 12px 40px;
    white-space: nowrap;
  }
}

/*
 * Abaixo de 1920: escala o fundo com a largura para não cortar a bola à esquerda
 * (ex.: 1366). Em 1920+ o artboard fica fixo em 1920px (regra base do desktop).
 * Níveis: padding lateral pra o scale(1.08) do card não ser cortado pelo overflow-x.
 */
@media (min-width: 992px) and (max-width: 1919.98px) {
  .s-hero {
    background-size: 100% auto;
    min-height: calc(100vw * 712 / 1920);
  }

  .niveis-container {
    min-height: calc(100vw * 800 / 1920);
    background-size: 100% 100%;
    padding-top: calc(58vw * 139 / 1920);
    padding-bottom: calc(30vw * 201 / 1920);
  }

  /* Margem lateral 120 (artboard) — garante folga no 1º e no último card (ex.: 1366) */
  .niveis-container .container-fluid {
    max-width: 1920px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(100vw * 120 / 1920) !important;
    padding-right: calc(100vw * 120 / 1920) !important;
    box-sizing: border-box;
  }

  .niveis-container .nivel-list--grid {
    width: 100%;
    overflow: visible !important;
  }

  /* Grupo centrado: 5 cards sempre visíveis, sem encostar nas bordas */
  .niveis-container .nivel-list--grid .nivel-list__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: calc(100vw * 30 / 1920);
    width: max-content !important;
    max-width: 100%;
    min-height: calc(100vw * 494 / 1920);
    height: calc(100vw * 494 / 1920);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .niveis-container .nivel-list--grid .nivel-list__col {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .niveis-container .nivel-list--grid .nivel-item {
    width: calc(100vw * 255 / 1920) !important;
    height: calc(100vw * 375 / 1920) !important;
  }

  .niveis-container .nivel-list--grid .nivel-list__col:hover .nivel-item {
    width: calc(100vw * 540 / 1920) !important;
    height: calc(100vw * 494 / 1920) !important;
  }

  /* 1366 e telas médias: quebra após «Cursos» / «Cursos de» / «Curso» */
  .niveis-container .nivel-list--grid .nivel-item strong .nivel-item__title-line1 {
    display: block;
  }
}

/*
 * Abaixo de 1400 o container (960/1140) fica mais largo em relação ao bg 100vw:
 * a bola do grafismo encosta na data. Compensa o padding para manter a mesma
 * folga visual de 1920 (bola + 16px).
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .s-hero {
    --swiper-navigation-size: 44px;
  }

  .s-hero .slide-details {
    padding-left: max(
      40px,
      calc(var(--hero-ball-end) + var(--hero-ball-gap) - (100vw - 960px) / 2 - 1.5rem)
    );
  }

  .s-hero .slide-details h2 {
    font-size: 40px;
  }

  .s-hero .slide-details p {
    font-size: 18px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .s-hero {
    --swiper-navigation-size: 44px;
  }

  .s-hero .slide-details {
    padding-left: max(
      40px,
      calc(var(--hero-ball-end) + var(--hero-ball-gap) - (100vw - 1140px) / 2 - 1.5rem)
    );
  }

  .s-hero .slide-details h2 {
    font-size: 44px;
  }

  .s-hero .slide-details p {
    font-size: 20px;
  }
}

/*
 * 1400–1920: container xxl (1320px). Sem a compensação da bola (feita até 1399),
 * o grafismo do fundo cobre o texto — o mesmo ajuste de 1366, com a caixa 1320.
 */
@media (min-width: 1400px) and (max-width: 1919.98px) {
  .s-hero .slide-details {
    padding-left: max(
      40px,
      calc(var(--hero-ball-end) + var(--hero-ball-gap) - (100vw - 1320px) / 2 - 1.5rem)
    );
  }
}