/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F0EFE8;
  --ink: #1C2321;
  --ink-soft: #5C645F;
  --ink-faint: #8B9187;
  --line: #DEDDD3;
  --line-strong: #C7C5B8;

  --accent: #0F6E52;
  --accent-strong: #0B5540;
  --accent-soft: #E4F1EB;
  --accent-ink: #0B4536;

  --accent-2: #1B7FB8;
  --accent-2-strong: #146089;
  --accent-2-soft: #E2F1FA;
  --accent-2-ink: #0F4C6B;

  --warn: #B5541B;
  --warn-soft: #FBEADD;
  --danger: #B23A3A;
  --danger-soft: #F6E2DF;

  --gold: #8A6417;
  --gold-strong: #6B4D10;
  --gold-soft: #F7EEDA;
  --gold-ink: #6B4D10;

  --chart-neto: #0F9D6C;
  --chart-ss: #1B7FB8;
  --chart-irpf: #B5541B;
  --split-a: #1B7FB8;
  --split-b: #B5541B;
  --chart-1: #0F9D6C;
  --chart-2: #1B7FB8;
  --chart-3: #B5541B;
  --chart-4: #6A5D9B;
  --chart-5: #7D8A3E;
  --chart-track: #E7E6DE;

  --shadow-sm: 0 1px 2px rgba(28,35,33,0.05);
  --shadow-md: 0 4px 16px -6px rgba(28,35,33,0.16);
  --shadow-lg: 0 12px 32px -10px rgba(28,35,33,0.22);
  --accent-glow: rgba(15,110,82,0.38);
  --accent-glow-strong: rgba(15,110,82,0.55);
  --gold-glow: rgba(138,100,23,0.30);
  --accent-blob: rgba(15,110,82,0.14);
  --accent-2-blob: rgba(27,127,184,0.12);
  --gold-blob: rgba(138,100,23,0.16);

  --sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181A;
    --surface: #1B211F;
    --surface-2: #212925;
    --ink: #ECEEE8;
    --ink-soft: #A8AFA8;
    --ink-faint: #6F766F;
    --line: #333B35;
    --line-strong: #414A42;

    --accent: #52C793;
    --accent-strong: #79DAB2;
    --accent-soft: #1B2F27;
    --accent-ink: #8CE6BC;

    --accent-2: #6FCBF2;
    --accent-2-strong: #8FDBFA;
    --accent-2-soft: #12303C;
    --accent-2-ink: #A9E4FA;

    --warn: #E0A15C;
    --warn-soft: #2E2417;
    --danger: #E28282;
    --danger-soft: #2E1F1F;

    --gold: #E0B15C;
    --gold-strong: #F0C578;
    --gold-soft: #2E2413;
    --gold-ink: #E8C078;

    --chart-neto: #1F9963;
    --chart-ss: #2E86BE;
    --chart-irpf: #C9822C;
    --split-a: #2E86BE;
    --split-b: #C9822C;
    --chart-1: #35B07E;
    --chart-2: #3E95CE;
    --chart-3: #CE7B3A;
    --chart-4: #8E83C4;
    --chart-5: #9DAA5A;
    --chart-track: #2A322C;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 18px -6px rgba(0,0,0,0.45);
    --shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.55);
    --accent-glow: rgba(82,199,147,0.32);
    --accent-glow-strong: rgba(82,199,147,0.48);
    --gold-glow: rgba(224,177,92,0.28);
    --accent-blob: rgba(82,199,147,0.16);
    --accent-2-blob: rgba(111,203,242,0.13);
    --gold-blob: rgba(224,177,92,0.16);
  }
}

:root[data-theme="dark"] {
  --bg: #14181A;
  --surface: #1B211F;
  --surface-2: #212925;
  --ink: #ECEEE8;
  --ink-soft: #A8AFA8;
  --ink-faint: #6F766F;
  --line: #333B35;
  --line-strong: #414A42;

  --accent: #52C793;
  --accent-strong: #79DAB2;
  --accent-soft: #1B2F27;
  --accent-ink: #8CE6BC;

  --accent-2: #6FCBF2;
  --accent-2-strong: #8FDBFA;
  --accent-2-soft: #12303C;
  --accent-2-ink: #A9E4FA;

  --warn: #E0A15C;
  --warn-soft: #2E2417;
  --danger: #E28282;
  --danger-soft: #2E1F1F;

  --gold: #E0B15C;
  --gold-strong: #F0C578;
  --gold-soft: #2E2413;
  --gold-ink: #E8C078;

  --chart-neto: #1F9963;
  --chart-ss: #2E86BE;
  --chart-irpf: #C9822C;
  --split-a: #2E86BE;
  --split-b: #C9822C;
  --chart-1: #35B07E;
  --chart-2: #3E95CE;
  --chart-3: #CE7B3A;
  --chart-4: #8E83C4;
  --chart-5: #9DAA5A;
  --chart-track: #2A322C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 18px -6px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.55);
  --accent-glow: rgba(82,199,147,0.32);
  --accent-glow-strong: rgba(82,199,147,0.48);
  --gold-glow: rgba(224,177,92,0.28);
  --accent-blob: rgba(82,199,147,0.16);
  --accent-2-blob: rgba(111,203,242,0.13);
  --gold-blob: rgba(224,177,92,0.16);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; max-width: 68ch; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; letter-spacing: -0.01em; font-weight: 800; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container { max-width: 1040px; margin: 0 auto; padding-inline: 1.25rem; }
.container-narrow { max-width: 760px; margin: 0 auto; padding-inline: 1.25rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0;
}
.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: .5em;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 14px; height: 2px;
  border-radius: 2px; background: var(--gold);
}
.tabular { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* Aclaración de un término técnico (base de cotización, retención...) sin
   alargar la página: un botón "i" con globo en :hover/:focus, CSS puro.
   El color se invierte solo (bg var(--ink), texto var(--bg)): en claro
   sale un globo oscuro, en oscuro uno claro, y siempre hay contraste. */
.term-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: .3rem; }
.term-tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-faint); cursor: help;
}
.term-tip-btn svg { width: 12px; height: 12px; }
.term-tip-btn:hover, .term-tip-btn:focus-visible { background: var(--accent-soft); color: var(--accent-strong); }
.term-tip-bubble {
  position: absolute; bottom: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 260px;
  padding: .55rem .7rem; border-radius: var(--radius-m);
  background: var(--ink); color: var(--bg); font-size: .78rem; line-height: 1.4; font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s var(--ease-out), transform .14s var(--ease-out), visibility .14s var(--ease-out);
  z-index: 20;
}
.term-tip-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.term-tip-btn:hover + .term-tip-bubble,
.term-tip-btn:focus-visible + .term-tip-bubble {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .term-tip-bubble { transition: opacity .01ms; }
}
@media (max-width: 480px) {
  .term-tip-bubble { left: auto; right: -.6rem; transform: translateY(4px); }
  .term-tip-btn:hover + .term-tip-bubble, .term-tip-btn:focus-visible + .term-tip-bubble { transform: translateY(0); }
  .term-tip-bubble::after { left: auto; right: .8rem; transform: none; }
}

/* =============================================================
   4. Header / nav
   ============================================================= */
