/* Raya — public tools (/tools/*). Today: the debt-plan calculator.
   Ported from the Claude Design handoff (project/Raya Deudas Hook.dc.html).
   House rules: colors only via var(--token) (no raw hex); translucent overlays
   via color-mix on a token; buttons reuse .btn from components.css.
   Loaded on top of landing.css, so .lp-nav / .lp-badge / .lp-h2 still apply. */

.dp { display: block; }

/* ===================== HERO ===================== */
.dp-hero { position: relative; overflow: hidden; }
.dp-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 480px at 88% -12%, var(--purple-100), transparent 58%),
    radial-gradient(720px 420px at -5% 4%, var(--blue-100), transparent 55%);
}
.dp-hero__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--space-6);
}

/* Breadcrumb trail. Left-aligned above the centred hero copy, matching the
   blog's .blog-crumbs so both public surfaces read the same. */
.dp-crumbs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.dp-crumbs a { color: var(--text-muted); text-decoration: none; }
.dp-crumbs a:hover { color: var(--brand-primary); text-decoration: underline; }
.dp-crumbs [aria-current="page"] { color: var(--text-body); }

.dp-head { max-width: 660px; margin: 0 auto var(--space-10); text-align: center; }
.dp-badge__dot { background: var(--grad-purple); }
.dp-h1 {
  font-family: var(--font-brand);
  font-weight: var(--fw-light);
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.dp-lede {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
}

.dp-ic { width: 22px; height: 22px; flex: none; }
.dp-ic-lg { width: 24px; height: 24px; flex: none; }
.dp-ic-sm { width: 16px; height: 16px; flex: none; }
.dp-ic-xs { width: 13px; height: 13px; flex: none; }

/* ===================== CALCULATOR SHELL ===================== */
.dp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dp-card__head {
  background: var(--ink-900);
  padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-8));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.dp-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: color-mix(in srgb, var(--white) 55%, transparent);
  margin-bottom: var(--space-1);
}
.dp-card__total {
  font-size: 26px;
  font-weight: var(--fw-medium);
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-card__stats { display: flex; gap: var(--space-6); }
.dp-card__stat {
  font-size: 20px;
  font-weight: var(--fw-medium);
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-card__stat--rate { color: var(--orange-300); }
.dp-card__stat--strategy {
  font-family: var(--font-brand);
  font-weight: var(--fw-regular);
  font-variant-numeric: normal;
}
.dp-card__body { padding: clamp(var(--space-5), 4vw, 34px); }

/* ===================== CARD ROWS ===================== */
.dp-rows__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dp-rows__title { font-family: var(--font-brand); font-size: 15px; color: var(--text-strong); }
.dp-rows__hint { font-size: 12px; color: var(--text-muted); }

.dp-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }

.dp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
}
.dp-row__abbr {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-on-brand);
  font-family: var(--font-brand);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  text-transform: uppercase;
  background: var(--grad-purple);
}
.dp-row--tone-1 .dp-row__abbr { background: var(--grad-purple); }
.dp-row--tone-2 .dp-row__abbr { background: var(--grad-blue); }
.dp-row--tone-3 .dp-row__abbr { background: var(--grad-orange); }
.dp-row--tone-4 .dp-row__abbr { background: var(--grad-green); }

