/* Capa de legibilidad compartida para Global NEWS. */
:root {
  --muted: #405563;
  --green: #007a4d;
  --green-bg: #d9f4e7;
  --red: #b4233b;
  --red-bg: #ffe4e8;
}

body {
  font-size: 17px;
  line-height: 1.62;
}

.topbar {
  font-size: 12px;
}

.eyebrow,
.name,
.spotlight small,
.market-box small,
.driver small {
  font-size: 11px;
}

.hero p {
  color: #f1f7fa;
  font-size: 18px;
  line-height: 1.58;
}

.section-title h2 {
  font-size: 17px;
}

.section-title span,
.commodity .unit,
.figure span {
  color: #405563;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.metric,
.commodity {
  padding: 16px 14px;
}

.value {
  font-size: 20px;
}

.change {
  padding: 4px 9px;
  font-size: 12px;
}

.up,
.down {
  font-weight: 900;
}

.card h3 {
  font-size: 20px;
}

.badge {
  font-size: 11px;
}

.row {
  padding: 9px 0;
  font-size: 15px;
}

.card p,
.spotlight p,
.driver p,
.reading p {
  color: #304755;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.62;
}

.spotlight h3 {
  font-size: 27px;
}

.figure strong {
  font-size: 20px;
}

.market-box .level {
  font-size: 32px;
}

.market-box .sub {
  color: #d9e8ef;
  font-size: 13px;
}

/* El verde general es accesible sobre blanco; sobre azul necesita más luz. */
.market-box .up {
  color: #55e3ad !important;
}

.market-box .down {
  color: #ff8ca0 !important;
}

.hero .up {
  color: #55e3ad !important;
}

.hero .down {
  color: #ff9bad !important;
}

.driver h3 {
  font-size: 26px;
}

.driver-box strong {
  font-size: 30px;
}

.sources {
  color: #536875;
  font-size: 11px;
  line-height: 1.55;
}

.signature .person {
  font-size: 20px;
}

.signature .role {
  color: #344c5a;
  font-size: 15px;
}

.signature .relationship,
.contact {
  font-size: 14px;
}

.disclaimer {
  color: #536875;
  font-size: 11px;
  line-height: 1.5;
}

.print {
  font-size: 13px;
}

@media (max-width: 540px) {
  body {
    font-size: 17px;
  }

  .topbar {
    font-size: 10px;
    line-height: 1.45;
  }

  .hero p {
    font-size: 17px;
  }

  .section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .section-title h2 {
    font-size: 16px;
  }

  .value {
    font-size: 19px;
  }

  .row {
    font-size: 15px;
  }

  .card p,
  .spotlight p,
  .driver p,
  .reading p {
    font-size: 16px;
  }
}