/* 1. Abertura ------------------------------------------------------------ */
.abertura-rotulo {
  margin-bottom: var(--e3);
  font-size: var(--sub); line-height: var(--sub-lh); letter-spacing: var(--sub-ls);
  font-weight: 600; color: var(--texto-2);
}
/* nota abaixo do botão (cor no site.css) */
.abertura-nota { margin-top: var(--e4); }

/* 2. Etapas -------------------------------------------------------------- */
.etapas {
  display: grid; gap: var(--calha);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.etapas > li { display: flex; min-width: 0; }
.etapa {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--cartao-pad);
  background: var(--fundo); border-radius: var(--raio-cartao);
}
.etapa :is(h3, p) { overflow-wrap: anywhere; }
.etapa p { margin-top: var(--e3); max-inline-size: 30em; }

.etapa-marca {
  display: grid; align-items: center; justify-items: center;
  width: 44px; height: 56px; margin-bottom: var(--e4);
  color: var(--petroleo);
}
.etapa-marca > * { grid-area: 1 / 1; }
.etapa-anel {
  width: 44px; height: 44px;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
}
.etapa-num {
  font-size: var(--sub); line-height: 1; letter-spacing: 0;
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* subgrade: número, título e frase na mesma altura entre os cartões de uma linha */
@supports (grid-template-rows: subgrid) {
  .etapas { row-gap: 0; margin-bottom: calc(-1 * var(--calha)); }
  .etapas > li {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
    padding-bottom: var(--calha);
  }
  .etapa { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

@media (max-width: 734px) {
  .etapas { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  @supports (grid-template-rows: subgrid) {
    .etapas { row-gap: 0; margin-bottom: calc(-1 * var(--e3)); }
    .etapas > li { padding-bottom: var(--e3); }
  }
}

/* 3. Soluções técnicas --------------------------------------------------- */
.solucao-icone {
  display: flex; align-items: center; height: 56px; margin-bottom: var(--e4);
  color: var(--petroleo);
}
.solucao-icone svg { width: 44px; height: 44px; --i-traco: 1.15; }
.solucao :is(h3, p, li) { overflow-wrap: anywhere; }
.solucao p { margin-top: var(--e3); color: var(--texto-2); max-inline-size: 30em; }
.solucao-itens { margin-top: var(--e6); }
.solucao-itens li {
  padding-block: var(--e2);
  border-top: 1px solid var(--linha);
}

.solucoes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--calha); row-gap: var(--e9);
}
/* subgrade: ícone, nome, texto e lista na mesma altura entre as colunas */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1069px) {
    .solucoes { row-gap: 0; }
    .solucao { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .solucao-itens { align-self: start; }
  }
}

/* telas médias: nome à esquerda, texto e lista à direita */
@media (max-width: 1068px) {
  .solucoes { grid-template-columns: minmax(0, 1fr); row-gap: var(--e9); }
  .solucao {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--calha); align-items: baseline;
  }
  .solucao-cabeca { display: contents; }
  .solucao-icone { grid-column: 1; grid-row: 1; align-self: start; }
  .solucao h3 { grid-column: 1; grid-row: 2; }
  .solucao p { grid-column: 2; grid-row: 2; margin-top: 0; }
  .solucao-itens { grid-column: 2; grid-row: 3; align-self: start; }
}
/* celular: uma coluna */
@media (max-width: 734px) {
  .solucoes { row-gap: var(--e8); }
  .solucao { display: block; }
  .solucao p { margin-top: var(--e3); }
  .solucao-itens { margin-top: var(--e5); }
}

/* 4. Chamada final ------------------------------------------------------- */
.chamada-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: center;
}
.chamada .t-h2 { grid-column: 1 / span 7; padding-right: var(--e9); }
.chamada-texto { grid-column: 8 / span 5; }
.chamada-texto .botao { margin-top: var(--e7); }
@media (max-width: 1068px) {
  .chamada-grade { display: block; }
  .chamada .t-h2 { padding-right: 0; }
  .chamada-texto { padding-bottom: 0; margin-top: var(--e6); }
  .chamada .t-int { max-inline-size: 30em; }
}
@media (max-width: 734px) {
  .chamada-texto { margin-top: var(--e5); }
}

/* botão invertido sobre o petróleo: branco com texto petróleo */
.botao--claro { background: var(--fundo); border-color: var(--fundo); color: var(--petroleo); }
.botao--claro:hover { background: var(--pressionado); border-color: var(--pressionado); }
.botao--claro:active { background: var(--linha); border-color: var(--linha); }

/* 5. Preferências do sistema --------------------------------------------- */
/* alto contraste: os fundos somem, então os cartões ganham contorno */
@media (forced-colors: active) {
  .etapa { border: 1px solid CanvasText; }
  .etapa-marca, .solucao-icone { color: CanvasText; }
  .solucao-icone svg { --i-acento: CanvasText; }
}
@media print {
  .chamada { background: none; color: inherit; }
}