:root {
  --net-card-bg: #123f34;
  --net-card-bg-end: #1d5f4a;
  --net-card-border: #0d332a;
  --net-card-text: #ffffff;
  --net-card-muted: rgba(255, 255, 255, 0.78);
  --net-card-shadow: 0 18px 42px rgba(18, 63, 52, 0.22);
  --annual-net-card-bg: rgba(34, 116, 88, 0.08);
  --annual-net-card-border: rgba(34, 116, 88, 0.34);
  --annual-net-card-accent: #227458;
}

@media (prefers-color-scheme: dark) {
  :root {
    --net-card-bg: #214f43;
    --net-card-bg-end: #2c6b59;
    --net-card-border: #72c9aa;
    --net-card-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    --annual-net-card-bg: rgba(114, 201, 170, 0.1);
    --annual-net-card-border: rgba(114, 201, 170, 0.42);
    --annual-net-card-accent: #72c9aa;
  }
}

.headline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.18fr);
  align-items: stretch;
}

.headline-card--annual-net {
  position: relative;
  border-color: var(--annual-net-card-border);
  background:
    linear-gradient(
      135deg,
      var(--annual-net-card-bg),
      transparent 72%
    ),
    var(--surface);
  overflow: hidden;
}

.headline-card--annual-net::before {
  content: "AÑO";
  position: absolute;
  top: 16px;
  right: 17px;
  color: var(--annual-net-card-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.headline-card--annual-net span {
  max-width: 21ch;
  color: var(--annual-net-card-accent);
  font-weight: 700;
}

.headline-card--annual-net strong {
  margin-top: 12px;
  font-size: clamp(30px, 3vw, 38px);
  letter-spacing: -0.035em;
}

.headline-card--annual-net small {
  max-width: 34ch;
  line-height: 1.4;
}

.headline-card--net {
  position: relative;
  min-height: 148px;
  border-color: var(--net-card-border);
  background: linear-gradient(145deg, var(--net-card-bg), var(--net-card-bg-end));
  color: var(--net-card-text);
  box-shadow: var(--net-card-shadow);
  overflow: hidden;
  isolation: isolate;
}

.headline-card--net::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -70px;
  bottom: -95px;
  border: 28px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  z-index: -1;
}

.headline-card--net span,
.headline-card--net small {
  color: var(--net-card-muted);
}

.headline-card--net span {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.headline-card--net strong {
  margin-top: 13px;
  color: var(--net-card-text);
  font-size: clamp(34px, 3.8vw, 46px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.headline-card--net strong.amount-positive,
.headline-card--net strong.amount-negative,
.headline-card--net strong.amount-neutral {
  color: var(--net-card-text);
}

.headline-card--net small {
  max-width: 30ch;
  font-weight: 550;
  line-height: 1.4;
}

@media (max-width: 1050px) {
  .headline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .headline-card--net {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .headline-grid {
    grid-template-columns: 1fr;
  }

  .headline-card--net {
    grid-column: auto;
    min-height: 156px;
  }
}