/* CálculoSueldoNeto · estilo común (reglas de la skill taste: una tipografía, un fondo, una tinta, un acento;
   sin sombras, sin degradados, sin píldoras; separación por tono, no por líneas) */
:root{
  --bg:#f3f2ee;--surface:#ffffff;--field:#e9e8e2;--ink:#111311;--muted:#4c524d;
  --brand:#0b6b5c;--brand-ink:#ffffff;--brand-soft:#d9ebe6;
  --warn:#5c4300;--warn-bg:#f1e6c8;--line:#d6d5ce;
  --ss:#3a5a8c;--irpf:#b8742a;--neto:#0b6b5c;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1211;--surface:#181c1a;--field:#202523;--ink:#eef0ec;--muted:#a9b1ab;
  --brand:#4fd1b5;--brand-ink:#05201a;--brand-soft:#16302a;
  --warn:#f0d48a;--warn-bg:#2a2414;--line:#2c322f;
  --ss:#8fb0e6;--irpf:#e6a65d;--neto:#4fd1b5;
}}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg)!important;color:var(--ink)!important;font:17px/1.55 "Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-feature-settings:"tnum" 1}
header,main,footer,.xnav{max-width:1120px!important;padding-left:24px!important;padding-right:24px!important}
@media (max-width:600px){header,main,footer,.xnav{padding-left:16px!important;padding-right:16px!important}}
a{color:var(--brand)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* Cabecera: marca + enlaces planos */
header{display:flex;align-items:center;justify-content:space-between;padding-top:22px!important;padding-bottom:0!important}
.logo{font-weight:800!important;font-size:21px!important;letter-spacing:-.03em;color:var(--ink)!important}
.logo span{color:var(--brand)!important}
header nav{display:none!important}
.xnav{display:flex;gap:22px;padding-top:10px!important;font-size:15px!important;font-weight:600}
.xnav a{color:var(--ink)!important;margin:0!important;text-decoration:none}
.xnav a:hover,header nav a:hover{color:var(--brand)!important}

/* Tipografía: dos tamaños que trabajan, uno muy grande */
h1{font-size:clamp(36px,6.2vw,76px)!important;line-height:1!important;letter-spacing:-.045em!important;font-weight:800;margin:40px 0 18px!important;max-width:16ch}
.lead{color:var(--ink)!important;font-size:clamp(18px,1.6vw,21px);max-width:44ch!important;margin:0 0 40px!important}
h2,article h2{font-size:clamp(26px,3vw,38px)!important;line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:72px 0 14px!important}
h3,article h3{font-size:19px!important;font-weight:800;letter-spacing:-.01em;margin:28px 0 6px!important}
h3.block{text-transform:none!important;letter-spacing:-.01em!important;color:var(--ink)!important;font-size:19px!important;margin:28px 0 0!important}
article{max-width:68ch!important;margin:24px 0 0!important}
article p,article li,main p{color:var(--ink)}

/* Calculadora: superficies por tono, sin bordes ni sombras */
.grid{gap:0!important;align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important}
@media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr)!important}}
.grid>*,.row>*{min-width:0}
.card{border:0!important;border-radius:0!important;box-shadow:none!important;padding:32px!important}
form.card{background:var(--surface)!important}
section.card{background:var(--brand-soft)!important}
@media (max-width:600px){.card{padding:22px 18px!important}}
label{font-size:15px!important;font-weight:700!important}
input,select{border:0!important;border-bottom:2px solid var(--line)!important;border-radius:0!important;background:var(--field)!important;padding:12px 12px!important;font-size:17px!important}
input:focus,select:focus{outline:0!important;border-bottom-color:var(--brand)!important}
.seg{gap:0!important}
.seg button{border:0!important;border-radius:0!important;background:var(--field)!important;font-weight:700;padding:12px!important}
.seg button[aria-pressed="true"]{background:var(--ink)!important;color:var(--bg)!important}
.big,div.total{font-size:clamp(56px,8vw,104px)!important;line-height:.95;letter-spacing:-.05em!important;font-weight:800!important;color:var(--ink)!important;margin:6px 0 10px!important}
.sub{color:var(--ink)!important;font-size:16px!important}
.bar{height:18px!important;border-radius:0!important}
.legend b{border-radius:0!important}
.legend{color:var(--ink)!important;font-size:14px!important}
table{font-size:16px!important}
td,th{border-color:var(--line)!important}
.note{border-radius:0!important;background:var(--warn-bg)!important;color:var(--warn)!important;font-size:14px!important;padding:14px 16px!important}
.btn,.cta{border:0!important;border-radius:0!important;background:var(--ink)!important;color:var(--bg)!important;font-weight:700;padding:14px 20px!important;text-decoration:none;transition:transform .15s ease,background .15s ease}
.btn:hover,.cta:hover{background:var(--brand)!important;color:var(--brand-ink)!important}
.btn:active,.cta:active{transform:translateY(1px)}

/* Páginas SEO: bloque de resultado como campo de color */
.hero{border:0!important;border-radius:0!important;background:var(--brand-soft)!important;padding:36px 32px!important;margin:8px 0 32px!important}
@media (max-width:600px){.hero{padding:24px 18px!important}}
main>h1+.hero{margin-top:0!important}
.tw table,main>table{border:0!important;border-radius:0!important;background:var(--surface)!important}

/* Enlaces internos: listas en columnas, no píldoras */
.chips,nav.rel{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 20px!important}
.chips a,nav.rel a{border:0!important;border-radius:0!important;background:none!important;padding:6px 0!important;margin:0!important;color:var(--brand)!important;font-weight:600;font-size:16px!important;text-decoration:none}
.chips a:hover,nav.rel a:hover{text-decoration:underline}

/* Pie: el nombre vuelve a todo el ancho */
footer{border-top:0!important;margin-top:120px!important;padding:48px max(24px,calc((100vw - 1120px)/2 + 24px))!important;background:var(--ink);color:var(--bg)!important;max-width:none!important;font-size:15px!important}
footer a{color:var(--bg)!important}
footer::before{content:"CálculoSueldoNeto";display:block;font-weight:800;letter-spacing:-.05em;font-size:clamp(38px,9vw,124px);line-height:.9;margin:0 0 28px}
footer>*{max-width:1120px}

@media (prefers-reduced-motion:no-preference){
  .big,.total,.hero,section.card{animation:sube .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media print{footer::before{display:none}}
/* Páginas SEO: el título largo en dos o tres líneas como máximo */
main>h1:has(+.hero){font-size:clamp(32px,4.6vw,58px)!important;max-width:22ch}
td:not(:first-child),th:not(:first-child){white-space:nowrap}
@media (max-width:600px){td,th{padding-left:8px!important;padding-right:8px!important}table{font-size:15px!important}}