/* Características da Oferta (Infos e Calendário) — Nova Marca
   Figma: Site Update Nova Marca — node 7997:5935 (desk) / 7997:6812 (mobo)

   Reconstruído com classes .nm-caracteristicas-oferta__* que não existem em
   css.css. Conteúdo continua vindo dos mesmos campos ACF de sempre —
   "caracteristicas_da_oferta" > "caracteristicas" (ícone/título/descrição,
   coluna da esquerda) e "etapas_da_oferta" > "etapas" (descrição/data,
   coluna da direita) — só o HTML/CSS ao redor é novo. Sem herdar
   .todoConteudo/.caracteristicas/.item/.etapas/.etapa do css.css.

   .itemAcordeonFundo/.headerItem continuam no <section>/título só pelo menu
   fixo lateral. Escopado em #caracteristicasOferta (id da seção) porque
   ".itemAcordeonFundo .headerItem h2"/".itemAcordeonFundo p" são genéricos e
   bateriam no título/parágrafos novos sem isso (mesmo problema já visto nas
   outras seções reconstruídas). */

#caracteristicasOferta .headerItem {
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  position: static !important;
}

#caracteristicasOferta .nm-caracteristicas-oferta__title {
  display: block;
  width: auto;
  margin: 0 0 var(--nm-space-5); /* 24px até as colunas */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-lg); /* 24px */
  line-height: var(--nm-line-height-lg); /* 32px */
  color: var(--nm-color-deep-blue);
}

/* Evita título duplicado: quando a coluna já tem o próprio título vindo do
   ACF (caracteristicas_da_oferta['titulo']), esconde o H2 da seção — ele
   continua no DOM (o menu fixo lateral precisa dele via
   .itemAcordeonFundo .headerItem h2), só não aparece visualmente. Sem
   col-title preenchido, o H2 volta a aparecer normalmente (display:block
   acima). */
#caracteristicasOferta .tdItem:has(.nm-caracteristicas-oferta__col-title) .nm-caracteristicas-oferta__title {
  display: none;
}

#caracteristicasOferta .nm-caracteristicas-oferta__row {
  display: flex;
  align-items: flex-start;
  gap: 30px; /* colunas em left:0/w:570 e left:600/w:570 no Figma → 600-570 = 30 */
  flex-wrap: wrap;
}

#caracteristicasOferta .nm-caracteristicas-oferta__col {
  flex: 1;
  min-width: 0;
}

#caracteristicasOferta .nm-caracteristicas-oferta__col-title {
  margin: 0 0 var(--nm-space-5); /* 24px */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-lg); /* 24px */
  line-height: var(--nm-line-height-lg); /* 32px */
  color: var(--nm-color-deep-blue);
}

/* ---------- Coluna esquerda: grade de características ---------- */

#caracteristicasOferta .nm-caracteristicas-oferta__grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--nm-space-5); /* 24px */
  column-gap: 30px;
}

#caracteristicasOferta .nm-caracteristicas-oferta__item {
  display: flex;
  align-items: center;
  gap: var(--nm-space-4); /* 16px */
  flex: 0 0 270px;
  max-width: 100%;
}

#caracteristicasOferta .nm-caracteristicas-oferta__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nm-color-off-white);
}

#caracteristicasOferta .nm-caracteristicas-oferta__icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#caracteristicasOferta .nm-caracteristicas-oferta__info {
  display: flex;
  flex-direction: column;
  gap: 0; /* 8px */
  min-width: 0;
}

#caracteristicasOferta .nm-caracteristicas-oferta__label {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
}

#caracteristicasOferta .nm-caracteristicas-oferta__value {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-semibold);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
  word-break: break-word;
}

/* ---------- Coluna direita: calendário ---------- */

#caracteristicasOferta .nm-caracteristicas-oferta__calendar {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-4); /* 16px */
}

#caracteristicasOferta .nm-caracteristicas-oferta__calendar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nm-space-4);
}

#caracteristicasOferta .nm-caracteristicas-oferta__calendar-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-semibold);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
}

#caracteristicasOferta .nm-caracteristicas-oferta__calendar-date {
  flex: 0 0 auto;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
  text-align: right;
  white-space: nowrap;
}

#caracteristicasOferta .nm-caracteristicas-oferta__calendar-divider {
  height: 1px;
  background: var(--nm-color-border);
}

#caracteristicasOferta .nm-caracteristicas-oferta__calendar-divider:last-child {
  display: none; /* sem linha depois da última data */
}

@media (max-width: 768px) {

  #caracteristicasOferta .nm-caracteristicas-oferta__row {

  gap: 64px;
 
}
  #caracteristicasOferta .headerItem,
  #caracteristicasOferta .nm-caracteristicas-oferta__row {
    padding-left: 0;
    padding-right: 0;
  }

  /* A regra base tem align-items:flex-start, pensada pra um "row" (esquerda/
     direita lado a lado). Virando "column" no mobile, align-items passa a
     controlar a largura (eixo cruzado) — flex-start faz as colunas encolherem
     pro tamanho do conteúdo em vez de ocupar 100% da largura (o "espremido"). */
  #caracteristicasOferta .nm-caracteristicas-oferta__row {
    flex-direction: column;
    align-items: stretch;
  }

  /* Figma mobile também usa 2 colunas (item mais estreito, ícone menor) */
  #caracteristicasOferta .nm-caracteristicas-oferta__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--nm-space-4); /* 16px */
    column-gap: var(--nm-space-2); /* 8px */
  }

  #caracteristicasOferta .nm-caracteristicas-oferta__item {
    flex: none;
  }

  #caracteristicasOferta .nm-caracteristicas-oferta__icon {
    width: 48px;
    height: 48px;
  }
}