/* Calculadora de comisiones (usa las variables de color de la página que la incluye) */
.calc { position: relative; display: grid; gap: 18px; border-radius: 26px; padding: 12px;
  background: linear-gradient(180deg, #fff, #fbf8f1); border: 1px solid var(--borde, #dfe3d7);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgb(40 30 10 / .05), 0 14px 28px -8px rgb(40 30 10 / .12), 0 40px 70px -24px rgb(40 30 10 / .25); }
@media (min-width: 860px) { .calc:not(.compacta) { grid-template-columns: 1fr 1fr; gap: 12px; } }
.calc-entradas { display: grid; gap: 24px; align-content: start; padding: 18px 14px; }
@media (min-width: 860px) { .calc:not(.compacta) .calc-entradas { padding: 26px 24px; } }
.calc-campo { display: grid; gap: 10px; font-weight: 600; color: var(--tinta, #14211a); font-size: 15.5px; }
.calc-campo > span:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.calc-campo output { font: 800 15px var(--f-titulo, system-ui); color: #fff; white-space: nowrap; background: linear-gradient(180deg, #2a8a5c, var(--verde, #1e6b45));
  border-radius: 99px; padding: 3px 11px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 4px 10px -3px rgb(30 107 69 / .5); }
.calc-campo small { font-weight: 400; color: var(--suave, #5f6d65); font-size: 13px; }
.calc-pesos { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--borde, #dfe3d7); border-radius: 16px; padding: 4px 16px; background: var(--crema, #f8f3e8);
  box-shadow: inset 0 2px 4px rgb(40 30 10 / .06); transition: border-color .2s, box-shadow .2s; }
.calc-pesos:focus-within { border-color: var(--verde, #1e6b45); box-shadow: inset 0 2px 4px rgb(40 30 10 / .04), 0 0 0 4px rgb(30 107 69 / .14); }
.calc-pesos b { font: 800 22px var(--f-titulo, system-ui); color: var(--suave, #5f6d65); }
.calc-pesos input { border: 0; background: transparent; font: 800 28px var(--f-titulo, system-ui); width: 100%; min-width: 0; padding: 8px 0; color: var(--tinta, #14211a); outline: none; }

/* barras: pista con relleno verde hasta el valor (--p lo pone el JS) */
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; --p: 50%; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--wa, #1fa855), var(--verde, #1e6b45)) 0 0 / var(--p) 100% no-repeat, #e6e9e1; box-shadow: inset 0 1px 2px rgb(0 0 0 / .1); }
.calc input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: #e6e9e1; box-shadow: inset 0 1px 2px rgb(0 0 0 / .1); }
.calc input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--wa, #1fa855), var(--verde, #1e6b45)); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: inset 0 0 0 7px var(--verde, #1e6b45), 0 4px 10px rgb(30 107 69 / .4); transition: transform .15s; }
.calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: inset 0 0 0 7px var(--verde, #1e6b45), 0 4px 10px rgb(30 107 69 / .4); }
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc input[type="range"]:focus-visible { outline: none; }
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 7px var(--verde, #1e6b45), 0 0 0 5px rgb(30 107 69 / .25); }

.calc-resultado { position: relative; isolation: isolate; overflow: hidden; color: #eef4ef; border-radius: 18px; padding: 26px 24px; display: grid; gap: 4px; align-content: start;
  background: radial-gradient(90% 70% at 100% 0%, #2a8a5c 0%, transparent 60%), linear-gradient(180deg, #17513a, var(--verde-osc, #12402a));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 20px 40px -18px rgb(18 64 42 / .8); }
.calc-resultado::before { /* tablillas de persiana muy tenues */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .035) 0 2px, transparent 2px 14px);
  -webkit-mask: linear-gradient(200deg, #000, transparent 70%); mask: linear-gradient(200deg, #000, transparent 70%); }
.calc-resultado p { margin: 0; }
.calc-linea { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a6e3bc; }
.calc-grande { font: 900 clamp(2.1rem, 6vw, 3.1rem)/1.05 var(--f-titulo, system-ui); letter-spacing: -.025em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgb(0 0 0 / .2); }
.calc-sub { font-size: 14.5px; color: #bfd1c5; margin-bottom: 18px !important; }
.calc-ahorro { background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .04)); border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.calc-ahorro p:first-child { font-size: 14.5px; color: #dcebe1; }
.calc-grande small, .calc-ahorro-monto small { font-size: .42em; font-weight: 800; letter-spacing: 0; opacity: .8; white-space: nowrap; }
.calc-ahorro-monto { font: 900 clamp(1.7rem, 4.6vw, 2.3rem) var(--f-titulo, system-ui); color: #7be3a3; letter-spacing: -.015em; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgb(123 227 163 / .35); }
.calc-cta { margin-top: 18px; justify-self: start; }
.calc-nota { font-size: 12.5px; color: #a9c1b2; margin-top: 12px !important; line-height: 1.45; }