/* RCA Smart Analyst — shared "for TGH" visual language.
   Black canvas + the TGH green→blue gradient, reserved for brand moments
   (lockup, primary buttons, one hero border per page) — not for every pixel. */

:root {
  --tgh-bg: #000000;
  --tgh-panel: #0c0f10;
  --tgh-panel-2: #15191b;
  --tgh-border: #23292c;
  --tgh-text: #ffffff;
  --tgh-dim: #9aa4a8;
  --tgh-green: #00f5a0;
  --tgh-blue: #3b82f6;
  --tgh-gradient: linear-gradient(90deg, var(--tgh-green), var(--tgh-blue));
  --tgh-gradient-diag: linear-gradient(135deg, var(--tgh-green), var(--tgh-blue));
  --tgh-ink: #04140d;      /* near-black text used ON TOP of the gradient — verified contrast */
  --tgh-red: #ff6363;
  --tgh-amber: #ffb020;
}

* { box-sizing: border-box; }

body.tgh {
  margin: 0;
  background: var(--tgh-bg);
  color: var(--tgh-text);
  font: 15px/1.55 "Segoe UI", system-ui, sans-serif;
}

/* ---- brand lockup: arrow mark + wordmark + alliance badge ---- */
.tgh-lockup { display: inline-flex; align-items: center; gap: 10px; }
.tgh-arrow { flex: none; display: block; }
.tgh-word { font-size: 17px; font-weight: 400; white-space: nowrap; }
.tgh-word .hl {
  font-weight: 800;
  background: var(--tgh-gradient-diag);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tgh-word b { font-weight: 700; color: var(--tgh-text); }
.tgh-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 3px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tgh-text); border: 1px solid transparent;
  background: linear-gradient(var(--tgh-panel), var(--tgh-panel)) padding-box,
              var(--tgh-gradient-diag) border-box;
}

/* ---- gradient-bordered "recuadro" card — one hero moment per page ---- */
.tgh-card {
  border: 1.5px solid transparent; border-radius: 14px;
  background: linear-gradient(var(--tgh-panel), var(--tgh-panel)) padding-box,
              var(--tgh-gradient-diag) border-box;
}
.tgh-card.plain {
  background: var(--tgh-panel); border-color: var(--tgh-border);
}

/* ---- primary CTA: filled gradient pill, dark ink for contrast on both hues ---- */
.tgh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tgh-gradient); color: var(--tgh-ink);
  border: 0; border-radius: 8px; padding: 11px 22px;
  font-weight: 700; font-size: 14.5px; letter-spacing: .1px;
  cursor: pointer; text-decoration: none;
}
.tgh-btn:hover { filter: brightness(1.08); }
.tgh-btn:active { filter: brightness(.96); }

a.tgh-link { color: var(--tgh-blue); text-decoration: none; }
a.tgh-link:hover { text-decoration: underline; }

/* ---- EN/ES toggle: a segmented control, same shape as the range picker ---- */
.lang-toggle { display: inline-flex; border: 1px solid var(--tgh-border); border-radius: 6px; overflow: hidden; }
.lang-toggle button {
  background: var(--tgh-panel-2); color: var(--tgh-dim); border: 0;
  padding: 5px 10px; font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; cursor: pointer;
}
.lang-toggle button + button { border-left: 1px solid var(--tgh-border); }
.lang-toggle button.active { background: var(--tgh-blue); color: #fff; }
.lang-toggle-fixed { position: fixed; top: 16px; right: 16px; z-index: 30; }

.tgh-dim { color: var(--tgh-dim); }
.tgh-legal {
  color: var(--tgh-dim); font-size: 11px; line-height: 1.55;
}