.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  position: sticky; top: 0; z-index: 40;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg); }
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1rem;
  gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -1px var(--accent-glow);
}
.nav-group { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.main-nav { display: flex; gap: 1rem; align-items: center; }
.main-nav a {
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  padding-block: .3rem; border-bottom: 2px solid transparent;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.main-nav a[data-active="true"] { color: var(--ink); border-color: var(--accent); }
.main-nav a[data-disabled="true"] { color: var(--ink-faint); cursor: default; pointer-events: none; }
@media (max-width: 720px) {
  .main-nav a[data-disabled="true"] { display: none; }
}

/* Menú de calculadoras: cada categoría del nav abre la lista de sus
   calculadoras, para llegar en un clic en vez de pasar por el índice de la
   categoría. Se abre con el ratón y también al enfocar el enlace con el
   teclado (:focus-within), así que no hace falta JS: sin CSS queda una lista
   de enlaces normal detrás de cada categoría. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-panel {
  position: absolute; top: 100%; left: 50%; z-index: 50;
  margin-top: .5rem; padding: .4rem;
  display: grid; gap: .05rem;
  min-width: max-content;
  border: 1px solid var(--line-strong); border-radius: var(--radius-l);
  background: var(--surface); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-5px);
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out),
              visibility .16s var(--ease-out);
}
/* El hueco entre el enlace y el panel haría que el menú se cerrase al
   cruzarlo con el ratón: esta banda invisible lo cubre. */
.nav-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem;
}
.nav-panel[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-panel a {
  display: block; padding: .42rem .6rem; border-radius: var(--radius-m);
  font-size: .87rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; border-bottom: 0;
  transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.nav-panel a:hover, .nav-panel a:focus-visible {
  background: var(--surface-2); color: var(--ink);
}
.nav-panel-todo {
  margin-top: .25rem; padding-top: .5rem !important;
  border-top: 1px solid var(--line);
  color: var(--accent-strong) !important; font-size: .82rem !important;
}
.nav-panel[data-cols="2"] .nav-panel-todo { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition: none; transform: translateX(-50%); }
  .nav-item:hover > .nav-panel,
  .nav-item:focus-within > .nav-panel { transform: translateX(-50%); }
}
/* Por debajo de 960px el nav-group es una franja con scroll horizontal, que
   recortaría el panel: ahí la categoría lleva directa a su índice, que ya
   lista todas sus calculadoras. */
@media (max-width: 960px) {
  .nav-panel { display: none; }
}

/* Nav secundaria (Sueldos 2026, Sobre nosotros): enlaces de utilidad,
   separados visualmente de las categorías principales y con menos peso
   tipográfico, para que no lean como "una sección más". */
.utility-nav {
  display: flex; gap: 1rem; align-items: center;
  padding-left: .9rem; border-left: 1px solid var(--line);
}
.utility-nav a {
  font-size: .82rem; font-weight: 600; color: var(--ink-faint);
  padding-block: .3rem; border-bottom: 2px solid transparent;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.utility-nav a:hover, .utility-nav a:focus-visible { color: var(--ink-soft); }
.utility-nav a[data-active="true"] { color: var(--accent-strong); border-color: var(--accent); }

/* Por debajo de 960 px el nav (categorías + utilidad + buscador + botón de
   tema) no cabe en una
   fila. En vez de romper el layout de la página, el propio grupo se
   convierte en una franja con scroll horizontal: la cabecera no crece
   de ancho y todos los enlaces siguen siendo alcanzables con un swipe. */
@media (max-width: 960px) {
  .site-header .container { gap: .6rem; }
  .brand { flex-shrink: 0; }
  .nav-group {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.05rem;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
  }
  .nav-group::-webkit-scrollbar { display: none; }
  .main-nav, .utility-nav { flex-shrink: 0; }
  .utility-nav { padding-left: .9rem; }
  .main-nav a, .utility-nav a { white-space: nowrap; flex-shrink: 0; }
  .theme-toggle { flex-shrink: 0; }
}

.theme-toggle {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--ink); border-color: var(--accent); }
.theme-toggle:active { transform: scale(0.92); }
/* Los dos iconos se apilan en la misma celda y se cruzan con un giro suave
   en vez del display:none/block de golpe que había antes. */
.theme-toggle { display: grid; place-items: center; }
.theme-toggle svg {
  grid-area: 1 / 1; width: 17px; height: 17px;
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
}
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-60deg) scale(.5); }
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(60deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* Buscador del sitio. En la cabecera solo vive el boton: el panel lo monta
   core.js la primera vez que se abre, para no repetir su HTML en las 135
   paginas. Ojo con [hidden]: la regla de clase trae display y le gana al
   display:none del navegador, asi que hay que apagarlo a mano. */
.search-trigger {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
  height: 34px; padding: 0 .5rem 0 .7rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-faint);
  font-family: var(--sans); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.search-trigger[hidden] { display: none; }
.search-trigger svg { width: 15px; height: 15px; }
.search-trigger:hover, .search-trigger:focus-visible { color: var(--ink); border-color: var(--accent); background: var(--surface); }
.search-trigger:active { transform: scale(.97); }
.search-trigger kbd {
  font-family: var(--mono); font-size: .68rem; line-height: 1;
  padding: .18rem .34rem; border: 1px solid var(--line-strong); border-radius: 5px;
  background: var(--bg); color: var(--ink-faint);
}
/* En pantallas estrechas el nav ya va justo: el boton se queda en icono. */
@media (max-width: 1040px) {
  .search-trigger-text, .search-trigger kbd { display: none; }
  .search-trigger { width: 34px; padding: 0; justify-content: center; }
}

/* Por encima del aviso de cookies (z-index 70): mientras el buscador esta
   abierto manda el dialogo; al cerrarlo el aviso vuelve a quedar encima. */
.site-search { position: fixed; inset: 0; z-index: 80; }
.site-search[hidden] { display: none; }
.site-search-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.site-search-panel {
  position: relative; width: min(38rem, calc(100vw - 1.6rem));
  margin: min(11vh, 5.5rem) auto 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-l); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .site-search-panel { animation: cc-search-in .18s var(--ease-out) both; }
  @keyframes cc-search-in { from { opacity: 0; transform: translateY(-8px); } }
}
.site-search-field {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
}
.site-search-field svg { width: 18px; height: 18px; color: var(--ink-faint); flex-shrink: 0; }
.site-search-field input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font-family: var(--sans); font-size: 1.02rem; padding: .2rem 0;
}
.site-search-field input:focus { outline: none; }
.site-search-field input::-webkit-search-cancel-button { display: none; }
.site-search-close {
  flex-shrink: 0; font-family: var(--mono); font-size: .7rem; color: var(--ink-faint);
  padding: .25rem .45rem; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface-2); cursor: pointer;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.site-search-close:hover, .site-search-close:focus-visible { color: var(--ink); border-color: var(--accent); }
.site-search-results {
  list-style: none; margin: 0; padding: .35rem;
  max-height: min(52vh, 25rem); overflow-y: auto; overscroll-behavior: contain;
}
.site-search-results li { margin: 0; }
.site-search-results a {
  display: block; padding: .5rem .65rem; border-radius: var(--radius-m);
  text-decoration: none; color: inherit;
  transition: background .12s var(--ease-out);
}
.site-search-results a:hover, .site-search-results [aria-selected="true"] a { background: var(--surface-2); }
.site-search-results mark { background: var(--accent-soft); color: var(--accent-ink); border-radius: 3px; padding: 0 .08em; }
.site-search-nombre { display: block; font-weight: 700; font-size: .95rem; }
.site-search-desc { display: block; font-size: .79rem; color: var(--ink-faint); margin-top: .12rem; }
.site-search-titulo {
  padding: .5rem .65rem .25rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}
.site-search-vacio { padding: 1.3rem .8rem; color: var(--ink-soft); font-size: .92rem; }
.site-search-pie {
  display: flex; gap: 1rem; margin: 0; padding: .5rem 1rem;
  border-top: 1px solid var(--line); font-size: .73rem; color: var(--ink-faint);
}

/* Buscador de "Sueldos por profesión" (ahora incrustado en /sueldos2026/,
   ya no vive en un <dialog> del header). */
.salarios-controls {
  display: flex; gap: .7rem; padding: 0 0 1rem; flex-shrink: 0; flex-wrap: wrap;
}
.salarios-controls input[type="search"], .salarios-controls select {
  padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-m);
  background: var(--surface-2); color: var(--ink); font-family: var(--sans); font-size: 1rem;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.salarios-controls input[type="search"]:focus, .salarios-controls select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.salarios-controls input[type="search"] { flex: 2 1 220px; }
.salarios-controls select { flex: 1 1 160px; }
.salarios-list { overflow-y: auto; padding: 0; flex: 1; }

