.club500-section {
  --club500-navy: #001c42;
  --club500-pink: #ed007f;
  --club500-blue: #2c71c3;
  --club500-border: #d9e0e8;
  --club500-muted: #66758a;
  --club500-panel: #f5f7fa;
  --club500-up: #14713d;
  --club500-down: #b42318;
  color: var(--club500-navy);
  padding: 48px 0 72px;
}

.club500-subtitle {
  color: var(--club500-pink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 4px 0 10px;
  text-transform: uppercase;
}

.club500-app {
  background: #fff;
  border: 1px solid var(--club500-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 28, 66, .08);
  container-type: inline-size;
  overflow: hidden;
}

.club500-controls {
  align-items: start;
  background: var(--club500-panel);
  border-bottom: 1px solid var(--club500-border);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  padding: 24px;
}

/* Every control has the same head height, so labels and inputs line up across columns. */
.club500-field__head {
  align-items: center;
  display: flex;
  gap: 8px;
  height: 20px;
  justify-content: space-between;
  margin-bottom: 7px;
}

.club500-field__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  margin: 0;
  white-space: nowrap;
}

.club500-field[hidden] {
  display: none;
}

.club500-field select {
  background: #fff;
  border: 1px solid #aeb9c7;
  border-radius: 6px;
  color: var(--club500-navy);
  min-height: 44px;
  padding: 9px 12px;
  width: 100%;
}

.club500-switch {
  background: #fff;
  border: 1px solid #aeb9c7;
  border-radius: 6px;
  display: flex;
  height: 44px;
  overflow: hidden;
  padding: 3px;
}

.club500-switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.club500-switch__option {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  padding: 4px 8px;
  text-align: center;
}

.club500-switch input:checked + .club500-switch__option {
  background: var(--club500-navy);
  color: #fff;
}

.club500-switch input:focus-visible + .club500-switch__option {
  outline: 2px solid var(--club500-pink);
  outline-offset: -2px;
}

.club500-chart-panel {
  padding: 26px 24px 18px;
}

.club500-chart-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.club500-chart-heading h2 {
  font-size: 22px;
  margin: 0;
}

.club500-unit {
  color: var(--club500-muted);
  font-size: 13px;
}

.club500-chart {
  position: relative;
}

.club500-chart svg {
  display: block;
  overflow: visible;
  width: 100%;
}

.club500-chart-overlay {
  cursor: crosshair;
  outline: none;
  touch-action: pan-y;
}

.club500-grid-line {
  stroke: #dce3eb;
  stroke-width: 1;
}

.club500-axis-label {
  fill: var(--club500-muted);
  font-size: 12px;
}

.club500-guide-line {
  stroke: var(--club500-navy);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.club500-guide-dot {
  stroke: #fff;
  stroke-width: 2;
}

.club500-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.club500-legend li {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 7px;
}

.club500-legend__hint {
  color: var(--club500-muted);
  margin-left: auto;
}

.club500-legend__swatch {
  border-radius: 50%;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.club500-hover {
  background: var(--club500-navy);
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  margin-top: 12px;
  min-height: 38px;
  padding: 10px 0;
}

/* The box is a totals row with fixed columns in every view, so the figures never shift
   as the reader moves across the chart. In the snapshot view JavaScript copies the
   table's column widths into the custom properties, so the figures sit exactly above
   their columns; otherwise the fallback widths below apply. Cell padding matches the
   table's, so both layouts share the same right edge. */
.club500-hover__row {
  /* Bottom-aligned: a label that wraps to two lines must not lift its figure. */
  align-items: end;
  display: grid;
  grid-template-columns:
    var(--club500-col-label, minmax(0, 1fr))
    var(--club500-col-1, 10em)
    var(--club500-col-2, 11em)
    var(--club500-col-3, 8em);
}

.club500-hover__date {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  padding: 0 12px;
}

.club500-hover__date span {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}

.club500-hover__cell {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
  padding: 0 12px;
  text-align: right;
}

.club500-hover__name {
  align-items: center;
  color: rgba(255, 255, 255, .72);
  display: flex;
  font-size: 11px;
  gap: 5px;
}

.club500-hover__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* Comparing, each figure carries its change under it: wider columns, and the
   percentage drops to its own line when even those are too narrow. */
.club500-hover--compare .club500-hover__row {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 13em));
}

.club500-hover__delta {
  column-gap: 4px;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: flex-end;
}

.club500-change__amount,
.club500-change__percent {
  white-space: nowrap;
}

/* The table's green and red are too dark to read on the navy box. */
.club500-hover .club500-up {
  color: #7ee2a8;
}

.club500-hover .club500-down {
  color: #ff9e94;
}

.club500-table-panel {
  border-top: 1px solid var(--club500-border);
  padding: 24px;
}

.club500-table-heading {
  margin-bottom: 14px;
}

.club500-table-panel h2 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.club500-table-count {
  color: var(--club500-muted);
  font-size: 13px;
  margin: 6px 0 0;
}

.club500-table-scroll {
  overflow-x: auto;
}

.club500-table {
  border-collapse: collapse;
  font-size: 14px;
  min-width: 620px;
  width: 100%;
}

.club500-table th,
.club500-table td {
  border-bottom: 1px solid var(--club500-border);
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
}

.club500-table thead th {
  background: var(--club500-navy);
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: bottom;
  /* Headings wrap, as in the printed ranking: the figures, not the labels, set the widths. */
  white-space: normal;
}

.club500-table--compare {
  font-size: 13px;
  /* No floor: the columns already refuse to wrap, so the table asks for exactly
     the width its figures need and the sideways scroll stays as short as possible. */
  min-width: 0;
}