.dp-field { display: block; }
.dp-field--name { flex: 1; min-width: 120px; }
.dp-field--balance { width: 140px; }
.dp-field--rate { width: 108px; }
.dp-field__label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-1);
}
.dp-input {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 11px;
  background: var(--surface-card);
}
.dp-input:focus-within {
  border-color: var(--purple-400);
  box-shadow: var(--shadow-focus);
}
.dp-input__affix { color: var(--text-muted); font-size: 14px; }
.dp-input__el {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 0;
  padding: 9px 0;
}
/* Spinners fight the tabular figures and add nothing on a slider-driven tool. */
.dp-input__el::-webkit-outer-spin-button,
.dp-input__el::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-input__el[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Phones: let saldo, tasa and the order/remove controls share one wrapped line
   instead of taking three, so a row stays scannable. */
@media (max-width: 560px) {
  /* Explicit basis, not `flex: 1`: wrapping is decided from the basis, and an
     auto basis would push the order/remove controls onto a line of their own. */
  .dp-field--balance { flex: 1 1 96px; width: auto; }
  .dp-field--rate { width: 92px; }
  .dp-row__end { margin-left: auto; }
}

.dp-row__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  padding-bottom: 2px;
}
.dp-row__order {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dp-row--first .dp-row__order { background: var(--grad-purple); color: var(--text-on-brand); }
.dp-row__remove {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dp-row__remove:hover { color: var(--danger); border-color: var(--danger); }
.dp-row__remove:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.dp-row--only .dp-row__remove { display: none; }

.dp-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px dashed var(--border-default);
  background: var(--surface-card);
  color: var(--purple-600);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  padding: 10px var(--space-4);
  margin-bottom: var(--space-6);
}
.dp-add:hover { border-color: var(--purple-400); background: var(--purple-100); }
.dp-add:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.dp-noscript {
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--ink-800);
  font-size: 14px;
  margin: 0 0 var(--space-4);
}

/* ===================== CONTROLS ===================== */
.dp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 640px) {
  .dp-grid { grid-template-columns: 1fr 1fr; }
}

.dp-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.dp-panel--center { display: flex; flex-direction: column; justify-content: center; }
.dp-panel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dp-panel__label { font-size: 14px; color: var(--text-body); margin-bottom: var(--space-3); }
.dp-panel__row .dp-panel__label { margin-bottom: 0; }
.dp-panel__value {
  font-family: var(--font-brand);
  font-size: 26px;
  color: var(--purple-600);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-panel__hint {
  font-size: 12px;
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin: 11px 0 0;
}

.dp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--grad-purple);
  outline: none;
  cursor: pointer;
}
.dp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--purple-500);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.dp-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--purple-500);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.dp-range:focus-visible { box-shadow: var(--shadow-focus); }
.dp-range__ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.dp-seg {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
}
.dp-seg__btn {
  flex: 1;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 10px var(--space-3);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  background: transparent;
  color: var(--text-muted);
}
.dp-seg__btn.is-active {
  background: var(--surface-card);
  color: var(--purple-700);
  box-shadow: var(--shadow-sm);
}
.dp-seg__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ===================== OUTCOMES ===================== */
.dp-outcome { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.dp-outcome--min { border: 1px solid var(--danger); background: var(--danger-bg); }
.dp-outcome--plan { border: 1.5px solid var(--purple-400); background: var(--purple-100); }
.dp-outcome__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.dp-outcome__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dp-outcome--min .dp-outcome__icon { background: var(--surface-card); color: var(--danger); }
.dp-outcome--plan .dp-outcome__icon { background: var(--grad-purple); color: var(--text-on-brand); }
.dp-outcome__title { font-family: var(--font-brand); font-size: 14px; }
.dp-outcome--min .dp-outcome__title { color: var(--danger); }
.dp-outcome--plan .dp-outcome__title { color: var(--purple-700); }
.dp-outcome__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-1);
}
.dp-outcome--min .dp-outcome__label { color: var(--text-muted); }
.dp-outcome--plan .dp-outcome__label { color: var(--purple-600); }
.dp-outcome__value {
  font-size: 26px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-outcome--min .dp-outcome__value { color: var(--danger); }
.dp-outcome--plan .dp-outcome__value { color: var(--purple-700); }
.dp-outcome__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-size: 13px;
  color: var(--ink-800);
}
.dp-outcome--min .dp-outcome__foot { border-top: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }
.dp-outcome--plan .dp-outcome__foot { border-top: 1px solid var(--purple-300); }
.dp-outcome__amt { font-size: 16px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.dp-outcome--min .dp-outcome__amt { color: var(--danger); }
.dp-outcome--plan .dp-outcome__amt { color: var(--purple-700); }

/* ===================== SAVINGS / WARNING ===================== */
.dp-saved {
  background: var(--ink-900);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.dp-saved[hidden] { display: none; }
.dp-saved__left { display: flex; align-items: center; gap: var(--space-3); }
.dp-saved__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--grad-green);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dp-saved__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: color-mix(in srgb, var(--white) 55%, transparent);
  margin-bottom: var(--space-1);
}
.dp-saved__value {
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--green-400);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-saved__note {
  font-size: 14px;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  max-width: 280px;
  margin: 0;
}
.dp-saved__note strong { color: var(--white); font-weight: var(--fw-medium); }