.salarios-prompt {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .7rem; padding: 2.6rem 1.5rem; border-radius: var(--radius-m);
  border: 1.5px dashed var(--line-strong); background: var(--surface-2);
}
.salarios-prompt-icon { width: 30px; height: 30px; color: var(--ink-faint); }
.salarios-prompt p { color: var(--ink-soft); font-size: .96rem; max-width: 34ch; margin: 0; }

.salarios-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "title value" "sector value" "note note" "link link";
  gap: .3rem 1rem;
  padding: 1rem .6rem; border-radius: var(--radius-m);
  border-bottom: 1px solid var(--line);
  transition: background .15s var(--ease-out);
}
.salarios-row:hover { background: var(--surface-2); }
.salarios-row:last-child { border-bottom: none; }
.salarios-row-title { grid-area: title; font-size: 1.05rem; font-weight: 700; }
.salarios-row-sector {
  grid-area: sector;
  font-size: .74rem; font-weight: 700; color: var(--accent-2-ink);
  background: var(--accent-2-soft); display: inline-block; width: fit-content;
  padding: .18rem .6rem; border-radius: 999px; margin-top: .3rem;
}
.salarios-row-value {
  grid-area: value;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700; text-align: right;
  align-self: center; color: var(--ink);
}
.salarios-row-note { grid-area: note; font-size: .78rem; color: var(--ink-faint); margin-top: .2rem; }
.salarios-row-link { grid-area: link; font-size: .88rem; margin-top: .5rem; }
.salarios-row-link a {
  display: inline-flex; align-items: center; gap: .35em; font-weight: 700; color: var(--accent-strong);
  transition: gap .15s var(--ease-out);
}
.salarios-row:hover .salarios-row-link a, .salarios-row-link a:focus-visible { gap: .55em; }
.salarios-empty { padding: 2rem 0; text-align: center; color: var(--ink-faint); font-size: .95rem; }

/* =============================================================
   5. Hero (home + tool page)
   ============================================================= */
.page-hero { padding-block: 1.6rem 1.2rem; }
.page-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  max-width: 18ch;
  margin-block: .6rem .5rem;
}
.page-hero .lede { color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; }
.page-hero .trust-row { justify-content: flex-start; margin-top: .9rem; margin-bottom: 0; }
.page-hero .trust-note { color: var(--ink-faint); font-size: .83rem; max-width: 56ch; margin: .55rem 0 0; }
.page-hero .trust-note a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.page-hero .trust-note a:hover, .page-hero .trust-note a:focus-visible { color: var(--accent-ink); }
/* Firma de autoria: quien responde de las cifras y cuando se revisaron. Va
   debajo de la nota de confianza y con menos peso que ella, porque es un dato
   de procedencia, no un argumento de venta. */
.page-hero .byline { color: var(--ink-faint); font-size: .8rem; max-width: 56ch; margin: .5rem 0 0; }
.page-hero .byline strong { color: var(--ink-soft); font-weight: 600; }
.page-hero .byline a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.page-hero .byline a:hover, .page-hero .byline a:focus-visible { color: var(--accent-ink); }
.quienes-somos-page main a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.quienes-somos-page main a:hover, .quienes-somos-page main a:focus-visible { color: var(--accent-ink); }

/* Bloque de intro de /sueldos2026/: fondo degradado suave + tarjetas de cifras
   clave, para que la página no arranque plana. */
.sueldos-intro {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 55%, var(--accent-2-soft) 100%);
  border: 1px solid var(--line);
  padding: 1.8rem 1.4rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 640px) { .sueldos-intro { padding: 2.2rem 2.2rem; } }
.sueldos-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .8rem; margin-top: 1.4rem; max-width: 56rem;
}
@media (max-width: 680px) { .sueldos-stats { grid-template-columns: 1fr; } }
.sueldos-stat {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m);
}
.sueldos-stat-value { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; color: var(--accent-strong); }
.sueldos-stat-label { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.sueldos-stat-desc { font-size: .78rem; line-height: 1.45; color: var(--ink-faint); margin-top: .15rem; }

.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 3.4rem 2rem 2.8rem;
  text-align: center;
  margin-top: 1.4rem;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 42%, var(--accent-2-soft) 100%);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .home-hero { padding: 2.6rem 1.3rem 2.2rem; border-radius: 20px; } }
.home-hero .eyebrow { justify-content: center; }
.home-hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.1rem);
  max-width: 15ch;
  margin-inline: auto;
  margin-block: .8rem .6rem;
  letter-spacing: -0.025em;
}
.home-hero .lede { margin-inline: auto; text-align: center; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold-ink);
  padding: .5rem 1.1rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.hero-badge svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

.hero-highlight {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede-accent { color: var(--accent-strong); font-weight: 700; }

.badge.pop-blue { background: var(--accent-2-soft); color: var(--accent-2-ink); }

.feat-icon { display: inline-flex; margin-bottom: .6rem; color: var(--accent-strong); }
.feat-icon .icon { width: 22px; height: 22px; }

/* =============================================================
   6. Cards (generic)
   ============================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}
/* Tarjetas que son enlace (guias relacionadas, calculadoras del pie de
   pagina): sin esto no daban ninguna senal ni al pasar por encima ni al
   pulsarlas, y parecian texto suelto dentro de un recuadro. */
a.card {
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
              transform .2s var(--ease-out);
}
a.card:hover, a.card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
a.card:active { transform: translateY(0) scale(0.995); }

/* Tarjetas de herramientas en las páginas de categoría (Autónomos, Trabajadores...) */
.icon-badge {
  width: 46px; height: 46px; border-radius: var(--radius-m);
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--accent-2-soft) 100%);
  color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.icon-badge .icon { width: 23px; height: 23px; stroke-width: 1.9; }

.tools-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem; margin-top: 1.8rem;
}
.tool-feature {
  display: block;
  padding: 1.7rem 1.8rem;
  margin-top: 0;
  transition: box-shadow .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.tool-feature:hover, .tool-feature:focus-visible {
  box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-3px);
}
.tool-feature .cat {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-strong); margin-bottom: .8rem; display: block;
}
.tool-feature h2 { font-size: 1.25rem; margin-bottom: .4rem; }
.tool-feature p { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.2rem; }
.tool-feature .tool-cta {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; font-size: .9rem; color: var(--accent-strong);
}
.tool-feature .tool-cta .btn-arrow { display: inline-block; transition: transform .15s var(--ease-out); }
.tool-feature:hover .tool-cta .btn-arrow, .tool-feature:focus-visible .tool-cta .btn-arrow { transform: translateX(4px); }

.category-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px;
  padding: 2.2rem 2rem 2.4rem;
  margin-top: 1.2rem;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 55%, var(--accent-2-soft) 100%);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .category-hero { padding: 1.6rem 1.3rem 1.8rem; border-radius: 18px; } }

/* Manchas de luz decorativas, compartidas por las tres cabeceras con
   fondo degradado (home, categoría, sueldos). Puramente decorativas:
   detrás del contenido, sin interacción, recortadas al radio del bloque. */
.home-hero::before, .category-hero::before, .sueldos-intro::before,
.home-hero::after, .category-hero::after, .sueldos-intro::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(2px);
}
.home-hero::before, .category-hero::before, .sueldos-intro::before {
  width: 320px; height: 320px; top: -140px; right: -70px;
  background: radial-gradient(circle, var(--accent-blob) 0%, transparent 72%);
}
.home-hero::after, .category-hero::after, .sueldos-intro::after {
  width: 260px; height: 260px; bottom: -120px; left: -60px;
  background: radial-gradient(circle, var(--gold-blob) 0%, transparent 72%);
}

/* Próximamente grid */
.upcoming-heading {
  margin-top: 2.6rem; margin-bottom: .9rem;
  font-family: var(--mono); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.upcoming-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem;
}
@media (min-width: 720px) { .upcoming-grid { grid-template-columns: repeat(4, 1fr); } }
.upcoming-card {
  padding: 1.1rem 1.1rem 1rem;
  border-style: dashed;
  color: var(--ink-faint);
  opacity: .82;
}
.upcoming-card .icon { width: 22px; height: 22px; margin-bottom: .6rem; color: var(--ink-faint); }
.upcoming-card h3 { font-size: .95rem; color: var(--ink-soft); margin-bottom: .25rem; }
.upcoming-card p { font-size: .82rem; }
.upcoming-card .soon-tag {
  display: inline-block; margin-top: .6rem;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line-strong); border-radius: 20px;
  padding: .15rem .55rem;
}