.club500-table--compare th,
.club500-table--compare td {
  padding: 9px 8px;
}

.club500-table thead .club500-group {
  border-left: 1px solid rgba(255, 255, 255, .28);
  text-align: center;
}

.club500-table .club500-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.club500-block-start {
  border-left: 1px solid var(--club500-border);
}

.club500-table thead th.club500-block-start {
  border-left: 1px solid rgba(255, 255, 255, .28);
}

/* Position and manager stay visible while the comparison scrolls sideways.
   Both need an opaque background and a stacking order above the scrolling cells. */
.club500-sticky-rank {
  left: 0;
  position: sticky;
  width: 58px;
  z-index: 2;
}

.club500-sticky-name {
  left: 58px;
  position: sticky;
  z-index: 2;
}

.club500-table thead .club500-sticky-rank,
.club500-table thead .club500-sticky-name {
  background: var(--club500-navy);
  z-index: 3;
}

.club500-table tbody .club500-sticky-rank,
.club500-table tbody .club500-sticky-name {
  background: #fff;
}

.club500-rank {
  color: var(--club500-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The percentage sits under the difference, so the columns do not get wider. */
.club500-table .club500-change__percent {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
}

.club500-rank-change {
  font-size: 11px;
  font-weight: 700;
  margin-left: 5px;
}

/* The name wraps instead of being cut off: a truncated manager is unreadable,
   and a narrower column leaves more room for the figures. */
.club500-table .club500-manager-cell {
  font-weight: 600;
  max-width: 210px;
  min-width: 150px;
  white-space: normal;
}

.club500-table__total {
  font-weight: 700;
}

.club500-missing {
  color: var(--club500-muted);
}

.club500-up {
  color: var(--club500-up);
}

.club500-down {
  color: var(--club500-down);
}

.club500-table .club500-table__empty td {
  color: var(--club500-muted);
  font-weight: 400;
  position: static;
  white-space: normal;
  width: auto;
}

.club500-table-note {
  color: var(--club500-muted);
  font-size: 13px;
  margin: 12px 0 0;
}

.club500-totals {
  display: grid;
  gap: 14px 28px;
  /* Three thirds: total IIC internacionales, Club 500 and the rest of the market. A
     lone card keeps its third instead of stretching. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.club500-totals:empty {
  display: none;
}

.club500-total {
  border-top: 3px solid var(--club500-navy);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}

.club500-total__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  /* Two lines reserved, so the figures of cards side by side stay level. */
  min-height: 2.6em;
  text-transform: uppercase;
}

.club500-total__value {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
}

.club500-total__headline {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.club500-total__headline .club500-total__delta {
  font-size: 15px;
}

/* Name, figure and change: a grid, so the figures and the changes of both lines
   stay in their own columns. */
.club500-total__parts {
  align-items: center;
  display: grid;
  font-size: 13px;
  gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.club500-totals--compare .club500-total__parts {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.club500-total__part {
  align-items: center;
  color: var(--club500-muted);
  display: flex;
  gap: 6px;
}

.club500-total__figure {
  color: var(--club500-navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.club500-total__delta {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.club500-total__note {
  color: var(--club500-muted);
  font-size: 12px;
  margin-top: 2px;
}

.club500-source {
  border-top: 1px solid var(--club500-border);
  color: var(--club500-muted);
  font-size: 12px;
  margin: 20px 0 0;
  padding-top: 12px;
}

.club500-methodology {
  color: #516177;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 28px;
  max-width: 860px;
}

.club500-methodology h2 {
  color: var(--club500-navy);
  font-size: 18px;
}

.club500-error,
.club500-loading {
  padding: 32px;
}

@container (max-width: 760px) {
  .club500-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .club500-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .club500-field--view {
    grid-column: 1 / -1;
  }

  /* Tablet: the snapshot table should fit without sideways scrolling. */
  .club500-table {
    font-size: 13px;
    min-width: 0;
  }

  .club500-table th,
  .club500-table td {
    padding: 9px 8px;
  }

  .club500-table .club500-manager-cell {
    max-width: 170px;
    min-width: 120px;
  }
}

@container (max-width: 520px) {
  .club500-controls {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .club500-totals {
    grid-template-columns: 1fr;
  }

  .club500-total__label {
    min-height: 0;
  }

  .club500-chart-panel,
  .club500-table-panel {
    padding: 20px 16px;
  }

  .club500-axis-label {
    font-size: 10px;
  }

  .club500-hover:not(.club500-hover--aligned) .club500-hover__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 8px;
  }

  .club500-hover:not(.club500-hover--aligned) .club500-hover__date {
    grid-column: 1 / -1;
  }

  .club500-sticky-rank {
    width: 38px;
  }

  .club500-sticky-name {
    left: 38px;
  }

  /* On a phone the two pinned columns must not eat the figures: narrower, and the
     manager name wraps instead of being cut off. */
  .club500-table .club500-manager-cell {
    max-width: 116px;
    min-width: 90px;
    white-space: normal;
  }

  .club500-table {
    font-size: 13px;
    min-width: 0;
  }

  .club500-table--compare {
    font-size: 12px;
    min-width: 0;
  }

  .club500-table th,
  .club500-table td {
    padding: 9px 7px;
  }

  .club500-table--compare th,
  .club500-table--compare td {
    padding: 8px 6px;
  }
}

@media (max-width: 767px) {
  .club500-section {
    padding: 32px 0 48px;
  }
}

/* Between 768px and 1019px the theme hides the left ad column and pins `main` to the
   left edge (min-width: 624px), so the module would sit ~12px from the screen. Keep a
   gutter that matches the header's. */
@media (min-width: 768px) and (max-width: 1019px) {
  .club500-section > .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}