/*! rpw-ferramentas.css v1.0 — Alfajor® Design System for RecargaPay Web Tools
 *  Tokens: Figma Global — Tokens (MF4f2LFPwTK1yd9Auq01lV)
 *  Components: Figma App — Componentes (frcJNuMZYdPN61iMvoKJ1D)
 *  Last sync: 2026-04-14
 */

/* ══════════════════════════════════════════════════════
   1. DESIGN TOKENS (CSS Custom Properties)
   ══════════════════════════════════════════════════════ */

.rpw-tool {
  /* ── Text ── */
  --text-dark:      #000000;
  --text-main:      #212a2f;
  --text-muted:     #42535c;
  --text-disabled:  #a0afb8;
  --text-inverse:   #ffffff;

  /* ── Backgrounds ── */
  --bg-main:        #ffffff;
  --bg-card:        #ffffff;
  --bg-screen:      #f2f5f6;
  --bg-dim:         #f2f5f6;
  --bg-muted:       #dce2e6;
  --bg-disabled:    #dce2e6;
  --bg-inverse:     #000000;

  /* ── Primary (Brand Orange) ── */
  --primary-lighter:#ffede3;
  --primary-light:  #ffcdae;
  --primary-main:   #f05a02;
  --primary-dark:   #da5403;

  /* ── Secondary (Blue) ── */
  --secondary-lighter:#e9f2fb;
  --secondary-light:#c4ddf7;
  --secondary-main: #116ed2;
  --secondary-dark: #005cbd;

  /* ── Tertiary (Deep Blue) ── */
  --tertiary-lighter:#ecf3f8;
  --tertiary-main:  #0d4d84;
  --tertiary-dark:  #053f71;

  /* ── Borders ── */
  --border-muted:   #c4ced4;
  --border-main:    #7c8e98;
  --border-disabled:#dce2e6;
  --border-primary: #f05a02;
  --border-secondary:#116ed2;
  --border-error:   #d61c45;

  /* ── Status ── */
  --success-lighter:#e2f6ef;
  --success-light:  #aae5cf;
  --success-main:   #017e50;
  --warning-lighter:#fff8e6;
  --warning-light:  #ffe8a7;
  --warning-main:   #f4a203;
  --error-lighter:  #fdedf1;
  --error-light:    #fcccd7;
  --error-main:     #d61c45;
  --info-lighter:   #e9f2fb;
  --info-light:     #c4ddf7;
  --info-main:      #116ed2;

  /* ── Shadows ── */
  --shadow-card:    0px 1px 14px 0px rgba(124,142,152,0.12),
                    0px 6px 10px 0px rgba(124,142,152,0.14),
                    0px 3px 5px -1px rgba(124,142,152,0.20);
  --shadow-heavy:   0px 8px 16px rgba(33,42,47,0.20),
                    0px 4px 8px rgba(33,42,47,0.14),
                    0px 0px 2px rgba(33,42,47,0.12);

  /* ── Border Radius ── */
  --radius-xs:      2px;
  --radius-s:       4px;
  --radius-m:       8px;
  --radius-l:       16px;
  --radius-xl:      24px;
  --radius-rounded: 1000px;

  /* ── Spacing (token scale) ── */
  --sp-2:  2px;  --sp-4:  4px;  --sp-8:  8px;
  --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-56: 56px; --sp-64: 64px;
  --sp-80: 80px;

  /* ── Font ── */
  --font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ══════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════ */

.rpw-tool {
  all: initial;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  color: var(--text-main);
  display: block;
  width: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.rpw-tool *, .rpw-tool *::before, .rpw-tool *::after {
  box-sizing: border-box;
  font-family: inherit;
}


/* ══════════════════════════════════════════════════════
   3. TYPOGRAPHY
   Only Barlow 400, 600, 700.
   ══════════════════════════════════════════════════════ */

.rpw-tool .t-display   { font-size: 32px; font-weight: 600; line-height: 44px; letter-spacing: -0.01em; }
.rpw-tool .t-title-1   { font-size: 24px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.rpw-tool .t-title-2   { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: -0.01em; }
.rpw-tool .t-header    { font-size: 20px; font-weight: 600; line-height: 28px; }
.rpw-tool .t-subtitle-1{ font-size: 16px; font-weight: 400; line-height: 24px; }
.rpw-tool .t-subtitle-2{ font-size: 16px; font-weight: 600; line-height: 24px; }
.rpw-tool .t-body-1    { font-size: 14px; font-weight: 400; line-height: 20px; }
.rpw-tool .t-body-2    { font-size: 14px; font-weight: 600; line-height: 20px; }
.rpw-tool .t-caption-1 { font-size: 12px; font-weight: 400; line-height: 16px; }
.rpw-tool .t-caption-2 { font-size: 12px; font-weight: 600; line-height: 16px; }
.rpw-tool .t-big-number{ font-size: 48px; font-weight: 600; line-height: 64px; letter-spacing: -0.02em; }
.rpw-tool .t-btn-large { font-size: 16px; font-weight: 700; line-height: 24px; }
.rpw-tool .t-btn-medium{ font-size: 14px; font-weight: 600; line-height: 20px; }
.rpw-tool .t-btn-small { font-size: 12px; font-weight: 600; line-height: 16px; }


/* ══════════════════════════════════════════════════════
   4. HEADER (Web landing exception — dark brand surface)
   Not in Alfajor mobile DS; kept for web LP consistency.
   Uses Tertiary/Dark as base with warm orange accent.
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-header {
  background: linear-gradient(135deg, var(--tertiary-dark) 0%, var(--tertiary-main) 60%, var(--secondary-main) 100%);
  padding: var(--sp-20) var(--sp-16) var(--sp-16);
  position: relative;
  overflow: hidden;
}
.rpw-tool .tool-header::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: rgba(240, 90, 2, 0.10);
  border-radius: 50%;
  pointer-events: none;
}
.rpw-tool .tool-header-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.rpw-tool .tool-header .tool-tagline {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--sp-8);
  line-height: 16px;
}
.rpw-tool .tool-header .tool-tag {
  display: inline-block;
  background: var(--primary-main);
  color: var(--text-inverse);
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-rounded);
  font-size: 10px;
  font-weight: 600;
  margin-right: var(--sp-4);
  line-height: 14px;
}
.rpw-tool .tool-header h1 {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 600;
  color: var(--text-inverse);
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}
.rpw-tool .tool-header-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 20px;
  max-width: 560px;
}


/* ══════════════════════════════════════════════════════
   5. BODY / LAYOUT
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-body {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-16) var(--sp-8);
  width: 100%;
}


/* ══════════════════════════════════════════════════════
   6. CARD (White surface on screen canvas)
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-card {
  background: var(--bg-card);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: var(--sp-16);
  margin-bottom: var(--sp-8);
  border: 1px solid var(--border-disabled);
}

@media(max-width:480px) {
  .rpw-tool .tool-card { padding: var(--sp-12); }
}


/* ══════════════════════════════════════════════════════
   7. FORM FIELDS
   Input height: 56px (Spacing-56).
   Border radius: 8px (radius-m).
   Focus: 2px secondary blue border.
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-fg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  margin-bottom: var(--sp-4);
}
.rpw-tool .tool-span2 { grid-column: span 2; }
.rpw-tool .tool-fgrp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.rpw-tool .tool-lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.rpw-tool .tool-lbl .req { color: var(--primary-main); }
.rpw-tool .tool-lbl .opt { font-weight: 400; color: var(--text-disabled); font-size: 12px; }
.rpw-tool .tool-in {
  height: var(--sp-56);
  padding: 0 var(--sp-16);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-m);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-main);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.rpw-tool .tool-in:focus {
  outline: none;
  border-color: var(--secondary-main);
  box-shadow: 0 0 0 2px rgba(17,110,210,0.12);
}
.rpw-tool .tool-in.err {
  border-color: var(--error-main);
}
.rpw-tool .tool-in::placeholder {
  color: var(--text-disabled);
  font-weight: 400;
}
.rpw-tool .tool-hint {
  font-size: 12px;
  color: var(--text-disabled);
  line-height: 16px;
}

@media(max-width:480px) {
  .rpw-tool .tool-fg { grid-template-columns: 1fr; }
  .rpw-tool .tool-span2 { grid-column: auto; }
}


/* ══════════════════════════════════════════════════════
   8. BUTTONS
   Pill shape (1000px). No gradients.
   Primary: 48px height. Secondary outline: 40px.
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-btn-primary {
  display: block;
  width: 100%;
  height: var(--sp-48);
  padding: 0 var(--sp-24);
  background: var(--primary-main);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-rounded);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
  transition: background 0.12s;
}
.rpw-tool .tool-btn-primary:active {
  background: var(--primary-dark);
}

.rpw-tool .tool-btn-secondary {
  display: block;
  width: 100%;
  height: var(--sp-40);
  padding: 0 var(--sp-20);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-rounded);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.rpw-tool .tool-btn-secondary:active {
  background: var(--bg-dim);
  border-color: var(--border-main);
}

.rpw-tool .tool-btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}


/* ══════════════════════════════════════════════════════
   9. RANGE SLIDER
   Track: 6px, muted bg. Thumb: 22px circle, primary border.
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, var(--primary-main) var(--pct, 25%), var(--bg-muted) var(--pct, 25%));
}
.rpw-tool .tool-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-main);
  border: 3px solid var(--primary-main);
  box-shadow: 0 2px 8px rgba(240,90,2,0.25);
  cursor: pointer;
}
.rpw-tool .tool-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid var(--primary-main);
  background: var(--bg-main);
  cursor: pointer;
}
.rpw-tool .tool-slider-val {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-main);
  margin-bottom: var(--sp-4);
}
.rpw-tool .tool-slider-val span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: var(--sp-4);
}


/* ══════════════════════════════════════════════════════
   10. TYPE SELECTOR — Horizontal chip strip
   Scrollable on mobile, single row on desktop.
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-type-strip {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
}
.rpw-tool .tool-type-strip::-webkit-scrollbar { display: none; }

.rpw-tool .tool-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--sp-40);
  padding: 0 var(--sp-16);
  border: 1px solid var(--border-disabled);
  border-radius: var(--radius-rounded);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.rpw-tool .tool-chip:active { background: var(--bg-dim); }
.rpw-tool .tool-chip.active {
  border-color: var(--border-primary);
  background: var(--primary-lighter);
  color: var(--text-main);
}
.rpw-tool .tool-chip-accent {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rpw-tool .tool-chip.active .tool-chip-accent {
  box-shadow: 0 0 0 2px rgba(240,90,2,0.25);
}

/* ── Legal badge inside card ── */
.rpw-tool .tool-card-legal {
  font-size: 14px;
  color: var(--text-muted);
  padding: var(--sp-8) var(--sp-12);
  background: var(--bg-dim);
  border-radius: var(--radius-m);
  margin-bottom: var(--sp-16);
  line-height: 20px;
}
.rpw-tool .tool-card-legal strong { color: var(--text-main); }


/* ══════════════════════════════════════════════════════
   11. INFO BADGE (legal / contextual hint)
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-info-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  background: var(--info-lighter);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--secondary-main);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--sp-12);
  line-height: 16px;
}
.rpw-tool .tool-info-badge strong { color: var(--text-main); }


/* ══════════════════════════════════════════════════════
   12. BREAKDOWN (live INSS/IRRF mini-table)
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-breakdown {
  grid-column: span 2;
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--bg-dim);
  border-radius: var(--radius-m);
  padding: var(--sp-8) var(--sp-12);
}
.rpw-tool .tool-breakdown.show { display: flex; }
.rpw-tool .tool-bd-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
}
.rpw-tool .tool-bd-row.total {
  border-top: 1px solid var(--border-disabled);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
  font-weight: 600;
  color: var(--text-main);
}
.rpw-tool .tool-bd-val { font-weight: 600; }


/* ══════════════════════════════════════════════════════
   13. RESULTS — Hero Block
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-results {
  display: none;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--sp-16) var(--sp-24);
}
.rpw-tool .tool-rh {
  background: linear-gradient(135deg, var(--tertiary-dark), var(--tertiary-main));
  border-radius: var(--radius-l);
  padding: var(--sp-24) var(--sp-20);
  text-align: center;
  margin-bottom: var(--sp-12);
}
.rpw-tool .tool-rh-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-12);
  border-radius: var(--radius-rounded);
  background: var(--primary-main);
  color: var(--text-inverse);
  margin-bottom: var(--sp-8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 12px;
}
.rpw-tool .tool-rh-lbl {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--sp-4);
}
.rpw-tool .tool-rh-val {
  font-size: clamp(2.2rem, 7vw, 3rem);
  font-weight: 600;
  color: var(--text-inverse);
  line-height: 1;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
}
.rpw-tool .tool-rh-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}


/* ══════════════════════════════════════════════════════
   14. RESULTS — Margin Cards
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-mg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.rpw-tool .tool-mg-card {
  background: var(--bg-card);
  border-radius: var(--radius-l);
  padding: var(--sp-16);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-disabled);
  position: relative;
  overflow: hidden;
}
.rpw-tool .tool-mg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.rpw-tool .tool-mg-card.emp::before { background: var(--primary-main); }
.rpw-tool .tool-mg-card.rmc::before { background: var(--secondary-main); }
.rpw-tool .tool-mg-card.rcc::before { background: var(--tertiary-main); }

.rpw-tool .tool-mg-ttl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: var(--sp-8);
}
.rpw-tool .tool-mg-bar-wrap {
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.rpw-tool .tool-mg-bar {
  height: 100%;
  border-radius: var(--radius-s);
  transition: width 0.7s ease;
  width: 0%;
}
.rpw-tool .tool-mg-card.emp .tool-mg-bar { background: var(--primary-main); }
.rpw-tool .tool-mg-card.rmc .tool-mg-bar { background: var(--secondary-main); }
.rpw-tool .tool-mg-card.rcc .tool-mg-bar { background: var(--tertiary-main); }
.rpw-tool .tool-mg-pct {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-disabled);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.rpw-tool .tool-mg-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.rpw-tool .tool-mg-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
}
.rpw-tool .tool-mg-row-val { font-weight: 600; color: var(--text-main); }
.rpw-tool .tool-mg-row-val.free { color: var(--success-main); font-size: 16px; font-weight: 700; }
.rpw-tool .tool-mg-row-val.used { color: var(--warning-main); }


/* ══════════════════════════════════════════════════════
   15. RESULTS — Summary Card
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-sum {
  background: var(--bg-card);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: var(--sp-20);
  margin-bottom: var(--sp-12);
  border: 1px solid var(--border-disabled);
}
.rpw-tool .tool-sum-ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: var(--sp-12);
}
.rpw-tool .tool-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--bg-dim);
  font-size: 14px;
}
.rpw-tool .tool-sum-row:last-child { border-bottom: none; padding-bottom: 0; }
.rpw-tool .tool-sum-row-lbl { color: var(--text-muted); font-weight: 400; }
.rpw-tool .tool-sum-row-val { font-weight: 700; color: var(--text-main); }
.rpw-tool .tool-sum-row-val.highlight { color: var(--success-main); font-size: 20px; }
.rpw-tool .tool-sum-row-val.warn { color: var(--warning-main); }
.rpw-tool .tool-sum-row-val.danger { color: var(--error-main); }


/* ══════════════════════════════════════════════════════
   16. HINT BOXES (success / info / warning / danger)
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-hint-box {
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--secondary-main);
  background: var(--info-lighter);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 20px;
  margin-bottom: var(--sp-12);
}
.rpw-tool .tool-hint-box.success {
  background: var(--success-lighter);
  border-color: var(--success-main);
}
.rpw-tool .tool-hint-box.warn {
  background: var(--warning-lighter);
  border-color: var(--warning-main);
}
.rpw-tool .tool-hint-box.danger {
  background: var(--error-lighter);
  border-color: var(--error-main);
}
.rpw-tool .tool-hint-box strong { color: var(--text-main); }


/* ══════════════════════════════════════════════════════
   17. ACCORDION
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-ac {
  background: var(--bg-card);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-12);
  overflow: hidden;
  border: 1px solid var(--border-disabled);
}
.rpw-tool .tool-ach {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-12) var(--sp-16);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  text-align: left;
  transition: background 0.12s;
}
.rpw-tool .tool-ach:active { background: var(--bg-dim); }
.rpw-tool .tool-ach .ico {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}
.rpw-tool .tool-ach.open .ico { transform: rotate(180deg); }
.rpw-tool .tool-acb {
  display: none;
  padding: 0 var(--sp-16) var(--sp-16);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 20px;
}
.rpw-tool .tool-ach.open + .tool-acb { display: block; }
.rpw-tool .tool-acb table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-8);
  font-size: 12px;
}
.rpw-tool .tool-acb th {
  text-align: left;
  padding: var(--sp-8);
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 2px solid var(--bg-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rpw-tool .tool-acb td {
  padding: var(--sp-8);
  border-bottom: 1px solid var(--bg-dim);
  font-weight: 400;
}
.rpw-tool .tool-acb td:last-child { text-align: right; font-weight: 600; color: var(--text-main); }


/* ══════════════════════════════════════════════════════
   18. CTA BLOCK
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-cta {
  background: linear-gradient(135deg, var(--tertiary-dark), var(--tertiary-main));
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-heavy);
  padding: var(--sp-24);
  text-align: center;
  margin-top: var(--sp-8);
}
.rpw-tool .tool-cta-title {
  font-size: clamp(17px, 3.5vw, 22px);
  font-weight: 600;
  color: var(--text-inverse);
  line-height: 1.3;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.01em;
}
.rpw-tool .tool-cta-title strong { color: var(--primary-main); }
.rpw-tool .tool-cta-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 20px;
  margin-bottom: var(--sp-16);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.rpw-tool .tool-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sp-48);
  padding: 0 var(--sp-32);
  background: var(--primary-main);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-rounded);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}
.rpw-tool .tool-cta-btn:active { background: var(--primary-dark); }


/* ══════════════════════════════════════════════════════
   19. TRUST BAR
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: var(--sp-12) auto 0;
  padding: var(--sp-8) var(--sp-16);
  max-width: 980px;
  gap: var(--sp-4);
  border-top: 1px solid var(--border-disabled);
}
.rpw-tool .tool-ti {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-12);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.rpw-tool .tool-ti.bcb { color: var(--text-main); }
.rpw-tool .tool-ti.seg { color: var(--success-main); }
.rpw-tool .tool-tsep {
  width: 1px;
  height: 20px;
  background: var(--border-disabled);
  flex-shrink: 0;
}

@media(max-width:560px) {
  .rpw-tool .tool-trust { gap: 0; }
  .rpw-tool .tool-tsep { display: none; }
  .rpw-tool .tool-ti { flex: 1 1 100%; justify-content: center; padding: var(--sp-4) 0; }
}


/* ══════════════════════════════════════════════════════
   20. DISCLAIMER
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-disc {
  font-size: 12px;
  color: var(--text-disabled);
  text-align: center;
  margin-top: var(--sp-12);
  line-height: 16px;
  padding: 0 var(--sp-8);
}
.rpw-tool .tool-disc strong { color: var(--text-muted); }

/* ── Nova simulação button in results ── */
.rpw-tool .tool-results .tool-btn-secondary {
  margin-top: var(--sp-20);
}


/* ══════════════════════════════════════════════════════
   21. BPC AUTO-FILL BOX
   ══════════════════════════════════════════════════════ */

.rpw-tool .tool-auto-box {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-12);
  background: var(--info-lighter);
  border-radius: var(--radius-m);
  border: 1px solid var(--info-light);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 20px;
}


/* ══════════════════════════════════════════════════════
   22. OPTIONAL DETAILS TOGGLE
   ══════════════════════════════════════════════════════ */

.rpw-tool details.tool-od { margin-top: var(--sp-12); grid-column: span 2; }
.rpw-tool details.tool-od summary.tool-os {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-m);
  background: var(--bg-dim);
  border: 1px solid var(--border-disabled);
  transition: background 0.12s;
  -webkit-user-select: none;
  user-select: none;
}
.rpw-tool details.tool-od summary.tool-os::-webkit-details-marker { display: none; }
.rpw-tool details.tool-od summary.tool-os::before {
  content: '+';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  flex-shrink: 0;
  line-height: 1;
}
.rpw-tool details.tool-od[open] summary.tool-os::before {
  content: '\2212';
  background: var(--text-main);
  color: var(--text-inverse);
}
.rpw-tool details.tool-od summary.tool-os:active { background: var(--bg-muted); }
.rpw-tool details.tool-od .tool-od-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  padding-top: var(--sp-12);
}
@media(max-width:480px) {
  .rpw-tool details.tool-od { grid-column: auto; }
  .rpw-tool details.tool-od .tool-od-body { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   23. REDUCED MOTION
   ══════════════════════════════════════════════════════ */

@media(prefers-reduced-motion:reduce) {
  .rpw-tool * { transition-duration: 0s !important; animation: none !important; }
}