/* =============================================================
   7. Tool card (calculator)
   ============================================================= */
.tool-card {
  padding: 1.6rem;
  margin-top: 1.2rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 640px) { .tool-card { padding: 2rem 2.2rem; } }

/* Dos columnas en pantalla ancha: los campos a la izquierda, el resultado
   a la derecha. En las 63 calculadoras .result es el ultimo hijo directo
   de .tool-card, asi que basta con mandarlo a la columna 2 y el resto a
   la 1; no hace falta tocar el HTML. Se usa :has() para no partir en dos
   las tarjetas que no tienen bloque de resultado. */
@media (min-width: 1000px) {
  .tool-card:has(> .result) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    /* Filas explicitas para poder decir grid-row: 1 / -1 en el resultado.
       Sin ellas ocuparia solo la primera fila y la columna de campos se
       quedaba con un hueco del alto del panel. Las filas que sobran miden
       cero y no hay row-gap, asi que no ocupan nada. */
    grid-template-rows: repeat(30, auto);
    column-gap: 2.4rem;
    align-items: start;
  }
  .tool-card:has(> .result) > :not(.result) { grid-column: 1; }
  .tool-card:has(> .result) > .result {
    grid-column: 2;
    grid-row: 1 / -1;
    /* Al abarcar toda la columna, el panel puede quedarse a la vista
       mientras se recorren los campos de la izquierda. */
    position: sticky;
    top: 5rem;
    /* Deja de ser una seccion separada por una linea y pasa a ser un panel.
       Con un formulario corto la columna izquierda queda vacia; en panel la
       composicion se lee como formulario + resultado, no como un hueco. */
    margin-top: 0;
    padding: 1.6rem;
    border-top: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface-2);
  }
  /* El <noscript> no pinta nada y ocuparia el solo la primera fila. */
  .tool-card:has(> .result) > noscript { display: none; }
  /* Con la columna estrecha, tres tarjetas de cifra parten los numeros
     por la mitad (160.00 / 0 euros). Que entren las que quepan. */
  .tool-card:has(> .result) .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  }
  .tool-card:has(> .result) .stat-card .num { font-size: 1.28rem; }
  .tool-card:has(> .result) .stat-card { background: var(--surface); }
}

/* A partir de aqui sobra sitio a los lados: la herramienta se sale un poco
   del contenedor para que las dos columnas respiren. El resto de la pagina
   mantiene su ancho de lectura. */
@media (min-width: 1280px) {
  .tool-card:has(> .result) {
    width: calc(100% + 11rem);
    margin-inline: -5.5rem;
  }
}

.field { margin-bottom: 1rem; }
.field label {
  display: block; font-weight: 700; font-size: .92rem; margin-bottom: .5rem;
}
.field .hint { font-size: .82rem; color: var(--ink-faint); margin-top: .4rem; }

.amount-row {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem;
}
.amount-row input[type="number"] {
  font-family: var(--mono); font-size: 1.6rem; font-weight: 700;
  width: 9.5ch; padding: .35rem .5rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--ink);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.amount-row input[type="number"]:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.amount-row .unit { font-size: 1.1rem; color: var(--ink-soft); font-weight: 600; }
.amount-row .per { font-size: .85rem; color: var(--ink-faint); }

input[type="range"] {
  width: 100%; height: 6px; border-radius: 4px;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 30%), var(--line) var(--fill, 30%), var(--line) 100%);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
}
.range-scale {
  display: flex; justify-content: space-between; font-size: .75rem;
  color: var(--ink-faint); margin-top: .35rem; font-family: var(--mono);
}

.check-row {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; font-weight: 600;
}
.check-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

/* Radios agrupados (pagas, tipo de contrato...): pastilla clicable con
   estado relleno en vez del radio nativo del navegador. El input sigue
   en el DOM (accesible por teclado y lector de pantalla), solo se oculta
   visualmente; :has() ya se usa en .tool-card para el layout, mismo soporte. */
.radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.radio-row .check-row {
  position: relative;
  gap: .5rem;
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out),
              color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .1s var(--ease-out);
}
.radio-row .check-row:hover { border-color: var(--accent); color: var(--ink); }
.radio-row .check-row:active { transform: scale(0.97); }
.radio-row .check-row input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.radio-row .check-row:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 3px 10px -3px var(--accent-glow);
}
.radio-row .check-row:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.benefit-row {
  align-items: flex-start; padding: .7rem .8rem; margin-bottom: .5rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.benefit-row.is-checked { border-color: var(--accent); background: var(--accent-soft); }
.benefit-row input[data-benefit-check] { margin-top: .15rem; flex-shrink: 0; }
.benefit-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 0; }
.benefit-title { font-weight: 600; font-size: .92rem; }
.benefit-amount {
  display: flex; align-items: center; gap: .4rem; font-family: var(--mono);
  font-size: .92rem; color: var(--ink);
}
.benefit-amount input {
  width: 7ch; padding: .3rem .4rem; border: 1px solid var(--line-strong);
  border-radius: 6px; background: var(--surface-2); color: var(--ink); font-family: var(--mono);
}
.benefit-amount input:disabled { opacity: .45; }
.benefit-amount .unit, .benefit-amount .per { color: var(--ink-faint); font-weight: 500; font-size: .85rem; }
.benefit-hint { font-size: .78rem; color: var(--ink-soft); font-weight: 400; }

.expand {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong);
}
.expand summary {
  cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--accent-strong);
  list-style: none;
}
.expand summary::-webkit-details-marker { display: none; }
.expand summary::before { content: "+ "; }
.expand[open] summary::before { content: "− "; }
.expand-body { padding-top: .8rem; display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .expand-body { grid-template-columns: 1fr; } }
.mini-field label { font-size: .82rem; font-weight: 600; margin-bottom: .3rem; display: block; }
.mini-field input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink);
  font-family: var(--mono);
}
.mini-field input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.mini-select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Select de los campos compactos (CCAA, situacion familiar...): flecha
   propia en vez del control nativo del navegador, que no coge ningun
   estilo del sitio. */
.mini-select {
  width: 100%; padding: .5rem 2.1rem .5rem .6rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background-color: var(--surface-2); color: var(--ink); font-family: var(--sans);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C645F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
/* El SVG de la flecha no puede leer variables CSS (color fijo en el
   stroke), asi que en modo oscuro se repite con un gris mas claro para
   no perder contraste contra el fondo oscuro del select. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mini-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8AFA8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .mini-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8AFA8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Result zone */
.result {
  margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.result-headline {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.result-headline .value {
  font-family: var(--mono); font-size: 2.8rem; font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.result-headline .value-unit { font-size: 1.1rem; color: var(--ink-soft); font-weight: 600; }
.result-sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1rem; }

.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  padding: .28rem .6rem; border-radius: 20px;
}
.badge.tramo { background: var(--accent-soft); color: var(--accent-ink); }
.badge.flat { background: var(--warn-soft); color: var(--warn); }

.result-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.1rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .75rem 1.3rem; border-radius: var(--radius-s);
  font-weight: 700; font-size: .95rem;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  box-shadow: 0 3px 10px -3px var(--accent-glow);
}
.btn-primary:hover {
  box-shadow: 0 6px 16px -4px var(--accent-glow-strong);
  transform: translateY(-1px);
}
.btn-ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn:active { transform: scale(0.98); }

.privacy-badge {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1.4rem; padding: .85rem 1rem;
  background: var(--surface-2); border-radius: var(--radius-m);
  font-size: .84rem; color: var(--ink-soft);
}
.privacy-badge svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }

/* =============================================================
   8. Tramos table
   ============================================================= */
