/* CloudLiveOn — design tokens (edición 2, firma 5c). Importar después de fonts/fonts.css */
:root, [data-theme="dark"] {
  --clo-bg: #09090C;
  --clo-surface: #0F0F13;
  --clo-border: #1E1E25;
  --clo-border-strong: #2A2A33;
  --clo-ink: #F1F1F1;
  --clo-ink-2: #DADAE0;
  --clo-ink-muted: #B4B4BF;
  --clo-ink-subtle: #8E8E99;
  --clo-live: #FF4B55;
  --clo-action: #00ADFF;
  --clo-action-hover: #5CCBFF;
  --clo-on-action: #09090C;
  --clo-amber: #FFBD69;
  --clo-on-amber: #211506;
  --clo-font: 'Geologica', Arial, sans-serif;
  --clo-font-mono: Consolas, ui-monospace, monospace;
  --clo-radius-xs: 4px; --clo-radius-sm: 6px; --clo-radius-md: 8px; --clo-radius-lg: 12px; --clo-radius-xl: 16px; --clo-radius-pill: 999px;
  --clo-max-width: 1200px; --clo-gutter: 56px; --clo-header-h: 72px;
  color-scheme: dark;
}
[data-theme="light"] {
  --clo-bg: #FFFDF8;
  --clo-surface: #FFFDF8;
  --clo-border: #E4E1D6;
  --clo-border-strong: #C9C5B8;
  --clo-ink: #17382E;
  --clo-ink-2: #17382E;
  --clo-ink-muted: #4A5F57;
  --clo-ink-subtle: #6B7A74;
  --clo-live: #C62535;
  --clo-action: #0075AA;
  --clo-action-hover: #005F8A;
  --clo-on-action: #FFFDF8;
  --clo-amber: #975000;
  --clo-on-amber: #FFFDF8;
  color-scheme: light;
}
@media (max-width: 720px) { :root { --clo-gutter: 20px; } }
html { background: var(--clo-bg); color: var(--clo-ink); font-family: var(--clo-font); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
a { color: var(--clo-action); text-decoration: none; }
a:hover { color: var(--clo-action-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--clo-action); outline-offset: 2px; }
.clo-price, .clo-num { font-variant-numeric: tabular-nums; }

/* Componentes base */
.clo-btn { margin-left: auto; display: inline-block; background: var(--clo-action); color: var(--clo-on-action); font: 600 15px/1.2 var(--clo-font); padding: 10px 18px; border-radius: var(--clo-radius-sm); text-decoration: none; transition: background-color .15s ease-out; }
.clo-btn:hover { background: var(--clo-action-hover); text-decoration: none; color: var(--clo-on-action); }
.clo-btn--amber { background: var(--clo-amber); color: var(--clo-on-amber); }
.clo-btn--ghost { background: transparent; color: var(--clo-ink); border: 1px solid var(--clo-border-strong); }
.clo-card { background: var(--clo-surface); border-radius: var(--clo-radius-lg); padding: 32px; }
.clo-plan { border: 3px solid var(--clo-border-strong); border-radius: var(--clo-radius-xl); padding: 40px; display: flex; flex-direction: column; gap: 28px; }
.clo-plan--featured { border-color: var(--clo-amber); }
.clo-caption { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--clo-ink-subtle); }
.clo-container { max-width: var(--clo-max-width); margin: 0 auto; padding: 0 var(--clo-gutter); }
.clo-section { border-top: 1px solid var(--clo-border); padding: clamp(56px, 8vw, 96px) 0; }