.dp-warn {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.dp-warn[hidden] { display: none; }
.dp-warn__icon { color: var(--danger); margin-top: 1px; }
.dp-warn__title { font-family: var(--font-brand); font-size: 14px; color: var(--danger); margin-bottom: var(--space-1); }
.dp-warn__text { font-size: 13px; line-height: var(--lh-normal); color: var(--ink-800); margin: 0; }

.dp-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.dp-cta .btn--lg { height: 52px; }

/* ===================== TRUST ROW + NOTE ===================== */
.dp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.dp-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 10px var(--space-4);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  color: var(--text-body);
}
.dp-trust__icon { display: flex; flex: none; }
.dp-tint--purple { color: var(--purple-600); }
.dp-tint--orange { color: var(--orange-600); }
.dp-tint--green { color: var(--green-600); }
.dp-tint--blue { color: var(--blue-600); }

/* Inline (not flex): the lock has to sit on the first line of the sentence,
   not on a line of its own above it. */
.dp-note {
  text-align: center;
  font-size: 12px;
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin: var(--space-5) auto 0;
  max-width: 720px;
}
.dp-note .dp-ic-xs { display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* ===================== STATEMENT SECTION ===================== */
.dp-section { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); }
.dp-section__inner { max-width: 1080px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--space-6); }
.dp-section__head { max-width: 640px; margin: 0 auto var(--space-10); text-align: center; }
.dp-section__lede { font-size: 16px; line-height: var(--lh-relaxed); color: var(--text-muted); margin: var(--space-4) 0 0; }
.dp-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 860px) {
  .dp-steps { grid-template-columns: repeat(3, 1fr); }
}
.dp-step {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.dp-step__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--purple-100);
  color: var(--purple-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.dp-step__title { font-family: var(--font-brand); font-size: 18px; font-weight: var(--fw-regular); color: var(--text-strong); margin: 0 0 var(--space-2); }
.dp-step__body { font-size: 14.5px; line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0; }
.dp-section__foot { text-align: center; font-size: 14px; color: var(--text-muted); margin: var(--space-8) 0 0; }

/* ===================== PREMIUM TEASER ===================== */
.dp-final { padding: clamp(48px, 7vw, 88px) var(--space-6); }
.dp-final__card {
  position: relative;
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--ink-900);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.dp-final__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(700px 320px at 80% -20%, color-mix(in srgb, var(--purple-500) 55%, transparent), transparent 60%);
}
.dp-final__inner { position: relative; padding: clamp(36px, 6vw, 64px) clamp(var(--space-6), 5vw, 64px); max-width: 720px; }
.dp-final__badge {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
  border-radius: var(--radius-pill);
  padding: 6px var(--space-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: color-mix(in srgb, var(--white) 78%, transparent);
  margin-bottom: var(--space-5);
}
.dp-final__h2 {
  font-family: var(--font-brand);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 var(--space-4);
}
.dp-final__p {
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--white) 78%, transparent);
  margin: 0 0 var(--space-8);
}
.dp-final__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.landing .dp-final__cta a.btn--inverse,
.landing .dp-final__cta a.btn--inverse:hover {
  background: var(--surface-card);
  color: var(--text-strong);
}