:root {
  --bg: #06141b;
  --surface: #11212d;
  --ink: #ccd0cf;
  --muted: #9ba8ab;
  --line: #253745;
  --acc: #4a5c6a;
  --wa: #ccd0cf;
}
body { background: linear-gradient(180deg, #06141b 0%, #0b1a23 50%, #06141b 100%) fixed; color: var(--ink); }
::selection { background: #ccd0cf; color: #06141b; }

.top { background: rgba(6, 20, 27, .86); border-bottom-color: var(--line); }
.brand { color: #ccd0cf; }
.top nav a { color: #9ba8ab; }

.btn { background: #ccd0cf; border-color: #ccd0cf; color: #06141b; }
.btn.ghost { background: transparent; color: #ccd0cf; border-color: #4a5c6a; }
.btn.light { background: #ccd0cf; color: #06141b; border-color: #ccd0cf; }
.btn.ghost-light { color: #ccd0cf; border-color: rgba(204, 208, 207, .55); }
.btn.wa { background: #ccd0cf; border-color: #ccd0cf; color: #06141b; }
.wa-float { background: #ccd0cf; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.wa-float svg { color: #06141b !important; }

.hero::after { background: linear-gradient(180deg, rgba(6,20,27,.25) 0%, rgba(6,20,27,.3) 40%, rgba(6,20,27,.92) 100%); }
.hero img { filter: saturate(.7) contrast(1.05); }

.card, .split, details, .caja, .pi, .pp, .dia, .al { background: #11212d; border-color: #253745; }
.card .ph { background: #253745; }
.card p, .split p, .about p { color: #9ba8ab; }
.chip { background: #253745; color: #ccd0cf; }
.arrows button { background: #11212d; border-color: #253745; color: #ccd0cf; }
.steps li::before { color: #ccd0cf; }
.steps li { color: #9ba8ab; }
footer { border-top-color: #253745; color: #9ba8ab; }
.note, .label { color: #9ba8ab; }
.note a, .demo a, .note b { color: #ccd0cf; }

.field input, .field select, .field textarea { background: #06141b; border-color: #253745; color: #ccd0cf; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #9ba8ab; }
.field input::placeholder { color: #4a5c6a; }
.toast { background: #ccd0cf; color: #06141b; }
.copy { background: #253745; color: #ccd0cf; border-color: #4a5c6a; }

.weeks button, .tabs button { background: #11212d; border-color: #253745; color: #9ba8ab; }
.weeks button.on, .tabs button.on { background: #ccd0cf; color: #06141b; border-color: #ccd0cf; }
.ex { border-top-color: #253745; }
.ex input, .chk input { accent-color: #9ba8ab; }
.barra { background: #253745; }
.barra i { background: #ccd0cf; }
.al .tag, .al .cod { background: #06141b; }
.btn.borrar { background: transparent; color: #e3a3a3; border-color: #4a3a3f; }
.exr input, .dia input.nom { background: #06141b; border-color: #253745; color: #ccd0cf; }
.add { border-color: #4a5c6a; color: #9ba8ab; }
.err { color: #e3a3a3; }