.tramos-wrap { margin-top: 1.4rem; overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--line); }
table.tramos { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
table.tramos caption { text-align: left; padding: .8rem 1rem; font-weight: 700; background: var(--surface-2); }
table.tramos th, table.tramos td { padding: .5rem .8rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tramos th:first-child, table.tramos td:first-child { text-align: left; }
table.tramos thead th {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); background: var(--surface-2);
}
table.tramos td { font-family: var(--mono); }
table.tramos tbody tr:last-child td { border-bottom: none; }
table.tramos tbody tr[data-active="true"] { background: var(--accent-soft); }
table.tramos tbody tr[data-active="true"] td { color: var(--accent-ink); font-weight: 700; }
table.tramos tbody tr[data-active="true"] td:first-child::before {
  content: "→ "; font-family: var(--sans);
}

/* =============================================================
   9. Comparison / projection cards
   ============================================================= */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1.2rem; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  padding: 1.15rem 1.2rem; min-width: 0;
  position: relative; overflow: hidden;
}
/* Franja de acento arriba: le da a la cifra el peso de un dato destacado
   en vez de una celda de tabla suelta. */
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  opacity: .5;
}
.stat-card .label {
  font-size: .74rem; color: var(--ink-faint); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .35rem;
}
.stat-card .num {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 800;
  letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.stat-card .num.good { color: var(--accent-strong); }
.stat-card .note { font-size: .78rem; color: var(--ink-soft); margin-top: .35rem; }

/* =============================================================
   9b. Payslip breakdown chart (bruto -> neto stacked bar)
   ============================================================= */
.payslip-chart { margin-top: 1.3rem; }
.payslip-chart-title {
  display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); margin-bottom: .5rem;
}
.payslip-bar {
  display: flex; width: 100%; height: 22px; border-radius: var(--radius-s);
  overflow: hidden; background: var(--surface-2);
}
.payslip-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 2px; overflow: hidden; transition: width .2s var(--ease-out);
}
.payslip-seg:not(:last-child) { border-right: 2px solid var(--surface); }
.payslip-seg--neto { background: var(--chart-neto); }
.payslip-seg--ss { background: var(--chart-ss); }
.payslip-seg--irpf { background: var(--chart-irpf); }
.payslip-seg-label {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: #fff;
  white-space: nowrap; padding: 0 .3rem;
}
.payslip-legend {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .7rem;
  list-style: none; padding: 0;
}
.payslip-legend-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-soft);
}
.payslip-legend-item strong { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.payslip-legend-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.payslip-legend-item--neto .payslip-legend-swatch { background: var(--chart-neto); }
.payslip-legend-item--ss .payslip-legend-swatch { background: var(--chart-ss); }
.payslip-legend-item--irpf .payslip-legend-swatch { background: var(--chart-irpf); }

/* =============================================================
   9c. Split bar (generic 2-way part-to-whole breakdown)
   ============================================================= */
.split-chart { margin-top: 1.3rem; }
.split-chart-title {
  display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); margin-bottom: .5rem;
}
.split-bar {
  display: flex; width: 100%; height: 22px; border-radius: var(--radius-s);
  overflow: hidden; background: var(--surface-2);
}
.split-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 2px; overflow: hidden; transition: width .2s var(--ease-out);
}
.split-seg:not(:last-child) { border-right: 2px solid var(--surface); }
.split-seg--a { background: var(--split-a); }
.split-seg--b { background: var(--split-b); }
.split-seg-label {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: #fff;
  white-space: nowrap; padding: 0 .3rem;
}
.split-legend {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .7rem;
  list-style: none; padding: 0;
}
.split-legend-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-soft);
}
.split-legend-item strong { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.split-legend-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.split-legend-item--a .split-legend-swatch { background: var(--split-a); }
.split-legend-item--b .split-legend-swatch { background: var(--split-b); }

.badge.neg { background: var(--danger-soft); color: var(--danger); }

/* =============================================================
   9d. Gráficos genéricos (CC.renderBar / CC.renderLine)
   Componentes construidos desde JS: el HTML solo aporta el
   contenedor vacío, así que añadir un gráfico a una calculadora
   nueva es una línea de markup y una llamada.
   ============================================================= */
.cc-chart { margin-top: 1.4rem; }
.cc-chart-title {
  display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); margin-bottom: .55rem;
}
.cc-chart-note { margin-top: .6rem; font-size: .82rem; color: var(--ink-soft); }

/* --- Barra de composición (apilada, 2..5 tramos) --- */
.cc-bar {
  display: flex; width: 100%; height: 30px; border-radius: var(--radius-s);
  overflow: hidden; background: var(--chart-track);
}
.cc-bar-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 2px; overflow: hidden;
  transition: width .32s var(--ease-out);
}
.cc-bar-seg:not(:last-child) { border-right: 2px solid var(--surface); }
.cc-bar-seg-label {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: #fff;
  white-space: nowrap; padding: 0 .35rem;
  font-variant-numeric: tabular-nums;
}
.cc-bar-legend {
  display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; margin-top: .75rem;
  list-style: none; padding: 0;
}
.cc-bar-legend-item {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-size: .84rem; color: var(--ink-soft);
}
.cc-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  flex-shrink: 0; transform: translateY(-1px);
}
.cc-legend-val {
  color: var(--ink); font-family: var(--mono); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cc-legend-pct { color: var(--ink-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* --- Gráfico de evolución (SVG en línea) --- */
.cc-line { position: relative; }
.cc-line-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cc-line-grid { stroke: var(--line); stroke-width: 1; }
.cc-line-axis-label {
  fill: var(--ink-faint); font-family: var(--mono); font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.cc-line-path { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.cc-line-area { stroke: none; opacity: .13; }
.cc-line-dot { stroke: var(--surface); stroke-width: 2; }
.cc-line-cross { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.cc-line-cross-label {
  fill: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-line-path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: cc-draw .9s var(--ease-out) forwards; }
  @keyframes cc-draw { to { stroke-dashoffset: 0; } }
}
/* Los gráficos que build.py sirve ya dibujados no tienen JS que mida el trazo
   y ponga --len, así que la animación de arriba no puede aplicarse: se apaga
   en vez de dejar que la línea dependa de una variable que nadie define. */
.cc-chart[data-cc-static] .cc-line-path {
  stroke-dasharray: none; stroke-dashoffset: 0; animation: none;
}

/* Paleta categórica: se aplica por índice, así una barra de 2 tramos y
   otra de 5 usan la misma escala y el sitio se lee como un solo sistema. */
/* Paleta. Separamos trazo (.cc-sN) de relleno (.cc-fN) a propósito: si una
   misma clase pusiera las dos, el `fill: none` de .cc-line-path perdería
   contra ella por orden de cascada y la línea se dibujaría rellena. */
.cc-c1 { background: var(--chart-1); } .cc-s1 { stroke: var(--chart-1); } .cc-f1 { fill: var(--chart-1); }
.cc-c2 { background: var(--chart-2); } .cc-s2 { stroke: var(--chart-2); } .cc-f2 { fill: var(--chart-2); }
.cc-c3 { background: var(--chart-3); } .cc-s3 { stroke: var(--chart-3); } .cc-f3 { fill: var(--chart-3); }
.cc-c4 { background: var(--chart-4); } .cc-s4 { stroke: var(--chart-4); } .cc-f4 { fill: var(--chart-4); }
.cc-c5 { background: var(--chart-5); } .cc-s5 { stroke: var(--chart-5); } .cc-f5 { fill: var(--chart-5); }

@media (max-width: 560px) {
  .cc-bar { height: 26px; }
  .cc-bar-seg-label { font-size: .68rem; }
  .cc-bar-legend { gap: .45rem .8rem; }
}

/* =============================================================
   10. Ad slots
   ============================================================= */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--ink-faint);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface-2);
}
.ad-slot--leaderboard { min-height: 90px; margin-block: 2rem; }
.ad-slot--incontent { min-height: 250px; margin-block: 2rem; max-width: 336px; margin-inline: auto; }
.ad-slot.is-live {
  display: block; border: none; background: transparent; padding: 0; min-height: 0;
}

/* Comparador de ofertas: dos columnas lado a lado */
.offers-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .offers-grid { grid-template-columns: 1fr 1fr; } }
.offers-grid > .card { padding: 1rem 1.1rem; }
.offers-grid h3 { margin: 0 0 .7rem; font-size: 1rem; }

/* Selector de pestañas: solo entra en juego por debajo de 640px, donde
   las dos ofertas no caben lado a lado y rellenar la B exige bajar toda
   la pantalla. Son radios nativos (name compartido), así que el teclado
   ya funciona solo — no hace falta ARIA de tablist ni JS. En pantallas
   anchas se oculta y se ven las dos columnas a la vez, como antes.
   Patrón reutilizable: duplica el bloque, cambia "oferta-tab-a/b" por
   otro par de ids y los data-tab-panel="a"/"b" de las tarjetas a comparar. */
.tab-switch-bar { display: none; }
@media (max-width: 639px) {
  .tab-switch-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
    padding: .25rem; margin-bottom: .8rem;
    background: var(--surface-2); border-radius: var(--radius-m);
  }
  .tab-switch-btn {
    text-align: center; padding: .5rem; border-radius: calc(var(--radius-m) - .2rem);
    font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
    transition: background .15s var(--ease-out), color .15s var(--ease-out);
  }
  #oferta-tab-a:checked ~ .tab-switch-bar label[for="oferta-tab-a"],
  #oferta-tab-b:checked ~ .tab-switch-bar label[for="oferta-tab-b"] {
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
  }
  #oferta-tab-a:focus-visible ~ .tab-switch-bar label[for="oferta-tab-a"],
  #oferta-tab-b:focus-visible ~ .tab-switch-bar label[for="oferta-tab-b"] {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .offers-grid { grid-template-columns: 1fr; }
  .offers-grid > .card[data-tab-panel] { display: none; }
  #oferta-tab-a:checked ~ .offers-grid > .card[data-tab-panel="a"],
  #oferta-tab-b:checked ~ .offers-grid > .card[data-tab-panel="b"] { display: block; }
}

