/* 1. Abertura ------------------------------------------------------------ */
.abertura-sobre {
  margin-bottom: var(--e4);
  font-size: var(--int); line-height: var(--int-lh); letter-spacing: var(--int-ls);
  font-weight: 600; color: var(--texto-2);
}

.texto-link {
  color: var(--petroleo);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  border-radius: 4px;
}
.texto-link:hover { text-decoration-thickness: 2px; }

/* 2. O que mudou ---------------------------------------------------------- */
.mudou {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: start;
}
.mudou-texto { grid-column: 1 / span 7; padding-right: var(--e9); }
.mudou-texto p + p { margin-top: var(--e5); }
.mudou-texto p:not(.t-int) { max-inline-size: 34em; }

.aviso {
  grid-column: 8 / span 5;
  padding: var(--cartao-pad);
  background: var(--fundo); border-radius: var(--raio-cartao);
}
.aviso p { margin-top: var(--e3); }

@media (max-width: 1068px) {
  .mudou { display: block; }
  .mudou-texto { padding-right: 0; }
  .mudou-texto .t-int { max-inline-size: 30em; }
  .aviso { margin-top: var(--e9); max-inline-size: 36em; }
}
@media (max-width: 734px) {
  .aviso { margin-top: var(--e8); }
}

/* 3. Motivos ("Por que sua empresa precisa agir.")---------------------- */
.motivos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--calha); row-gap: var(--e9);
}
.motivos li { padding-right: var(--e6); }
.motivos p { margin-top: var(--e2); color: var(--texto-2); max-inline-size: 30em; }
.glifo-16 {
  fill: none; stroke: currentColor; stroke-width: 0.92;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 1068px) {
  .motivos { grid-template-columns: minmax(0, 1fr); row-gap: var(--e8); }
  .motivos li { padding-right: 0; }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .motivos li {
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--e5); align-items: start;
  }
  .motivos .cartao-icone { grid-row: 1 / span 2; margin-bottom: 0; }
  /* a primeira linha do nome centrada no ícone (caixa de 56 px) */
  .motivos h3 { grid-column: 2; margin-top: calc((56px - var(--h4) * var(--h4-lh)) / 2); }
  .motivos p { grid-column: 2; }
}

/* 4. Etapas ("Como a N1MED atua.", seção cinza: cartões brancos) ------ */
.etapas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--calha);
}
.etapa {
  display: flex; flex-direction: column; min-width: 0;
  padding: var(--cartao-pad);
  background: var(--fundo); border-radius: var(--raio-cartao);
}
.etapa-num {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; margin-bottom: var(--e5);
  border: 2px solid var(--petroleo); border-radius: 50%;
  color: var(--petroleo);
  font-size: var(--cor); line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.etapa p { margin-top: var(--e3); color: var(--texto-2); max-inline-size: 30em; }

.fecho {
  margin-top: var(--cabeca-conteudo); max-inline-size: 30em;
  font-size: var(--int); line-height: var(--int-lh); letter-spacing: var(--int-ls);
}
.fecho p + p { color: var(--texto-2); }

@media (max-width: 1068px) {
  .etapas { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .etapa {
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: var(--e5); align-items: start;
  }
  .etapa-num { grid-row: 1 / span 2; margin-bottom: 0; }
  /* a primeira linha do nome centrada no círculo (44 px) */
  .etapa h3 { grid-column: 2; margin-top: calc((2.75rem - var(--h4) * var(--h4-lh)) / 2); }
  .etapa p { grid-column: 2; }
}
@media (max-width: 734px) {
  .etapas { gap: var(--e3); }
}

/* 5. Faixa final de chamada --------------------------------------------- */
.chamada-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: center;
}
.chamada-grade .t-h2 { grid-column: 1 / span 7; padding-right: var(--e9); }
.chamada-texto { grid-column: 8 / span 5; }
.chamada-texto .botao { margin-top: var(--e6); }

/* Botão cheio sobre o petróleo: branco com texto petróleo (8,29:1). */
.botao--claro { background: var(--sobre-cor); border-color: var(--sobre-cor); color: var(--petroleo); }
.botao--claro:hover { background: var(--fundo-2); border-color: var(--fundo-2); }
.botao--claro:active { background: var(--pressionado); border-color: var(--pressionado); }

@media (max-width: 1068px) {
  .chamada-grade { display: block; }
  .chamada-grade .t-h2 { padding-right: 0; }
  .chamada-texto { margin-top: var(--titulo-intro); padding-bottom: 0; }
}

/* 6. Preferências do sistema --------------------------------------------- */
/* alto contraste: os fundos somem, então os cartões ganham contorno */
@media (forced-colors: active) {
  .aviso, .etapa { border: 1px solid CanvasText; }
  .etapa-num { border-color: CanvasText; color: CanvasText; }
  .glifo-16 { color: CanvasText; }
}