/* ════════════════════════════════════════════════════════
 * Aiden Startup · Calculadora UK Limited vs Autónomo
 * ════════════════════════════════════════════════════════ */

.calc{padding-top:80px;background:linear-gradient(180deg,var(--n0),var(--n50))}

/* ─── Hero ─── */
.calc-hero{padding:48px 0 32px;text-align:center}
.calc-title{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(30px,4.6vw,52px);line-height:1.05;
  letter-spacing:-.03em;color:var(--n950);
  margin:0 auto 16px;max-width:880px;
}
.calc-title em{
  font-style:normal;
  background:linear-gradient(135deg,var(--t600),var(--t500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.calc-sub{font-size:16.5px;color:var(--n400);line-height:1.6;max-width:660px;margin:0 auto}

/* ─── App ─── */
.calc-app{padding:32px 0 80px}
.calc-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:32px;align-items:start;
  max-width:1080px;margin:0 auto;
}

/* INPUT PANEL */
.calc-input{
  background:var(--n0);
  border:1px solid var(--n100);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--sh-md);
  position:sticky;top:100px;
}
.calc-input-h{
  font-family:var(--fd);font-weight:800;font-size:18px;
  letter-spacing:-.015em;color:var(--n950);
  margin-bottom:24px;
  padding-bottom:14px;border-bottom:1px solid var(--n75);
}

.calc-field{margin-bottom:24px}
.calc-field:last-child{margin-bottom:0}
.calc-field label{
  display:block;
  font-family:var(--fd);font-weight:700;font-size:13.5px;
  color:var(--n800);letter-spacing:-.005em;
  margin-bottom:10px;
}
.calc-field label span{color:var(--n400);font-weight:500}

.calc-field-wrap{
  display:flex;flex-direction:column;gap:12px;
}
.calc-field-inputs{
  display:flex;align-items:center;gap:6px;
  background:var(--n50);
  border:1px solid var(--n100);
  border-radius:var(--r-sm);
  padding:0 14px;
  transition:border-color .2s,background .2s;
}
.calc-field-inputs:focus-within{
  border-color:var(--t500);
  background:var(--n0);
}
.calc-field-inputs input[type="number"]{
  flex:1;border:0;background:transparent;outline:none;
  padding:11px 0;
  font-family:var(--fd);font-weight:700;font-size:18px;
  color:var(--n950);letter-spacing:-.01em;
  -moz-appearance:textfield;
}
.calc-field-inputs input::-webkit-outer-spin-button,
.calc-field-inputs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-field-currency{
  font-family:var(--fd);font-weight:600;font-size:14.5px;
  color:var(--n400);
}

/* Slider */
.calc-field input[type="range"]{
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--t500),var(--t400));
  border-radius:var(--r-pill);
  outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.calc-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--n0);
  border:3px solid var(--t500);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  cursor:pointer;
  transition:transform .15s var(--ease);
}
.calc-field input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc-field input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--n0);border:3px solid var(--t500);
  box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;
}

.calc-field-hint{
  display:flex;flex-wrap:wrap;gap:6px;
}
.calc-tag{
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--n50);
  border:1px solid var(--n100);
  font-family:var(--fb);font-size:11.5px;font-weight:600;
  color:var(--n500);cursor:pointer;
  transition:all .2s;
}
.calc-tag:hover{background:var(--t50);border-color:var(--t300);color:var(--t700)}
.calc-field-hint-text{
  font-size:12px;color:var(--n400);line-height:1.4;
  margin-top:2px;
}

.calc-toggle{
  display:inline-flex;
  background:var(--n50);border:1px solid var(--n100);
  border-radius:var(--r-pill);padding:4px;gap:0;
}
.calc-toggle-opt{
  padding:7px 16px;border-radius:var(--r-pill);
  font-family:var(--fb);font-weight:600;font-size:13px;
  color:var(--n500);background:transparent;border:0;cursor:pointer;
  transition:all .2s;
}
.calc-toggle-opt.is-active{
  background:var(--n0);
  color:var(--n950);
  box-shadow:var(--sh-sm);
}