/* Ranking de comunidades autónomas (comparador CCAA) */
.ccaa-rank-list { display: flex; flex-direction: column; gap: .45rem; }
.ccaa-rank-item {
  display: grid; grid-template-columns: 1.8rem minmax(0,1fr) minmax(0,2fr) auto;
  align-items: center; gap: .7rem; padding: .5rem .2rem;
  border-bottom: 1px solid var(--line);
}
.ccaa-rank-item:last-child { border-bottom: none; }
.ccaa-rank-pos {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-faint);
  text-align: center;
}
.ccaa-rank-item.is-best .ccaa-rank-pos { color: var(--accent-strong); font-weight: 700; }
.ccaa-rank-item.is-worst .ccaa-rank-pos { color: var(--ink-faint); }
.ccaa-rank-label { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccaa-rank-item.is-best .ccaa-rank-label { color: var(--accent-strong); }
.ccaa-rank-note { font-size: .72rem; color: var(--ink-faint); font-weight: 400; margin-left: .3rem; }
.ccaa-rank-bar { position: relative; height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.ccaa-rank-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 5px; background: var(--accent); }
.ccaa-rank-item.is-best .ccaa-rank-fill { background: var(--accent-strong); }
.ccaa-rank-value { font-family: var(--mono); font-size: .88rem; font-weight: 600; text-align: right; white-space: nowrap; tabular-nums: 1; }
@media (max-width: 520px) {
  .ccaa-rank-item { grid-template-columns: 1.5rem minmax(0,1fr) auto; }
  .ccaa-rank-bar { display: none; }
}

/* Ranking "Top 25 mejor pagados": gráfica de barras horizontales, una por
   profesión, con insignia de posición y barra proporcional al salario. */
#top25 { padding: 1.4rem 1.1rem; }
@media (min-width: 640px) { #top25 { padding: 1.9rem 1.9rem; } }
.top25-list { display: flex; flex-direction: column; gap: .5rem; }
.top25-item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0,1fr) auto;
  grid-template-areas: "pos label value" "pos bar bar";
  align-items: center; column-gap: 1rem; row-gap: .5rem;
  padding: .85rem .9rem; border-radius: var(--radius-m);
  border: 1px solid var(--line);
  transition: border-color .15s var(--ease-out), transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.top25-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.top25-pos {
  grid-area: pos; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: .92rem;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line-strong);
}
.top25-item.is-best .top25-pos { background: var(--accent); color: #fff; border-color: var(--accent); }
.top25-item.is-second .top25-pos { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft); }
.top25-item.is-third .top25-pos { background: var(--surface-2); color: var(--accent-ink); }
.top25-label { grid-area: label; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.top25-value { grid-area: value; font-family: var(--mono); font-size: 1.08rem; font-weight: 700; text-align: right; white-space: nowrap; tabular-nums: 1; color: var(--ink); }
.top25-bar-track { grid-area: bar; position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.top25-bar-fill { display: block; height: 100%; border-radius: 0 6px 6px 0; background: var(--accent); }
.top25-item.is-best .top25-bar-fill { background: var(--accent-strong); }
.top25-note { grid-column: 1 / -1; font-size: .78rem; color: var(--ink-faint); margin-left: 3.4rem; }
@media (max-width: 420px) {
  .top25-item { grid-template-columns: 2rem minmax(0,1fr) auto; }
  .top25-note { margin-left: 3rem; }
}

/* Download interstitial dialog */
dialog.ad-dialog {
  border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 0; max-width: 380px; width: calc(100% - 2rem);
  box-shadow: var(--shadow-lg); background: var(--surface); color: var(--ink);
}
dialog.ad-dialog::backdrop { background: rgba(20,24,22,0.55); }
.ad-dialog-inner { padding: 1.2rem; }
.ad-dialog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.ad-dialog-top span { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; color: var(--ink-faint); }
.ad-dialog-close {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 1rem; line-height: 1;
}
.ad-dialog-close:hover { background: var(--line); }
.ad-dialog .ad-slot { min-height: 250px; margin: 0; }
.ad-dialog-cta { display: block; text-align: center; margin-top: .9rem; font-size: .88rem; font-weight: 700; color: var(--accent-strong); }

/* Cookie consent banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 20px rgba(0,0,0,.10);
  padding: 1rem 1.2rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; justify-content: space-between;
}
.cookie-banner-inner p { margin: 0; font-size: .86rem; color: var(--ink-soft); flex: 1 1 320px; }
.cookie-banner-inner a { color: var(--accent-strong); font-weight: 600; }
.cookie-banner-actions { display: flex; gap: .6rem; flex-shrink: 0; flex-wrap: wrap; }
.btn-sm { padding: .5rem .9rem; font-size: .85rem; }

/* Los tres botones del aviso de cookies pesan visualmente lo mismo — solo
   "Aceptar todo" (y "Guardar preferencias") llevan un borde de acento, sin
   relleno sólido, para que rechazar sea tan fácil de ver como aceptar. */
.btn-cookie {
  padding: .5rem .9rem; font-size: .85rem; font-weight: 700;
  border-radius: var(--radius-s); border: 1.5px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink);
}
.btn-cookie:hover, .btn-cookie:focus-visible { border-color: var(--accent); color: var(--accent-strong); }
.btn-cookie-accent { border-color: var(--accent); color: var(--accent-strong); }
.btn-cookie-accent:hover, .btn-cookie-accent:focus-visible { background: var(--accent-soft); }
.btn-cookie:active { transform: scale(0.97); }

.cookie-banner-config {
  max-width: 1080px; margin: .9rem auto 0; padding-top: .9rem;
  border-top: 1px solid var(--line-strong);
  display: flex; flex-direction: column; gap: .7rem;
}
.cookie-banner-config[hidden] { display: none; }
.cookie-banner-config .check-row {
  align-items: flex-start; gap: .6rem;
  font-size: .85rem; font-weight: 400; color: var(--ink-soft);
}
.cookie-banner-config .check-row input { margin-top: .15rem; flex-shrink: 0; }

body.cc-has-cookie-banner .ad-toast { bottom: 108px; }
@media (max-width: 640px) { body.cc-has-cookie-banner .ad-toast { bottom: 148px; } }

/* Corner toast */
.ad-toast {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  max-width: 280px; padding: .9rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-lg);
  transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.ad-toast.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ad-toast-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .4rem; }
