:root{--bg:#f7f8fb;--card:#fff;--text:#18212f;--muted:#667085;--line:#e5e7eb;--accent:#2563eb;--accent2:#eff6ff;--max:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:inherit}.wrap{width:min(var(--max),calc(100% - 32px));margin:auto}.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.navin{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{text-decoration:none;font-size:1.3rem;font-weight:800}.brand span{color:var(--accent)}
nav a{margin-left:18px;text-decoration:none;color:#475467;font-size:.95rem}.hero{padding:64px 0 34px}.hero h1{font-size:clamp(2.15rem,7vw,4.2rem);line-height:1.03;letter-spacing:-.045em;margin:0 0 18px;max-width:820px}.hero p{font-size:1.12rem;color:var(--muted);max-width:690px}
.badge{display:inline-block;background:var(--accent2);color:#1d4ed8;padding:7px 11px;border-radius:999px;font-size:.82rem;font-weight:700;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;text-decoration:none;box-shadow:0 2px 8px rgba(16,24,40,.03)}
.card:hover{border-color:#bfdbfe}.card h3{margin:6px 0}.card p,.muted{color:var(--muted)}.active{border:2px solid #bfdbfe}.soon{opacity:.65}.section{padding:32px 0 56px}.section h2{font-size:1.8rem;margin-bottom:8px}
.calc-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
label{font-weight:650;display:block;margin:15px 0 7px}.field{position:relative}.field input,.field select{width:100%;padding:14px;border:1px solid #d0d5dd;border-radius:11px;font-size:1rem;background:#fff}
button{width:100%;border:0;border-radius:11px;padding:15px;background:var(--accent);color:#fff;font-size:1rem;font-weight:750;margin-top:20px;cursor:pointer}
.result{background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:20px}.big{font-size:2.2rem;font-weight:850;letter-spacing:-.04em;margin:3px 0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}.stat strong{display:block;font-size:1.1rem}
.content{max-width:760px}.content h2{margin-top:36px}.content h3{margin-top:28px}.adslot{border:1px dashed #cbd5e1;border-radius:12px;padding:18px;text-align:center;color:#98a2b3;margin:28px 0;font-size:.8rem}
footer{border-top:1px solid var(--line);background:#fff;padding:30px 0;margin-top:48px}.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.foot a{color:var(--muted);margin-right:12px;font-size:.9rem}
.breadcrumb{font-size:.9rem;color:var(--muted);padding-top:25px}.note{background:#fffbeb;border:1px solid #fde68a;padding:14px;border-radius:12px;color:#713f12}
@media(max-width:760px){nav{display:none}.hero{padding-top:42px}.grid,.calc-layout{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.panel{padding:18px}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.primary-link,.secondary-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:11px;text-decoration:none;font-weight:750}.primary-link{background:var(--accent);color:#fff}.secondary-link{background:#fff;border:1px solid var(--line);color:#344054}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}.section-head>p{max-width:610px;margin:0}.eyebrow{display:block;color:#1d4ed8;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.category-block{margin:34px 0 48px}.category-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.category-title h3{font-size:1.3rem;margin:0}.category-title p{color:var(--muted);margin:0;max-width:620px}.grid-4{grid-template-columns:repeat(4,1fr)}.planned{cursor:default}.priority{border-color:#bfdbfe;background:#fbfdff}.card-link{display:inline-block;color:#1d4ed8;font-weight:750;margin-top:10px}.trust-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}.trust-grid h2{margin-top:5px}.trust-list{display:grid;gap:12px}.trust-list div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px}.trust-list strong,.trust-list span{display:block}.trust-list span{color:var(--muted);margin-top:4px}@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.section-head,.category-title{display:block}.category-title p{margin-top:5px}.grid-4,.trust-grid{grid-template-columns:1fr}.hero-actions>a{width:100%}}

.tool-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tool-tab{width:auto;margin:0;padding:10px 13px;background:#fff;color:#344054;border:1px solid #d0d5dd}
.tool-tab.active{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}
.toolbox{display:none}.toolbox.active{display:block}
.inline-fields{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.inline-fields .join{padding-bottom:14px;color:#667085;font-weight:700}
.answer{margin-top:18px;padding:18px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe}
.answer .big{color:#1d4ed8}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:12px;overflow:auto}
.quicklinks{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.quicklinks a{padding:8px 11px;border:1px solid #e5e7eb;border-radius:999px;text-decoration:none;background:#fff;font-size:.9rem}
.seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.inline-fields,.seo-grid{grid-template-columns:1fr}.inline-fields .join{display:none}.tool-tab{flex:1 1 45%}}

.toolbox input,.toolbox select{width:100%;padding:14px;border:1px solid #d0d5dd;border-radius:11px;font-size:1rem;background:#fff;box-sizing:border-box}
.toolbox button:not(.tool-tab){margin-top:18px}

/* Porcentajes v8 */
.toolbox{display:none;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;margin-top:18px}
.toolbox.active{display:block}
.toolbox[hidden]{display:none!important}
.toolbox input,.toolbox select{
  display:block;width:100%;box-sizing:border-box;
  padding:12px 14px;margin:7px 0 14px;
  border:1px solid #d0d5dd;border-radius:10px;
  font:inherit;background:#fff;color:inherit;
}
.toolbox button[type="submit"]{width:100%}


.discount-box{display:none;margin-top:18px}
.discount-box.active{display:block}
.discount-box[hidden]{display:none!important}
.discount-box input{width:100%;box-sizing:border-box;padding:12px 46px 12px 14px;border:1px solid #d0d5dd;border-radius:10px;font:inherit;background:#fff}
.discount-box button[type="submit"]{width:100%;margin-top:18px}
.money-input{position:relative;margin:7px 0 14px}
.money-input span{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#667085;font-weight:700}
.discount-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.discount-stats>div{padding:12px;background:#fff;border-radius:10px}
.discount-stats span,.discount-stats strong{display:block}
@media(max-width:600px){.discount-stats{grid-template-columns:1fr}}


/* Estética uniforme de calculadoras */
.discount-box,
.discount-box.active,
.discount-box:focus,
.discount-box:focus-within {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.discount-box[hidden] { display:none !important; }
.discount-box.active { display:block; }


.iva-box,.iva-box.active,.iva-box:focus,.iva-box:focus-within{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;margin-top:18px}
.iva-box{display:none}.iva-box.active{display:block}.iva-box[hidden]{display:none!important}
.iva-box select{width:100%;box-sizing:border-box;padding:12px 14px;margin:7px 0 14px;border:1px solid #d0d5dd;border-radius:10px;font:inherit;background:#fff}
.iva-box button[type="submit"]{width:100%;margin-top:18px}


.r3-box,.r3-box.active,.r3-box:focus,.r3-box:focus-within{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;margin-top:18px}
.r3-box{display:none}.r3-box.active{display:block}.r3-box[hidden]{display:none!important}
.r3-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.r3-grid input{width:100%;box-sizing:border-box;padding:12px 14px;margin-top:7px;border:1px solid #d0d5dd;border-radius:10px;font:inherit;background:#fff}
.r3-x{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px dashed #98a2b3;border-radius:10px;background:#f8fafc}
.r3-x strong{font-size:1.5rem;color:#155eef}.r3-box button[type="submit"]{width:100%;margin-top:8px}
@media(max-width:600px){.r3-grid{grid-template-columns:1fr}}


.salary-box,.salary-box:focus,.salary-box:focus-within{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.salary-box select{width:100%;box-sizing:border-box;padding:12px 14px;margin:7px 0 14px;border:1px solid #d0d5dd;border-radius:10px;font:inherit;background:#fff}
.salary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.salary-box button[type="submit"]{width:100%;margin-top:14px}
.field-help{font-size:.88rem;color:#667085;margin-top:-6px}.salary-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.salary-results>div{padding:12px;background:#fff;border-radius:10px}.salary-results span,.salary-results strong{display:block}.salary-results span{font-size:.86rem;color:#667085}
@media(max-width:600px){.salary-grid,.salary-results{grid-template-columns:1fr}}


/* Sueldo neto: todos los campos con la misma estética y dimensiones */
.salary-box .money-input {
  position: relative;
  width: 100%;
  margin: 7px 0 14px;
}

.salary-box .money-input input,
.salary-box select {
  width: 100% !important;
  height: 50px !important;
  box-sizing: border-box !important;
  padding: 12px 42px 12px 14px !important;
  margin: 0 !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  background: #fff !important;
  font: inherit !important;
  outline: none !important;
  box-shadow: none !important;
}

.salary-box .money-input span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #667085;
}

.salary-box .money-input input:focus,
.salary-box select:focus {
  border-color: #84adff !important;
  box-shadow: 0 0 0 3px rgba(21,94,239,.08) !important;
}


/* MASTER UI: controles consistentes en todas las calculadoras */
.iva-box input[type="number"], .iva-box select,
.salary-box input[type="number"], .salary-box select,
.r3-box input[type="number"], .r3-box select,
.discount-box input[type="number"], .discount-box select,
.calc-form input[type="number"], .calc-form select {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  background: #fff !important;
  font: inherit !important;
  color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
}
.iva-box input[type="number"]:focus, .iva-box select:focus,
.salary-box input[type="number"]:focus, .salary-box select:focus,
.r3-box input[type="number"]:focus, .r3-box select:focus,
.discount-box input[type="number"]:focus, .discount-box select:focus,
.calc-form input[type="number"]:focus, .calc-form select:focus {
  border-color: #84adff !important;
  box-shadow: 0 0 0 3px rgba(21,94,239,.08) !important;
}
.iva-box .money-input input[type="number"],
.salary-box .money-input input[type="number"] {
  padding-right: 42px !important;
}
.iva-box input[type="number"]::-webkit-inner-spin-button,
.iva-box input[type="number"]::-webkit-outer-spin-button,
.salary-box input[type="number"]::-webkit-inner-spin-button,
.salary-box input[type="number"]::-webkit-outer-spin-button,
.r3-box input[type="number"]::-webkit-inner-spin-button,
.r3-box input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Bruto a neto: misma estética que el resto de calculadoras */
.btn-box,.btn-box:focus,.btn-box:focus-within{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-box .money-input{position:relative;width:100%;margin:7px 0 14px}
.btn-box input[type="number"],.btn-box select{
 width:100%!important;height:50px!important;min-height:50px!important;box-sizing:border-box!important;
 padding:12px 14px!important;border:1px solid #d0d5dd!important;border-radius:10px!important;
 background:#fff!important;font:inherit!important;color:inherit!important;outline:none!important;box-shadow:none!important
}
.btn-box .money-input input{padding-right:42px!important}
.btn-box .money-input span{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#667085}
.btn-box input:focus,.btn-box select:focus{border-color:#84adff!important;box-shadow:0 0 0 3px rgba(21,94,239,.08)!important}
.btn-box button[type="submit"]{width:100%;margin-top:14px}
@media(max-width:600px){.btn-grid{grid-template-columns:1fr}}


/* IRPF: estética uniforme con el resto de Cuantiva */
.irpf-box,.irpf-box:focus,.irpf-box:focus-within{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.irpf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.irpf-box .money-input{position:relative;width:100%;margin:7px 0 14px}
.irpf-box input[type="number"],.irpf-box select{width:100%!important;height:50px!important;min-height:50px!important;box-sizing:border-box!important;padding:12px 14px!important;border:1px solid #d0d5dd!important;border-radius:10px!important;background:#fff!important;font:inherit!important;color:inherit!important;outline:none!important;box-shadow:none!important}
.irpf-box .money-input input{padding-right:42px!important}.irpf-box .money-input span{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#667085}
.irpf-box input:focus,.irpf-box select:focus{border-color:#84adff!important;box-shadow:0 0 0 3px rgba(21,94,239,.08)!important}
.irpf-box button[type="submit"]{width:100%;margin-top:14px}
@media(max-width:600px){.irpf-grid{grid-template-columns:1fr}}


.button-link{display:inline-flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:13px 16px;border-radius:10px;background:#155eef;color:#fff!important;text-decoration:none!important;font-weight:700;text-align:center}
.button-link:hover{filter:brightness(.96)}


/* Hipoteca: estética uniforme */
.mortgage-box,.mortgage-box:focus,.mortgage-box:focus-within{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.mortgage-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mortgage-box .money-input{position:relative;width:100%;margin:7px 0 14px}
.mortgage-box input[type="number"]{width:100%!important;height:50px!important;min-height:50px!important;box-sizing:border-box!important;padding:12px 54px 12px 14px!important;border:1px solid #d0d5dd!important;border-radius:10px!important;background:#fff!important;font:inherit!important;color:inherit!important;outline:none!important;box-shadow:none!important}
.mortgage-box .money-input span{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#667085}
.mortgage-box input:focus{border-color:#84adff!important;box-shadow:0 0 0 3px rgba(21,94,239,.08)!important}
.mortgage-box button[type="submit"]{width:100%;margin-top:14px}
@media(max-width:600px){.mortgage-grid{grid-template-columns:1fr}}

.loan-box{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}.loan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.loan-box .money-input{position:relative;width:100%;margin:7px 0 14px}.loan-box input{width:100%!important;height:50px!important;box-sizing:border-box!important;padding:12px 62px 12px 14px!important;border:1px solid #d0d5dd!important;border-radius:10px!important;background:#fff!important;font:inherit!important}.loan-box .money-input span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#667085;pointer-events:none}.loan-box button{width:100%;margin-top:14px}@media(max-width:600px){.loan-grid{grid-template-columns:1fr}}