/* RESULT PANEL */
.calc-result{
  display:flex;flex-direction:column;gap:20px;
}
.calc-vs{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.calc-side{
  background:var(--n0);
  border:1px solid var(--n100);
  border-radius:var(--r-lg);
  padding:24px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;
}
.calc-side--uk{
  border-color:var(--t300);
  background:linear-gradient(180deg,var(--n0),#FAFCFB);
}
.calc-side--uk::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--t500),var(--t400));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

.calc-side-h{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--n75);
  position:relative;
}
.calc-side-flag{font-size:26px;line-height:1}
.calc-side-name{
  font-family:var(--fd);font-weight:800;font-size:16px;
  letter-spacing:-.015em;color:var(--n950);line-height:1.2;
}
.calc-side-meta{
  font-size:12px;color:var(--n400);
  font-weight:500;margin-top:1px;
}
.calc-side-tag{
  margin-left:auto;
  padding:3px 9px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--t600),var(--t500));
  color:#fff;
  font-family:var(--fb);font-size:9.5px;font-weight:700;
  letter-spacing:.07em;line-height:1;
}

.calc-rows{display:flex;flex-direction:column;gap:8px}
.calc-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13.5px;line-height:1.4;
}
.calc-row span{color:var(--n500)}
.calc-row strong{
  font-family:var(--fd);font-weight:700;
  color:var(--n900);letter-spacing:-.005em;
}
.calc-row--total{
  margin-top:8px;padding-top:10px;
  border-top:1px solid var(--n75);
  font-size:14px;
}
.calc-row--total span{color:var(--n700);font-weight:600}
.calc-row--total strong{font-size:15px}

.calc-net{
  margin-top:6px;
  padding:14px 16px;
  background:var(--n50);
  border-radius:var(--r-sm);
  display:flex;justify-content:space-between;align-items:center;
}
.calc-side--uk .calc-net{
  background:linear-gradient(135deg,var(--t50),#E8F8F2);
}
.calc-net-l{
  font-size:12.5px;color:var(--n500);font-weight:600;
}
.calc-net-v{
  font-family:var(--fd);font-weight:800;font-size:20px;
  color:var(--n950);letter-spacing:-.02em;
}
.calc-side--uk .calc-net-v{
  background:linear-gradient(135deg,var(--t700),var(--t500));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* SAVINGS */
.calc-savings{
  background:var(--n0);
  border:1px solid var(--t200);
  border-radius:var(--r-lg);
  padding:28px;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FAFCFB,#F0FAF6);
}
.calc-savings-bar{
  height:8px;border-radius:var(--r-pill);
  background:var(--n100);overflow:hidden;
  margin-bottom:18px;
}
.calc-savings-fill{
  height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--t600),var(--t400));
  transition:width .8s var(--spring);
}
.calc-savings-text{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;
  margin-bottom:18px;
}
.calc-savings-l{
  font-family:var(--fb);font-size:13.5px;font-weight:600;
  color:var(--n500);
}
.calc-savings-v{
  font-family:var(--fd);font-weight:800;
  font-size:32px;letter-spacing:-.025em;line-height:1;
  background:linear-gradient(135deg,var(--t600),var(--t500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.calc-savings-pct{
  font-size:12.5px;color:var(--n500);font-weight:500;
  width:100%;
}
.calc-cta{
  width:100%;justify-content:center;
  font-size:14.5px;padding:14px 24px;
}

.calc-disclaimer{
  display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;color:var(--n400);line-height:1.55;
  margin-top:8px;
}
.calc-disclaimer svg{flex-shrink:0;margin-top:2px;color:var(--n300)}
.calc-disclaimer strong{color:var(--n700);font-weight:600}

/* FAQ */
.calc-faq{padding:96px 0;background:var(--n0)}

/* Responsive */
@media(max-width:980px){
  .calc-grid{grid-template-columns:1fr;gap:20px}
  .calc-input{position:static}
}
@media(max-width:640px){
  .calc{padding-top:64px}
  .calc-hero{padding:32px 0 20px}
  .calc-vs{grid-template-columns:1fr}
  .calc-side{padding:20px}
  .calc-savings{padding:22px}
  .calc-savings-v{font-size:28px}
}