.ad-toast-top span:first-child { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; color: var(--ink-faint); }
.ad-toast-close { font-size: .95rem; color: var(--ink-faint); flex-shrink: 0; }
.ad-toast p { font-size: .82rem; color: var(--ink-soft); }

/* =============================================================
   11. Content sections (how it works, SEO text, FAQ, more tools)
   ============================================================= */
.section { padding-block: 2.2rem; border-top: 1px solid var(--line); }
.section h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }
.section > p { color: var(--ink-soft); }

/* Rejilla asimetrica en vez de tres columnas iguales: el paso 1 pide una
   decision y se lleva la tarjeta y los cinco accesos; los pasos 2 y 3 solo
   describen lo que viene despues, asi que van apilados, sin fondo y
   separados por un filete. */
.steps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.4rem 2.2rem; align-items: start; margin-top: 1.1rem; }
.step.step-lead {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 1.3rem 1.4rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.step.step-lead .num { margin-bottom: .7rem; }
.step.step-lead h3 { font-size: 1.08rem; }
.step-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.1rem; }
/* Son cinco: la ultima dejaria media fila vacia, asi que ocupa el ancho. */
.step-cats .step-cat:last-child { grid-column: 1 / -1; }
.step-cat {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .6rem .75rem; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--bg);
  text-decoration: none; transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), background-color .2s var(--ease-out);
}
.step-cat:hover, .step-cat:focus-visible {
  border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px);
}
.step-cat:active { transform: translateY(0); }
.step-cat-name { font-weight: 600; font-size: .9rem; color: var(--ink); }
.step-cat-meta { font-size: .76rem; color: var(--ink-faint); }
.step-cat:hover .step-cat-name, .step-cat:focus-visible .step-cat-name { color: var(--accent-ink); }
.step-rest { display: grid; gap: 1.1rem; }
.step-rest .step + .step { border-top: 1px solid var(--line); padding-top: 1.1rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .step-cats { grid-template-columns: 1fr; } }
.step { display: flex; gap: .9rem; }
.step .num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: .9rem;
}
.step h3 { font-size: 1rem; margin-bottom: .3rem; }
.step p { font-size: .9rem; color: var(--ink-soft); }

.seo-text { max-width: 68ch; }
.seo-text p { margin-bottom: 1rem; color: var(--ink-soft); }
.seo-text h3 { font-size: 1.1rem; margin-top: 1.4rem; margin-bottom: .5rem; }

.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 720px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card { padding: 1.1rem 1.2rem; }
.audience-card h3 { font-size: .98rem; margin-bottom: .4rem; }
.audience-card p { font-size: .87rem; color: var(--ink-soft); }

.examples-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
@media (min-width: 720px) { .examples-grid { grid-template-columns: repeat(4, 1fr); } }
.example-card { padding: 1.1rem 1.2rem; }
.example-card .example-label { font-size: .78rem; color: var(--ink-faint); font-weight: 600; margin-bottom: .4rem; }
.example-card .example-num { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; color: var(--accent-strong); }
.example-card .example-unit { font-size: .8rem; font-weight: 500; color: var(--ink-faint); }
.example-card .example-note { font-size: .82rem; color: var(--ink-soft); margin-top: .5rem; }

.faq-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); overflow: hidden;
}
.faq-item summary {
  padding: 1rem 1.2rem; cursor: pointer; font-weight: 700; font-size: .96rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.2rem; color: var(--ink-faint); flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-a { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); font-size: .92rem; }

.more-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1rem; }
@media (min-width: 640px) { .more-tools { grid-template-columns: repeat(4, 1fr); } }
.more-tools .card { padding: 1.1rem 1.1rem 1rem; }
.more-tools .card h3 { font-size: .95rem; margin-bottom: .25rem; color: var(--ink); }
.more-tools .card p { font-size: .82rem; color: var(--ink-soft); }
.more-tools .card:not(.upcoming-card) { border-color: var(--accent); }
.more-tools .cat-live {
  font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-strong); display: block; margin-bottom: .3rem;
}

/* =============================================================
   12. Footer
   ============================================================= */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line); margin-top: 2rem;
  padding-block: 1.6rem; color: var(--ink-faint); font-size: .84rem;
}
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 50%, transparent 100%);
  opacity: .55;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem 1.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-col h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 .15rem; font-weight: 700; }
.footer-col a { color: var(--ink-faint); }
.footer-col a:hover { color: var(--accent-strong); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: space-between; align-items: center; }
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-links a:hover { color: var(--accent-strong); }

/* Legal pages */
.legal-page .container-narrow { padding-block: 2.4rem 4rem; }
.legal-page h1 { font-size: 1.8rem; margin-bottom: .3rem; }
.legal-page .updated { color: var(--ink-faint); font-size: .85rem; margin-bottom: 1.6rem; }
.legal-page h2 { font-size: 1.15rem; margin-top: 1.6rem; margin-bottom: .5rem; }
.legal-page h3 { font-size: .98rem; margin-top: 1.3rem; margin-bottom: .4rem; color: var(--ink); }
.legal-page p, .legal-page li { color: var(--ink-soft); font-size: .95rem; margin-bottom: .7rem; }
.legal-page .guide-cta {
  background: var(--accent-soft); border-radius: var(--radius-m);
  padding: 1.1rem 1.3rem; margin-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
}
.legal-page .guide-cta p { margin: 0; color: var(--ink); font-weight: 600; font-size: .92rem; }

.about-me-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem;
}
.about-me-photo {
  width: 320px; height: 480px; max-width: 100%; object-fit: cover; border-radius: var(--radius-l);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.about-me-text { align-self: stretch; }
.about-me-text p { margin-bottom: .7rem; }
.tool-guide-cta {
  background: var(--accent-soft); border-radius: var(--radius-m);
  padding: 1.1rem 1.3rem; margin-block: 0 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
}
.tool-guide-cta p { margin: 0; color: var(--ink); font-weight: 600; font-size: .92rem; }
.guides-list { display: grid; gap: 1rem; margin-top: 1.4rem; }
.guides-list .card { padding: 1.3rem 1.4rem; }
.guides-list .card h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.guides-list .card p { color: var(--ink-soft); font-size: .9rem; margin-bottom: 0; }

.section-guides { background: var(--surface-2); padding-block: 2.4rem; }
.guides-preview-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 720px) { .guides-preview-grid { grid-template-columns: repeat(3, 1fr); } }
.guides-preview-grid .card { padding: 1.3rem 1.4rem; text-decoration: none; display: block; }
.guides-preview-grid .card h3 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--ink); }
.guides-preview-grid .card p { color: var(--ink-soft); font-size: .88rem; margin-bottom: 0; }
.guides-cta-row { text-align: center; margin-top: 1.4rem; }
.legal-page .todo {
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius-s); padding: .8rem 1rem; font-size: .85rem; margin-block: 1rem;
}

/* =============================================================
   13. Icons
   ============================================================= */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* =============================================================
   14. Home page redesign (categorías visuales)
   ============================================================= */
.trust-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; justify-content: center; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.8rem; }

.btn-lg {
  padding: 1.05rem 2rem;
  font-size: 1.05rem;
  border-radius: 999px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.btn-lg .btn-arrow { display: inline-block; transition: transform .18s var(--ease-out); }
.btn-lg:hover .btn-arrow, .btn-lg:focus-visible .btn-arrow { transform: translateX(5px); }

.btn-lg.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 10px 26px -8px var(--accent-glow);
}
.btn-lg.btn-primary:hover, .btn-lg.btn-primary:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 34px -8px var(--accent-glow-strong);
}
.btn-lg.btn-primary:active { transform: translateY(-1px) scale(0.99); }

