.inf-band {
  padding: var(--inf-band) 0;
  background: #e6e7eb;
}

.inf-topic {
  display: flex;
  flex-direction: column;
  gap: var(--inf-gap-card);
}

.inf-band .inf-topic + .inf-topic { margin-top: var(--space-2xl); }

/* 34.25rem é o teto do texto no desktop. A porcentagem faz a coluna
   encolher antes disso: o título é um container e não pede largura,
   então sem esse teto o parágrafo fica em 548px e o título é que diminui. */
.inf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(34.25rem, 58%));
  align-items: center;
  gap: 0;
  margin-bottom: calc(var(--inf-gap-head) - var(--inf-gap-card));
}

.inf-head h2 {
  container-type: inline-size;
  font-family: var(--sora);
  font-size: var(--inf-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

/* A linha mais longa, "Caminhos para", cabe em ~7.77em. */
.inf-head h2 .line {
  color: inherit;
  line-height: 1.2;
  font-size: min(1em, 12cqi);
}

.inf-head p {
  min-width: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 4px solid var(--slate);
  color: var(--slate);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}

.inf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--inf-col)));
  justify-content: space-between;
  gap: var(--space-l) var(--space-m);
}

.inf-stats-2 { grid-template-columns: repeat(2, minmax(0, 30rem)); }

.inf-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.inf-stat img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--inf-img);
  margin-bottom: var(--space-3);
  object-fit: contain;
  object-position: left center;
}

.inf-stats-sm img { max-height: var(--inf-img-sm); }

.inf-stat p {
  color: var(--slate);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}

.inf-stat .inf-num {
  font-family: var(--sora);
  font-size: var(--inf-num);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.24px;
  color: var(--rose);
}

.inf-stat .inf-source {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.inf-placeholder,
.inf-stat .inf-placeholder {
  width: 140px;
  max-width: 140px;
  height: 140px;
  max-height: none;
  object-fit: contain;
}

/* A caixa segue a proporção do arquivo. Em 990px a menina tem 96px de largura. */
.inf-callout > img {
  width: var(--inf-girl);
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.inf-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16.5rem;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8);
  border-radius: 24px;
  background: var(--rose);
  color: #fff;
}

.inf-callout-text { grid-template-columns: auto minmax(0, 1fr); }

.inf-callout-blue { background: var(--blue); }

.inf-callout-copy {
  display: flex;
  flex-direction: column;
  gap: var(--inf-copy-gap);
  min-width: 0;
}

.inf-callout h3 {
  font-family: var(--sora);
  font-size: var(--inf-h3);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.inf-callout-copy p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}

.inf-callout-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding-inline: var(--space-5);
  text-align: center;
}

.inf-callout-stat strong {
  margin-bottom: var(--space-1);
  font-family: var(--sora);
  font-size: var(--inf-callout-num);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
}

.inf-callout-stat span {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.inf-callout-stat .inf-callout-unit {
  font-size: calc(var(--inf-callout-num) - 0.5rem);
  font-weight: 600;
}

.inf-callout-stat small {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

.inf-callout-box {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--pink);
  border-radius: 12px;
}

.inf-close {
  padding: var(--space-14) 0;
  background: var(--grad);
  color: #fff;
}

.inf-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xl);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.inf-panel .inf-head h2,
.inf-panel .inf-head p,
.inf-panel .inf-steps h3,
.inf-panel .inf-steps p { color: #fff; }

.inf-panel .inf-head h2 { font-size: var(--text-3xl); }

.inf-panel .inf-head p { border-left-color: #fff; }

.inf-panel :focus-visible { outline-color: #fff; }

.inf-panel > .btn { align-self: center; }

.inf-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l) var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inf-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.inf-step-num {
  font-family: var(--sora);
  font-size: var(--inf-h3);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.24px;
}

.inf-steps h3 {
  margin-top: var(--space-4);
  font-family: var(--sora);
  font-size: var(--inf-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}

.inf-steps li > p:last-child {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
}

@media (max-width: 799px) {
  .inf-head,
  .inf-callout,
  .inf-callout-text,
  .inf-steps,
  .inf-steps-3 { grid-template-columns: 1fr; }

  .inf-head {
    gap: var(--space-l);
    margin-bottom: 0;
  }

  .inf-head p { max-width: 40rem; }

  .inf-callout {
    width: min(100%, 32.5rem);
    margin-inline: auto;
    justify-items: center;
    text-align: center;
  }

  .inf-callout > img {
    width: 6rem;
    justify-self: center;
  }

  .inf-callout-copy {
    justify-self: stretch;
    align-items: center;
  }

  .inf-callout-stat { justify-self: center; max-width: 18rem; }
}

@media (max-width: 579px) {
  .inf-stats { grid-template-columns: 1fr; }
}