.btn-lg.btn-ghost {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
}
.btn-lg.btn-ghost:hover, .btn-lg.btn-ghost:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: var(--shadow-md);
}
.btn-lg.btn-ghost:active { transform: translateY(-1px); }

/* Interactive hover button — pill CTA with sliding label + expanding fill */
.btn-interactive {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.btn-interactive .btn-interactive-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translateX(4px);
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
.btn-interactive:hover .btn-interactive-label,
.btn-interactive:focus-visible .btn-interactive-label {
  transform: translateX(48px);
  opacity: 0;
}
.btn-interactive .btn-interactive-label-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  color: #fff;
  opacity: 0;
  transform: translateX(48px);
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
.btn-interactive:hover .btn-interactive-label-hover,
.btn-interactive:focus-visible .btn-interactive-label-hover {
  transform: translateX(-4px);
  opacity: 1;
}
.btn-interactive .btn-interactive-dot {
  position: absolute;
  z-index: 0;
  left: 10%;
  top: 78%;
  height: .5rem;
  width: .5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  transition: left .32s var(--ease-out), top .32s var(--ease-out),
              height .32s var(--ease-out), width .32s var(--ease-out);
}
.btn-interactive:hover .btn-interactive-dot,
.btn-interactive:focus-visible .btn-interactive-dot {
  left: 0; top: 0; height: 100%; width: 100%;
}

#categorias { scroll-margin-top: 90px; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}
.category-card {
  display: block;
  padding: 1.4rem 1.4rem 1.3rem;
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.category-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-3px); }
.category-card .cat-head { display: block; }
.category-card .cat-icon {
  width: 46px; height: 46px; border-radius: var(--radius-m);
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--accent-2-soft) 100%);
  color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  transition: transform .2s var(--ease-out);
}
.category-card .cat-icon .icon { width: 23px; height: 23px; stroke-width: 1.9; }
.category-card:hover .cat-icon { transform: scale(1.08) rotate(-4deg); }
.category-card h2 {
  font-size: 1.55rem; margin-bottom: 1rem; color: var(--accent-strong);
  transition: color .15s var(--ease-out);
}
.category-card .cat-head:hover h2 { color: var(--accent); }

.cat-tools {
  list-style: none; margin: 0; padding: .9rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .75rem;
}
.cat-tools a {
  display: flex; flex-direction: column; gap: .1rem;
}
.cat-tools .tool-name {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
  transition: color .15s var(--ease-out);
}
.cat-tools .tool-name::after {
  content: "→"; color: var(--accent-strong);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.cat-tools .tool-desc {
  font-size: .8rem; font-weight: 500; color: var(--ink-faint); line-height: 1.35;
}
.cat-tools a:hover .tool-name { color: var(--accent-strong); }
.cat-tools a:hover .tool-name::after, .cat-tools a:focus-visible .tool-name::after { opacity: 1; transform: translateX(0); }

/* =============================================================
   Animaciones: aparecer al hacer scroll + destacar un resultado
   cuando cambia. Se aplican solas desde main.js (initScrollReveal /
   initValueFlash), sin tocar el HTML de cada página. Con
   prefers-reduced-motion, todo aparece de golpe, sin movimiento.
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-visible { opacity: 1; transform: none; transition: none; }
}

@keyframes value-flash-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.value-flash { display: inline-block; animation: value-flash-pulse .38s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .value-flash { animation: none; }
}

/* =============================================================
   Migas de pan (las genera build.py a partir de la ruta y el <h1>)
   ============================================================= */
.breadcrumbs { font-size: .8rem; line-height: 1.5; color: var(--ink-faint); margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .45rem; }
.breadcrumbs li { display: inline-flex; align-items: baseline; gap: .45rem; min-width: 0; }
.breadcrumbs li + li::before { content: "›"; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs [aria-current="page"] { color: var(--ink-faint); overflow-wrap: anywhere; }
.legal-page .breadcrumbs { margin-bottom: .6rem; }
.legal-page .breadcrumbs li { font-size: inherit; color: inherit; margin-bottom: 0; }
.legal-page .breadcrumbs [aria-current="page"] { color: var(--ink-faint); }

/* =============================================================
   Guías relacionadas (las genera build.py): lista de enlaces a guías
   en cada calculadora y en las páginas de categoría.
   ============================================================= */
.guide-list { display: grid; grid-template-columns: 1fr; margin-top: 1rem; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.guide-link {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .85rem .1rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.guide-link-title { font-weight: 700; font-size: .98rem; line-height: 1.35; transition: color .15s var(--ease-out); }
.guide-link-title::after { content: "\00a0→"; color: var(--accent); }
.guide-link-meta { font-size: .78rem; color: var(--ink-faint); }
.guide-link:hover .guide-link-title, .guide-link:focus-visible .guide-link-title { color: var(--accent-strong); }

/* =============================================================
   Portada: bloques de contenido (tabla bruto→neto, claves de la
   nómina, IRPF por comunidad, profesiones, fuentes)
   ============================================================= */
.section-lede { color: var(--ink-soft); max-width: 68ch; margin: 0 0 1rem; }
.table-note { color: var(--ink-faint); font-size: .84rem; max-width: 72ch; margin: .9rem 0 0; }
.section-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.subsection-title { font-size: 1.05rem; margin: 1.8rem 0 .4rem; }
.prose-links .section-lede a, .prose-links .table-note a, .prose-links .info-card a,
.prose-links .source-list a, .tramos td a {
  color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px;
}
.prose-links .section-lede a:hover, .prose-links .table-note a:hover, .prose-links .info-card a:hover,
.tramos td a:hover { color: var(--accent-ink); }
.info-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: .4rem; }
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
.info-card { padding: 1.15rem 1.25rem; }
.info-card h3 { font-size: 1rem; margin: 0 0 .5rem; }
.info-card p { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.source-list { margin: .4rem 0 0; padding-left: 1.2rem; max-width: 72ch; color: var(--ink-soft); font-size: .92rem; }
.source-list li { margin-bottom: .45rem; }
.source-list strong { color: var(--ink); }
.tramos-wrap + .table-note { margin-top: .7rem; }

/* Tabla larga con "ver el resto" nativo (<details>): la portada muestra
   solo los extremos del ranking de comunidades y deja el resto plegado,
   sin dejar de estar en el HTML (Google lo sigue indexando). */
.tabla-disclosure { margin-top: 1.1rem; }
.tabla-disclosure summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--accent-strong); padding: .3rem 0;
}
.tabla-disclosure summary::-webkit-details-marker { display: none; }
.tabla-disclosure summary::after { content: "↓"; font-weight: 400; transition: transform .2s var(--ease-out); }
.tabla-disclosure[open] summary::after { transform: rotate(180deg); }
.tabla-disclosure summary:hover { color: var(--accent-ink); }
.tabla-disclosure summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.tabla-disclosure .tramos-wrap { margin-top: .8rem; }

/* Tablas de referencia de cada calculadora: las de texto (reglas,
   requisitos) se ajustan al ancho en vez de forzar scroll horizontal. */
.ref-block .tramos-wrap + .tramos-wrap { margin-top: 1rem; }
table.tramos.ref-text { min-width: 0; }
table.tramos.ref-text td { white-space: normal; font-family: var(--sans); text-align: left; line-height: 1.45; }
table.tramos.ref-text th { text-align: left; white-space: normal; }
table.tramos.ref-text td:first-child { font-weight: 600; }
@media (max-width: 520px) {
  table.tramos { font-size: .82rem; }
  table.tramos th, table.tramos td { padding: .5rem .6rem; }
}
.prose-page main a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.prose-page main a:hover, .prose-page main a:focus-visible { color: var(--accent-ink); }
.prose-page main ol, .prose-page main ul { padding-left: 1.3rem; }
.prose-page main li { margin-bottom: .45rem; }
.prose-page .metodo-grupo { margin-top: 1.2rem; }
table.tramos.compact { min-width: 0; }
.mini-field .hint { font-size: .8rem; line-height: 1.45; color: var(--ink-faint); margin: .35rem 0 0; }
.mini-field select:disabled { opacity: .75; cursor: not-allowed; }