/* ============================================================================
   WorkPay Ireland — design system
   1 Tokens · 2 Reset · 3 Utilities · 4 Typography · 5 Components
   6 Sections · 7 Effects · 8 Responsive · 9 Reduced motion · 10 Print
   ========================================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  color-scheme: light;

  /* Brand */
  --primary: #0e9f6e;
  /* Verde para TEXTO. El de marca (#0e9f6e) da 3,13:1 sobre el fondo claro y
     WCAG pide 4,5:1 para texto normal — lo midio Lighthouse y lo confirme a
     mano. Este es el mismo tono, mas oscuro: 4,75:1 sobre el fondo y 5,14:1
     sobre blanco. El de marca se queda para rellenos y bordes, donde la regla
     de texto no aplica, asi que la identidad no cambia. */
  --primary-text: #0a7d57;
  --primary-hover: #0b8a5e;
  --primary-ink: #ffffff;
  --primary-soft: #e4f6ee;
  --primary-line: #9fdcc4;
  --accent: #2f62e8;
  --accent-soft: #e8eefd;

  /* Surface scale — each step is a visible level, never the same colour twice */
  --bg: #f7f6f2;
  --bg-glow-1: rgba(14, 159, 110, .10);
  --bg-glow-2: rgba(47, 98, 232, .08);
  --surface-1: #ffffff;   /* cards */
  --surface-2: #f2f1ec;   /* tiles nested inside cards */
  --surface-3: #ffffff;   /* form controls */
  --surface-sunken: #eceae3;
  --border: #e2ded4;
  --border-strong: #cdc7b8;
  --border-focus: var(--primary);

  /* Ink */
  --ink: #131b26;
  --ink-2: #4a5462;
  --ink-3: #656e7c;   /* era #737d8c: 3,68:1 sobre --surface-2. Ahora 4,56:1 */
  --ink-inverse: #f2f6fc;

  /* Status */
  --good: #0d7a52;
  --good-bg: #e4f6ee;
  --warn: #8f5300;
  --warn-bg: #fdf1da;
  --bad: #a13029;
  --bad-bg: #fbeae8;
  --info-bg: #e9effc;

  /* Chart series — validated for colour-vision deficiency on this surface */
  --series-net: #1baf7a;
  --series-paye: #2a78d6;
  --series-usc: #eb6834;
  --series-prsi: #4a3aa7;
  --series-pension: #eda100;
  --series-other: #e87ba4;

  /* Type */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fraunces', ui-serif, Georgia, serif;
  --mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;

  /* Space & shape */
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --control-h: 48px;

  /* Elevation: a shadow plus a light edge, so cards sit on the page */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .85);
  --sh-1: 0 1px 2px rgba(19, 27, 38, .05), 0 2px 6px rgba(19, 27, 38, .05);
  --sh-2: 0 2px 4px rgba(19, 27, 38, .06), 0 12px 28px rgba(19, 27, 38, .08);
  --sh-3: 0 4px 10px rgba(19, 27, 38, .07), 0 24px 56px rgba(19, 27, 38, .12);
  --ring: 0 0 0 4px rgba(14, 159, 110, .18);

  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Dark: chosen steps, not an inversion. Each surface is one visible notch up. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --dark: 1; }
}
:root[data-theme='dark'] { --dark: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --primary: #2bbd8a;
  --primary-text: #2bbd8a;
    --primary-text: #2bbd8a;   /* 8,04:1 sobre el fondo oscuro: no hace falta variante */
    --primary-hover: #3fd49c;
    --primary-ink: #04120c;
    --primary-soft: #0e2b22;
    --primary-line: #1e6b50;
    --accent: #5b8def;
    --accent-soft: #14213c;

    --bg: #080e1a;
    --bg-glow-1: rgba(43, 189, 138, .13);
    --bg-glow-2: rgba(91, 141, 239, .11);
    --surface-1: #0f1726;
    --surface-2: #151f31;
    --surface-3: #0b1220;
    --surface-sunken: #0a1120;
    --border: #1e2a3f;
    --border-strong: #2c3b55;

    --ink: #eef3fa;
    --ink-2: #a8b6c9;
    --ink-3: #78869a;
    --ink-inverse: #0b1220;

    --good: #45cf9c;
    --good-bg: #0d2a20;
    --warn: #e2b264;
    --warn-bg: #2b2313;
    --bad: #f0908a;
    --bad-bg: #2f1a18;
    --info-bg: #10203c;

    --series-net: #199e70;
    --series-paye: #3987e5;
    --series-usc: #d95926;
    --series-prsi: #9085e9;
    --series-pension: #c98500;
    --series-other: #d55181;

    --edge: inset 0 1px 0 rgba(255, 255, 255, .06);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .35);
    --sh-3: 0 6px 14px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .45);
    --ring: 0 0 0 4px rgba(43, 189, 138, .22);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --primary: #2bbd8a;
  --primary-hover: #3fd49c;
  --primary-ink: #04120c;
  --primary-soft: #0e2b22;
  --primary-line: #1e6b50;
  --accent: #5b8def;
  --accent-soft: #14213c;

  --bg: #080e1a;
  --bg-glow-1: rgba(43, 189, 138, .13);
  --bg-glow-2: rgba(91, 141, 239, .11);
  --surface-1: #0f1726;
  --surface-2: #151f31;
  --surface-3: #0b1220;
  --surface-sunken: #0a1120;
  --border: #1e2a3f;
  --border-strong: #2c3b55;

  --ink: #eef3fa;
  --ink-2: #a8b6c9;
  --ink-3: #78869a;
  --ink-inverse: #0b1220;

  --good: #45cf9c;
  --good-bg: #0d2a20;
  --warn: #e2b264;
  --warn-bg: #2b2313;
  --bad: #f0908a;
  --bad-bg: #2f1a18;
  --info-bg: #10203c;

  --series-net: #199e70;
  --series-paye: #3987e5;
  --series-usc: #d95926;
  --series-prsi: #9085e9;
  --series-pension: #c98500;
  --series-other: #d55181;

  --edge: inset 0 1px 0 rgba(255, 255, 255, .06);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .35);
  --sh-3: 0 6px 14px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .45);
  --ring: 0 0 0 4px rgba(43, 189, 138, .22);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* El reset de arriba pone margin: 0 en todo, y eso incluye a <dialog>. Un
   dialog abierto con showModal() se centra precisamente con el margin: auto
   que le da el navegador, así que sin esta línea aparece pegado al borde
   izquierdo de la pantalla. */
dialog:modal { margin: auto; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }

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

/* Two soft lights behind everything, so the page is not a flat slab. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%, var(--bg-glow-1), transparent 70%),
    radial-gradient(760px 480px at 6% 4%, var(--bg-glow-2), transparent 68%);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; letter-spacing: -.022em; font-weight: 650; }
::selection { background: var(--primary); color: var(--primary-ink); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: min(780px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--primary); color: var(--primary-ink);
  border-radius: var(--r-sm); font-weight: 650;
}
.skip-link:focus { top: 1rem; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.small { font-size: .875rem; }
.tiny { font-size: .8125rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.section { padding-block: clamp(3.25rem, 7.5vw, 5.75rem); }
.section-tight { padding-block: clamp(2.25rem, 5vw, 3.75rem); }

/* La calculadora es una unidad visual cerrada: necesita aire real antes de que
   empiece el contenido editorial, no solo el borde de la siguiente seccion. */
[data-tool] { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
[data-tool] + .wrap:empty { display: none; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
[hidden] { display: none !important; }

/* =============================================================
   4. Typography
   ============================================================= */
h1, .h1 { font-size: clamp(1.95rem, 1.15rem + 3vw, 3.15rem); }
h2, .h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); }
h3, .h3 { font-size: clamp(1.08rem, 1rem + .55vw, 1.3rem); }
.eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--primary-text);
}
.lead { font-size: clamp(1.03rem, .98rem + .35vw, 1.2rem); color: var(--ink-2); line-height: 1.6; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; margin-bottom: .65rem; }
.prose h3 { margin-top: 1.7rem; margin-bottom: .4rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.prose a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: .1em .35em; border-radius: 5px; }
.prose blockquote {
  border-left: 3px solid var(--primary); padding: .25rem 0 .25rem 1rem;
  color: var(--ink-2); font-style: italic; margin-bottom: 1rem;
}

/* =============================================================
   5. Components
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: var(--r-sm);
  font-weight: 650; font-size: .95rem; letter-spacing: -.005em;
  border: 1px solid transparent; min-height: 46px; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease),
              background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.995); }

.btn-primary {
  background: linear-gradient(180deg, var(--primary-hover), var(--primary));
  color: var(--primary-ink);
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-secondary { background: var(--surface-1); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--sh-1); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--ink-2); padding-inline: .7rem; min-height: 40px; }
.btn-ghost:hover { color: var(--primary); background: var(--surface-2); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.03rem; min-height: 54px; border-radius: var(--r-md); }
.section-cta { display: flex; justify-content: center; margin-top: 2.25rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

/* --- Cards --- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1), var(--edge);
  padding: clamp(1.15rem, 3vw, 1.6rem);
}
.card-lg { border-radius: var(--r-lg); padding: clamp(1.3rem, 3.4vw, 2rem); box-shadow: var(--sh-2), var(--edge); }
.card-flat { box-shadow: none; }
.card-sunken { background: var(--surface-2); box-shadow: none; border-color: var(--border); }
.card-accent { border-color: var(--primary-line); }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 650; letter-spacing: .01em; line-height: 1.3;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
}
.badge-good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.badge-warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge-bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
/* El verde de marca (--primary) da 3,01:1 sobre --primary-soft, y la badge es
   texto de 12 px: WCAG AA pide 4,5:1. --primary-text da 4,58:1 en claro y
   6,31:1 en oscuro. Lo encontro Lighthouse en la pagina de guias. */
.badge-year { background: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-line); }
.badge-premium {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; border-color: transparent;
}
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Trust strip --- */
/* One tidy line on a phone instead of four stacked chips pushing the tool
   below the fold; it wraps normally once there is room. */
.trust-row { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) {
  .trust-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .trust-row::-webkit-scrollbar { display: none; }
  .trust-item { flex: 0 0 auto; }
}
.trust-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--ink-2);
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.trust-item svg { width: 13px; height: 13px; color: var(--primary); flex: 0 0 auto; }

/* --- Header --- */
/* Altura real de la cabecera, en un solo sitio. La usan scroll-padding-top y
   los scroll-margin-top de abajo: sin eso, cualquier salto a un ancla, un
   focus() o un scrollIntoView() deja el titulo debajo de la cabecera fija y
   cortado por la mitad. Es exactamente lo que se veia en el analizador. */
:root { --header-h: 68px; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
:where(h1, h2, h3, [id], [data-payslip], .calc-shell, .band) {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }

.logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.025em; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--primary) 0%, var(--accent) 135%);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 2px 8px rgba(14, 159, 110, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.logo-text { font-size: 1.04rem; white-space: nowrap; }

.header-nav { display: none; margin-left: auto; gap: .1rem; align-items: center; }
.header-nav a {
  position: relative;
  padding: .55rem .8rem; border-radius: var(--r-sm);
  font-size: .925rem; font-weight: 550; color: var(--ink-2);
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.header-nav a:hover { color: var(--ink); background: var(--surface-2); }
.header-nav a[aria-current='page'] { color: var(--primary); background: var(--primary-soft); font-weight: 650; }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.header-nav + .header-tools { margin-left: .5rem; }
.header-cta { display: none; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--ink-2); border: 1px solid transparent;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--primary); border-color: var(--border); }

.lang-switch {
  display: flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.lang-switch a {
  padding: .3rem .5rem; font-size: .76rem; font-weight: 700; color: var(--ink-3);
  min-width: 34px; text-align: center; border-radius: 7px;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current='true'] { background: var(--surface-1); color: var(--primary-text); box-shadow: var(--sh-1); }

.nav-toggle { display: grid; }
/* --- Menu movil ----------------------------------------------------------
   Hoja a pantalla completa. Antes era una lista suelta que empujaba la pagina
   hacia abajo: al abrirla, el contenido saltaba y el menu se leia como un
   bloque de texto sin jerarquia. */
.mnav-backdrop {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(8, 15, 26, .45);
  animation: mnav-fade .18s var(--ease);
}
.mobile-nav {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--bg);
  /* Respeta la muesca y la barra de gestos del telefono. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: mnav-in .22s var(--ease);
}
@keyframes mnav-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mnav-backdrop, .mobile-nav { animation: none; }
}

.mnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.mnav-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.mnav-close {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}
.mnav-close:hover { color: var(--ink); border-color: var(--border-strong); }

.mnav-list {
  list-style: none; margin: 0; padding: .5rem var(--gutter) 1rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.mnav-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center; gap: .9rem;
  padding: .9rem .6rem;
  border-radius: var(--r-md);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
}
.mnav-list li:last-child a { border-bottom: 0; }
.mnav-list a:active { background: var(--surface-2); }
.mnav-list a[aria-current='page'] { background: var(--primary-soft); }
.mnav-list a[aria-current='page'] .mnav-label { color: var(--primary-text); }

.mnav-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--primary);
  border: 1px solid var(--border);
}
.mnav-ico svg { width: 21px; height: 21px; }
.mnav-list a[aria-current='page'] .mnav-ico {
  background: #fff; border-color: var(--primary-line);
}
:root[data-theme='dark'] .mnav-list a[aria-current='page'] .mnav-ico { background: var(--surface-1); }

/* min-width: 0 para que un texto largo no ensanche la rejilla y saque la
   flecha fuera de la pantalla. */
.mnav-text { display: grid; gap: .12rem; min-width: 0; }
.mnav-label { font-size: 1.02rem; font-weight: 650; color: var(--ink); line-height: 1.25; }
.mnav-desc { font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.mnav-go { color: var(--ink-3); flex: 0 0 auto; }

.mnav-foot {
  padding: 1rem var(--gutter) 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  display: grid; gap: .85rem;
}
.mnav-controls { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.mnav-note {
  font-size: .78rem; color: var(--ink-3); text-align: center;
  line-height: 1.45; margin: 0;
}

/* En tablet el panel ocupa toda la pantalla, pero el contenido no debe
   estirarse: una fila de 800 px con la flecha a un palmo del texto se lee
   mal. Se centra en una columna comoda aumentando el margen lateral, sin
   perder los fondos a todo lo ancho. */
@media (min-width: 560px) {
  .mnav-top, .mnav-list, .mnav-foot {
    padding-inline: max(var(--gutter), calc((100% - 34rem) / 2));
  }
}

/* Pantallas muy bajas (moviles en horizontal): la lista se queda con el
   espacio y el pie se compacta, en vez de comerse la pantalla entera. */
@media (max-height: 560px) {
  .mnav-list a { min-height: 52px; padding: .7rem .6rem; }
  .mnav-desc { display: none; }
  .mnav-note { display: none; }
}

/* El cuerpo no se desplaza por detras del menu abierto. */
body.nav-open { overflow: hidden; }

/* The full nav needs more room than 1024px once the language switch, the
   theme toggle and a call to action share the bar. */
@media (min-width: 1100px) {
  .header-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}
@media (min-width: 1240px) { .header-cta { display: inline-flex; } }

/* --- Footer --- */
.site-footer {
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  margin-top: clamp(3rem, 8vw, 5.5rem);
}
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--primary-text); }
.footer-grid { display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 6vw, 3.75rem); }
.footer-grid h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink); margin-bottom: .8rem; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-block: 1.35rem;
  font-size: .84rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

/* --- Forms ------------------------------------------------------------
   Every control is 48px tall and every label occupies the same vertical
   slot, so inputs on the same row share a baseline even when one label
   wraps to two lines. `subgrid` does the aligning; the min-height below is
   the fallback for anything that does not support it. */
.field { display: grid; grid-template-rows: auto auto auto; align-content: start; margin-bottom: 1.15rem; }
.field > .label {
  display: block; font-size: .85rem; font-weight: 600; color: var(--ink);
  margin-bottom: .4rem; line-height: 1.35; align-self: end;
}
.field .hint { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .4rem; line-height: 1.45; }
.field .err { display: block; font-size: .8rem; color: var(--bad); margin-top: .4rem; font-weight: 600; }

.input, .select, textarea.input {
  width: 100%; min-height: var(--control-h); padding: .65rem .8rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink);
  font: inherit; font-variant-numeric: tabular-nums;
  box-shadow: var(--edge);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.input:hover, .select:hover { border-color: var(--primary-line); }
.input:focus, .select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.input[aria-invalid='true'] { border-color: var(--bad); }
.input::placeholder { color: var(--ink-3); }

.money-wrap { position: relative; display: block; }
.money-wrap::before {
  content: '€'; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-weight: 650; pointer-events: none; font-size: .95rem;
}
.input-money { padding-left: 2rem; }

.select {
  appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.3rem;
  color: var(--ink);
}

.check {
  display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .85rem; cursor: pointer;
  padding: .55rem .7rem; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.check:hover { background: var(--surface-2); border-color: var(--border); }
.check input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--primary); flex: 0 0 auto; }
.check span { font-size: .9rem; line-height: 1.45; }
.check .hint { margin-top: .15rem; }

/* Rows: one shared grid, and the label/control/hint slots line up across cells */
.field-row { display: grid; gap: .5rem 1rem; }
@supports (grid-template-rows: subgrid) {
  .field-row { grid-template-rows: auto auto auto; }
  .field-row > .field { grid-row: span 3; grid-template-rows: subgrid; margin-bottom: 0; }
}
@supports not (grid-template-rows: subgrid) {
  .field-row > .field > .label { min-height: 2.6em; }
}
.field-row { margin-bottom: 1.15rem; }

details.advanced { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: .4rem; }
details.advanced > summary {
  cursor: pointer; font-weight: 650; font-size: .9rem; color: var(--primary-text);
  list-style: none; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; border-radius: var(--r-sm); margin-left: -.7rem;
  transition: background-color .15s var(--ease);
}
details.advanced > summary:hover { background: var(--surface-2); }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before {
  content: ''; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
details.advanced[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
details.advanced > div { padding-top: 1.1rem; }

.segmented {
  display: flex; flex-wrap: wrap; gap: .25rem;
  background: var(--surface-2); padding: .3rem; border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.segmented button {
  flex: 1 1 auto; padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .87rem; font-weight: 600; color: var(--ink-2); min-height: 40px; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed='true'] {
  background: var(--surface-1); color: var(--primary); box-shadow: var(--sh-1);
}

/* --- The calculator shell --------------------------------------------
   Form on the left, a compact summary that stays with you on the right,
   and the full dashboard underneath at full width. */
/* En movil manda el orden natural: primero TUS DATOS, despues el resultado.
   Antes el resultado subia arriba (order: -1) para que se viera una cifra sin
   desplazarse, pero eso deja el formulario escondido debajo y la persona no
   entiende de donde sale ese numero. Se lee mejor de arriba abajo: entro,
   relleno, veo. */
.calc-shell { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1080px) {
  .calc-shell { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .85fr); gap: 1.5rem; }
  .calc-summary { position: sticky; top: 88px; }
}
[data-layout='stacked'] .calc-shell { grid-template-columns: 1fr; }
.calc-shell > * { min-width: 0; }

.calc-form-card { position: relative; }
.calc-form-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: inherit; padding: 2px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--primary) 72%, #ffffff) 0%,
    var(--primary) 42%,
    var(--primary) 62%,
    color-mix(in srgb, var(--primary) 80%, #04241a) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .calc-form-card::before { padding: 0; background: none; border: 2px solid var(--primary); }
}
.form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
@media (max-width: 560px) { .form-head { display: grid; gap: .2rem; } }
.form-head h2 { font-size: 1.15rem; }
.form-head .step { font-size: .78rem; color: var(--ink-3); font-weight: 600; }

/* --- Result: the hero number ----------------------------------------- */
.metric-hero {
  display: grid; gap: .3rem;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: var(--r-lg);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--primary) 12%, var(--surface-1)) 0%, var(--surface-1) 62%);
  border: 1px solid var(--primary-line);
  box-shadow: var(--sh-2), var(--edge);
}
.metric-hero .label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.metric-hero .value {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.6rem);
  font-weight: 750; letter-spacing: -.04em; line-height: 1.02;
  font-variant-numeric: tabular-nums; color: var(--ink);
  display: flex; align-items: baseline; gap: .25rem;
}
.metric-hero .value .cur { font-size: .52em; font-weight: 650; color: var(--ink-2); letter-spacing: -.01em; }
.metric-hero .sub { font-size: .92rem; color: var(--ink-2); margin-top: .15rem; }
.metric-hero .sub b { color: var(--ink); font-weight: 650; }
.value-flash { animation: valueFlash .42s var(--ease-out); }
@keyframes valueFlash {
  0% { opacity: .45; transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}

/* --- Result: metric tiers -------------------------------------------- */
.metric-row { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .85rem; }
.metric-row > * { min-width: 0; }
.metric {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .8rem .9rem; display: grid; gap: .1rem; align-content: start;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.metric:hover { border-color: var(--border-strong); }
.metric .label {
  font-size: .76rem; font-weight: 600; color: var(--ink-3); line-height: 1.35;
  display: flex; align-items: center; gap: .3rem;
}
.metric .value { font-size: 1.28rem; font-weight: 680; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.metric-lg .value { font-size: 1.55rem; }
.metric-sm .value { font-size: 1.1rem; }
.metric-sm .label { font-size: .73rem; }

.metric-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* La cifra principal es el elemento dominante de la pantalla: necesita
   separarse de las métricas de apoyo, o las tarjetas parecen colgar de ella.
   Una sola regla para las doce calculadoras, así que la separación es
   idéntica en todas. */
.metric-hero + .metric-grid { margin-top: 1.5rem; }
@media (min-width: 640px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .metric-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric-grid > * { min-width: 0; }

/* --- Result: the tax block ------------------------------------------- */
.tax-panel { display: grid; gap: .55rem; }
.tax-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center;
  padding: .6rem .2rem; border-bottom: 1px solid var(--border);
}
.tax-row:last-child { border-bottom: 0; }
.tax-row .swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.tax-row .name { font-size: .92rem; font-weight: 600; }
.tax-row .name small { display: block; font-size: .76rem; color: var(--ink-3); font-weight: 500; }
.tax-row .amount { font-variant-numeric: tabular-nums; font-weight: 680; text-align: right; }
.tax-row .amount small { display: block; font-size: .75rem; color: var(--ink-3); font-weight: 500; }

/* --- Charts ----------------------------------------------------------- */
.chart-panel { display: grid; gap: 1.25rem; align-items: center; }
/* The legend belongs beside the donut, not stretched to the far edge. */
@media (min-width: 620px) {
  .chart-panel { grid-template-columns: auto minmax(0, 30rem); justify-content: start; column-gap: 2rem; }
}
.donut { width: min(230px, 62vw); height: auto; margin-inline: auto; }
.donut-seg { transition: opacity .18s var(--ease), stroke-width .18s var(--ease); cursor: pointer; }
.donut:hover .donut-seg { opacity: .55; }
.donut .donut-seg:hover, .donut .donut-seg.is-active { opacity: 1; }
.donut-center { font-variant-numeric: tabular-nums; }

.legend { display: grid; gap: .1rem; width: 100%; font-size: .9rem; }
.legend-item {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center;
  padding: .45rem .5rem; border-radius: var(--r-sm); cursor: default;
  transition: background-color .15s var(--ease);
}
.legend-item:hover { background: var(--surface-2); }
.legend-item .swatch { width: 10px; height: 10px; border-radius: 3px; }
/* `1fr` no basta: un hijo de rejilla vale `min-width: auto`, asi que la
   columna del nombre se negaba a bajar de su ancho minimo y empujaba las
   cuatro columnas fuera del panel (12 px a 320 px, medido). */
.legend-item .name { font-weight: 550; min-width: 0; }
.legend-item .val { font-variant-numeric: tabular-nums; font-weight: 680; }
.legend-item .pct { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: .82rem; min-width: 3.2em; text-align: right; }
/* Por debajo de 380 px el porcentaje pasa a la segunda linea en vez de
   estrujar el importe. */
@media (max-width: 379px) {
  .legend-item { grid-template-columns: auto 1fr auto; row-gap: .1rem; }
  .legend-item .pct { grid-column: 2 / -1; text-align: left; min-width: 0; }
}

.bar-track { height: 10px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; display: flex; gap: 2px; }
.bar-seg { height: 100%; transition: width .4s var(--ease-out); }

.chart-tip {
  position: fixed; z-index: 80; pointer-events: none;
  background: var(--ink); color: var(--bg);
  padding: .4rem .6rem; border-radius: 8px; font-size: .8rem; font-weight: 600;
  box-shadow: var(--sh-2); opacity: 0; transform: translate(-50%, -125%);
  transition: opacity .12s var(--ease);
  white-space: nowrap;
}
.chart-tip.is-visible { opacity: 1; }

/* --- Tables ----------------------------------------------------------- */
.breakdown { width: 100%; border-collapse: collapse; font-size: .92rem; }
.breakdown caption { text-align: left; font-size: .8rem; color: var(--ink-3); padding-bottom: .6rem; }
.breakdown th, .breakdown td { padding: .62rem .45rem; text-align: left; border-bottom: 1px solid var(--border); }
.breakdown thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; }
.breakdown td.num, .breakdown th.num { text-align: right; font-variant-numeric: tabular-nums; }
.breakdown tbody tr:last-child td { border-bottom: 0; }
.breakdown tbody tr:hover { background: var(--surface-2); }
.breakdown tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: 0; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .5rem; }
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll table { min-width: 26rem; }

/* --- Notices ---------------------------------------------------------- */
.notice {
  display: flex; gap: .7rem; padding: .8rem .9rem; border-radius: var(--r-sm);
  font-size: .89rem; line-height: 1.5; border: 1px solid transparent; align-items: flex-start;
}
.notice-info { background: var(--info-bg); color: var(--ink); }
.notice-caution { background: var(--warn-bg); color: var(--ink); }
.notice-estimate { background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }
.notice-good { background: var(--good-bg); color: var(--ink); }
.notice-bad { background: var(--bad-bg); color: var(--ink); }
.notice {
  border-left-width: 3px; border-left-style: solid;
}
.notice-info { border-left-color: var(--accent); }
.notice-caution { border-left-color: #c9871a; }
.notice-estimate { border-left-color: var(--border-strong); }
.notice-good { border-left-color: var(--good); }
.notice-bad { border-left-color: var(--bad); }
.notice .ico {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: .12rem;
  display: grid; place-items: center; font-weight: 800; font-size: .66rem;
  background: color-mix(in srgb, currentColor 14%, transparent); color: var(--ink-2);
}
.privacy-badge {
  display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: var(--ink-2);
  padding: .7rem .85rem; background: var(--good-bg); border-radius: var(--r-sm); margin-top: 1rem;
  border: 1px solid color-mix(in srgb, var(--good) 22%, transparent);
}

/* --- Sources & formula ------------------------------------------------ */
.sources { list-style: none; padding: 0; display: grid; gap: .7rem; font-size: .88rem; }
.sources li { display: grid; gap: .1rem; }
.sources a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sources .meta { color: var(--ink-3); font-size: .8rem; }

.formula { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; font-size: .87rem; }
.formula li {
  display: flex; gap: .8rem; justify-content: space-between; align-items: baseline;
  padding: .45rem .2rem; border-bottom: 1px dashed var(--border);
}
.formula li:last-child { border-bottom: 0; }
.formula .expr { font-family: var(--mono); color: var(--ink-3); font-size: .8rem; }
.formula .val { font-variant-numeric: tabular-nums; font-weight: 680; white-space: nowrap; }

/* --- FAQ -------------------------------------------------------------- */
.faq-list { display: grid; gap: .55rem; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1);
  transition: border-color .16s var(--ease);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item > summary {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 620; list-style: none;
  display: flex; gap: .85rem; align-items: center; min-height: 48px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ''; margin-left: auto; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item > div { padding: 0 1.1rem 1.1rem; color: var(--ink-2); font-size: .93rem; line-height: 1.6; }

/* --- Tool tiles ------------------------------------------------------- */
.tool-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-grid > * { min-width: 0; }
.tool-tile {
  display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-1), var(--edge);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.tool-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--primary-line); }
.tool-tile h3 { font-size: 1.03rem; }
.tool-tile p { font-size: .88rem; color: var(--ink-2); }
.tool-tile .go { margin-top: auto; padding-top: .75rem; font-size: .85rem; font-weight: 650; color: var(--primary-text); }

/* =============================================================
   6. Sections
   ============================================================= */
.hero { padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero-inner { display: grid; gap: 2rem; }
.hero-inner > * { min-width: 0; }
.hero h1 { margin-bottom: .7rem; }
.hero-points { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.hero-points li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.hero-points .tick {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; margin-top: .15rem;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
/* En pantallas muy estrechas los botones de llamada a la accion pasan a ocupar
   toda la linea y se les permite partir el texto. `white-space: nowrap` es
   correcto para un boton de barra, pero en el hero obligaba a la fila a medir
   316 px dentro de un contenedor de 288 y sacaba la portada inglesa fuera de
   la pantalla a 320 px. Medido con tools/medir.mjs; corregido en el origen,
   no con overflow oculto. */
@media (max-width: 400px) {
  .hero-cta, .section-cta, .pill-row { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .section-cta .btn, .pill-row .btn {
    width: 100%; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.8rem, 4vw, 1.7rem);
  }
}
/* La fila de confianza va a lo ancho del hero: en una sola columna se partia
   en tres lineas irregulares. */
.hero-trust { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.hero-trust .trust-row { margin-top: 0 !important; }
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.08fr .92fr; gap: 3rem; align-items: center; }
}

.band { background: var(--surface-1); border-block: 1px solid var(--border); }
.band-dark {
  background: linear-gradient(168deg, #0a1322 0%, #111d31 100%);
  color: #e9f0f9; border-block: 1px solid #1c2a40;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p, .band-dark li { color: #9fb2c8; }
.band-dark .eyebrow { color: #2bbd8a; }
.band-dark .card {
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1);
  color: #e9f0f9; box-shadow: none;
}
.band-dark .card h3 { color: #fff; }

.steps { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: .45rem; align-content: start; }
.step .n {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: .95rem;
  border: 1px solid var(--primary-line);
}
.band-dark .step .n { background: rgba(43, 189, 138, .16); border-color: rgba(43, 189, 138, .35); color: #2bbd8a; }

/* --- Explainer cards (PAYE / USC / PRSI …) ---------------------------- */
.explain-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .explain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .explain-grid { grid-template-columns: repeat(3, 1fr); } }
.explain-grid > * { min-width: 0; }
.explain-card { display: grid; gap: .45rem; align-content: start; }
.explain-card .tag {
  justify-self: start; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  padding: .25rem .55rem; border-radius: 6px; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}
.explain-card h3 { font-size: 1.02rem; }
.explain-card p { font-size: .9rem; color: var(--ink-2); }

/* --- "Y ahora?": tarjetas de accion tras el resultado ------------------ */
.next-head {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .9rem;
}
.next-card {
  position: relative; display: flex; flex-direction: column; gap: .4rem; text-align: left;
  padding: 1.1rem 1.15rem 1.15rem; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: var(--sh-1); cursor: pointer; width: 100%;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.next-card:hover, .next-card:focus-visible {
  transform: translateY(-2px); border-color: var(--primary-line); box-shadow: var(--sh-2);
}
.next-card .ico {
  align-self: flex-start; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: .95rem; margin-bottom: .35rem;
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-line);
}
.next-card .t { font-size: .97rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.next-card .s { font-size: .87rem; color: var(--ink-2); line-height: 1.5; }
.next-card .go {
  margin-top: auto; padding-top: .7rem; font-size: 1rem; font-weight: 700; color: var(--primary-text);
  display: inline-flex; align-items: center; align-self: flex-start;
  transition: transform .18s var(--ease);
}
.next-card:hover .go, .next-card:focus-visible .go { transform: translateX(3px); }

/* --- Pricing ---------------------------------------------------------- */
.plan-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 820px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-grid > * { min-width: 0; }

.plan-card { position: relative; display: grid; gap: .85rem; align-content: start; }
.plan-card.is-featured {
  border-color: transparent;
  box-shadow: var(--sh-3), var(--edge);
}
.plan-card.is-featured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: inherit; padding: 2px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--primary) 72%, #ffffff) 0%,
    var(--primary) 42%,
    var(--primary) 62%,
    color-mix(in srgb, var(--primary) 80%, #04241a) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .plan-card.is-featured { border-color: var(--primary); }
  .plan-card.is-featured::before { padding: 0; background: none; border: 2px solid var(--primary); }
}
.plan-name { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 700; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; margin-block: .2rem; }
.plan-price .amount {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3rem); font-weight: 750; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.plan-price .per { font-size: .95rem; color: var(--ink-2); font-weight: 550; }
.plan-tagline { font-size: .92rem; color: var(--ink-2); }
.plan-annual {
  justify-self: start; font-size: .84rem; color: var(--ink-2); margin-top: -.35rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--primary-soft); border: 1px solid var(--primary-line);
}
.plan-annual strong { color: var(--ink); font-weight: 700; }
.plan-features { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .92rem; margin-top: .3rem; }
.plan-features li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.plan-features .tick {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: .18rem;
  display: grid; place-items: center; font-size: .66rem; font-weight: 800;
  background: var(--primary-soft); color: var(--primary);
}
.plan-features .cross {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: .18rem;
  display: grid; place-items: center; font-size: .66rem; font-weight: 800;
  background: var(--surface-2); color: var(--ink-3);
}
.plan-features li.is-off { color: var(--ink-3); }
.plan-note { font-size: .82rem; color: var(--ink-3); text-align: center; }

/* --- Premium prompt (soft paywall) ------------------------------------ */
.premium-cta {
  display: grid; gap: .85rem; padding: 1.35rem;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--surface-1)), var(--surface-1) 65%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: var(--sh-1), var(--edge);
}
.premium-cta h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.premium-cta p { font-size: .9rem; color: var(--ink-2); }
.premium-cta .price-line { font-size: .92rem; color: var(--ink); font-weight: 600; }
.premium-cta .price-line b { font-size: 1.15rem; font-weight: 750; }

.locked { position: relative; }
.locked > .locked-body { filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }
.locked-overlay {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .7rem;
  text-align: center; padding: 1.5rem;
  background: color-mix(in srgb, var(--surface-1) 72%, transparent);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}
.locked-overlay .lock {
  width: 38px; height: 38px; border-radius: 50%; margin-inline: auto;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border);
}

/* --- Ad slots — reserved and empty ------------------------------------ */
.ad-slot {
  min-height: 120px; display: grid; place-items: center; margin-block: 2rem;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  color: var(--ink-3); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--surface-2);
}
@media (min-width: 960px) { .ad-slot-leaderboard { min-height: 100px; } }

/* --- Shift rows ------------------------------------------------------- */
.shift-row {
  display: grid; gap: .6rem; padding: .9rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); margin-bottom: .7rem;
}
.shift-row.is-invalid { border-color: var(--bad); background: var(--bad-bg); }
.shift-row .grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.shift-row .grid > * { min-width: 0; }
.shift-row input[type='time'], .shift-row input[type='date'] { min-width: 7rem; }
.shift-row .row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.shift-row .input, .shift-row .select { min-height: 42px; font-size: .9rem; }
.shift-row .mini-label { font-size: .73rem; font-weight: 650; color: var(--ink-3); display: block; margin-bottom: .2rem; }

/* --- Compare ---------------------------------------------------------- */
.compare-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-grid > * { min-width: 0; }
.offer-col { border-top: 3px solid var(--series-paye); }
.offer-col.b { border-top-color: var(--series-usc); }

/* Cifra destacada dentro de una tarjeta de oferta.
   No tenia NINGUNA regla: sus dos <span> eran inline y salian pegados,
   "Neto tras gastos de trabajo24.793 €". Ahora la etiqueta va arriba, en
   versalitas, y la cifra debajo, igual que en .metric-hero. */
.headline-figure { display: grid; gap: .15rem; margin-top: .6rem; }
.headline-figure .label {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.headline-figure .value {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 1.95rem);
  font-weight: 750; letter-spacing: -.025em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

.offer-col h3 {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: 1.05rem; letter-spacing: -.015em;
}
/* Las puntuaciones necesitan aire entre si: cuatro barras pegadas se leen
   como una sola mancha. */
.offer-col .score-bar { margin-top: .3rem; }
.offer-col .stack > div + div { margin-top: .7rem; }
.offer-col .meta-line { font-size: .82rem; color: var(--ink-2); }

.score-bar { height: 8px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s var(--ease-out); }
.winner-flag { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; color: var(--good); }

/* --- Tablas anchas en movil ---------------------------------------------
   Una tabla de cuatro columnas dentro de 390 px no cabe, y meterla en un
   contenedor con scroll horizontal deja el texto cortado a media palabra:
   la pagina no desborda, pero nadie puede leerla. Por debajo de 640 px cada
   fila se convierte en una tarjeta y cada celda lleva delante el nombre de su
   columna, que se toma de data-labels para no repetirlo en el HTML. */
@media (max-width: 639px) {
  .breakdown.stack-sm { display: block; }
  .breakdown.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .breakdown.stack-sm tbody { display: block; }
  .breakdown.stack-sm tr {
    display: block; padding: .9rem 0; border-bottom: 1px solid var(--border);
  }
  .breakdown.stack-sm tr:last-child { border-bottom: 0; }
  .breakdown.stack-sm th[scope='row'] {
    display: block; padding: 0 0 .35rem; border: 0;
    font-size: .95rem; font-weight: 700; text-align: left; overflow-wrap: anywhere;
  }
  .breakdown.stack-sm td {
    display: block; padding: .15rem 0; border: 0; text-align: left;
    font-size: .9rem; color: var(--ink-2); overflow-wrap: anywhere;
  }
  .breakdown.stack-sm td::before {
    content: attr(data-label) ': ';
    font-weight: 650; color: var(--ink-3);
  }
  /* La tabla ya no necesita desplazarse: cabe entera. Hay que anular tambien
     el `min-width: 26rem` de .table-scroll table, que es lo que la seguia
     empujando fuera de la pantalla aunque las filas ya estuvieran apiladas. */
  .table-scroll:has(.breakdown.stack-sm) { overflow-x: visible; }
  .table-scroll .breakdown.stack-sm { min-width: 0; width: 100%; }
}

/* --- Breadcrumbs ------------------------------------------------------ */
.breadcrumbs { font-size: .82rem; color: var(--ink-3); padding-block: 1rem .35rem; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumbs li::after { content: '/'; margin-left: .4rem; color: var(--border-strong); }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a:hover { color: var(--primary-text); text-decoration: underline; }

.meta-line { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .82rem; color: var(--ink-3); }

/* --- Cookie banner ---------------------------------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--surface-1); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); padding: 1.1rem var(--gutter);
}
.consent-inner { width: min(1240px, 100%); margin-inline: auto; display: grid; gap: .9rem; }
.consent h2 { font-size: 1rem; }
.consent p { font-size: .87rem; color: var(--ink-2); }
.consent .check { margin-bottom: 0; padding: .3rem .4rem; }
.consent .check input { width: 17px; height: 17px; }
.consent-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent-actions .btn { flex: 1 1 auto; }
@media (min-width: 960px) {
  .consent-inner { grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; }
  .consent-actions { justify-content: flex-end; }
  .consent-actions .btn { flex: 0 0 auto; }
}

/* =============================================================
   7. Effects
   ============================================================= */
.toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: var(--bg); padding: .75rem 1.2rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600; z-index: 95; opacity: 0; pointer-events: none;
  box-shadow: var(--sh-3);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.js-only { display: none; }
.has-js .js-only { display: revert; }
.has-js .no-js-only { display: none; }
.nojs-warning { background: var(--warn-bg); padding: .85rem 1rem; border-radius: var(--r-sm); font-size: .9rem; }

.is-busy { position: relative; }
.is-busy::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: color-mix(in srgb, var(--surface-1) 55%, transparent);
}
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-sunken) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  color: transparent !important;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (max-width: 400px) {
  .logo-text { font-size: .94rem; }
  .logo-text .logo-country { display: none; }
  .header-inner { gap: .6rem; min-height: 62px; }
  .metric-row { grid-template-columns: 1fr; }
}
@media (min-width: 540px) {
  .field-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================
   9. Reduced motion — only what actually moves
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .tool-tile:hover { transform: none; }
  .toast, .bar-seg, .score-bar i { transition: none; }
  .value-flash { animation: none; }
  .skeleton { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================
   10. Print — the PDF report
   ============================================================= */
.print-only { display: none; }

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  :root { color-scheme: light; }
  body::before { display: none; }
  .site-header, .site-footer, .ad-slot, .consent, .no-print, .toast, .skip-link,
  .breadcrumbs, .faq-list, .nav-toggle, .premium-cta, details.advanced > summary { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { width: 100%; padding-inline: 0; }
  .calc-shell { display: block; }
  .calc-summary { position: static; }
  .card, .card-lg, .metric-hero { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; padding: 8mm; margin-bottom: 6mm; background: #fff; }
  details.advanced > div { display: block !important; }
  details.advanced { border-top: 1px solid #ccc; }
  .metric-hero .value { font-size: 26pt; }
  .metric-row, .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .breakdown { font-size: 10pt; }
  .breakdown th, .breakdown td { padding: 2mm 1mm; }
  .table-scroll { overflow: visible; }
  .table-scroll table { min-width: 0; }
  h1 { font-size: 18pt; }
  h2 { font-size: 13pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
  .print-head { border-bottom: 2px solid #0e9f6e; padding-bottom: 4mm; margin-bottom: 6mm; }
  .print-head .brand { font-weight: 800; font-size: 13pt; }
  .print-head .meta { font-size: 9pt; color: #444; }
  .print-foot { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #ccc; font-size: 8.5pt; color: #444; }
}

/* =============================================================
   9. Monetización: bloqueo del resultado, modal y planes
   ============================================================= */

/* --- Resultado bloqueado -----------------------------------------------
   El cálculo está hecho y debajo, correcto. Lo que hay es una capa encima:
   desenfoque suave y un degradado que deja entrever la forma del desglose,
   para que se vea que la herramienta ha funcionado. */
.is-locked { position: relative; }
.is-locked > *:not([data-lock]) {
  filter: blur(7px) saturate(.75);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.lock {
  position: absolute; inset: 0; z-index: 3;
  /* La tarjeta se ancla arriba y es sticky: el panel de resultados mide más
     de una pantalla, y con la tarjeta centrada la llamada a la acción caía
     fuera de la vista justo después de pulsar "Calcular". */
  display: grid; align-items: start; justify-items: center; padding: 1.25rem;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 55%, transparent) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 45%,
      var(--bg) 100%);
  backdrop-filter: blur(2px);
}
.lock-card {
  position: sticky; top: clamp(5rem, 12vh, 7rem);
  width: min(30rem, 100%); max-width: 100%; min-width: 0; text-align: center;
  display: grid; gap: .55rem; justify-items: center;
  /* El relleno se encoge con la pantalla: a 320 px, 1,4rem por lado se comian
     44 px de un cuadro de 246. */
  padding: clamp(1.1rem, 4.5vw, 1.6rem) clamp(.9rem, 4vw, 1.4rem);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--sh-3), var(--edge);
}
/* Un hijo de rejilla vale `min-width: auto` por defecto, o sea: se niega a
   encogerse por debajo de su ancho minimo y se sale del cuadro. Sumado al
   `white-space: nowrap` de .btn, "Desbloquear WorkPay Premium" medía 354 px
   dentro de una tarjeta de 246 y sobresalía 108 px por la derecha a 320 px.
   Medido, no supuesto: tools/medir.mjs lo imprime. */
.lock-card > * { min-width: 0; max-width: 100%; }
.lock-card { overflow-wrap: anywhere; }
.lock-done {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--good-bg); color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 25%, transparent);
}
.lock-title {
  font-size: clamp(1.1rem, 4.6vw, 1.3rem); letter-spacing: -.02em; margin-top: .2rem;
  text-wrap: balance;
}
.lock-body { font-size: .93rem; color: var(--ink-2); max-width: min(34ch, 100%); }
.lock-actions {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-top: .6rem; width: 100%;
}
/* `min-width: 0` es imprescindible: por defecto un elemento flex no encoge por
   debajo del ancho de su texto, y "Desbloquear WorkPay Premium" en una línea
   empujaba la tarjeta 30 px fuera de la pantalla a 360 px de ancho. */
/* `white-space: nowrap` es correcto para un boton de barra, pero aqui obliga a
   la tarjeta entera a medir lo que mida el texto mas largo. Dentro del bloqueo
   el boton puede partir en dos lineas: cabe siempre, tambien en espanol y con
   el zoom al 200 %. */
.lock-actions .btn {
  /* `flex: 0 1 auto`: el boton mide lo que mida su texto y SOLO se encoge
     —partiendo en dos lineas— cuando de verdad no cabe. Con una base fija
     partia en tres lineas hasta en un portatil, que se ve peor que el
     desbordamiento que veniamos a arreglar. */
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  white-space: normal; text-wrap: balance; line-height: 1.25;
  padding-inline: clamp(.8rem, 3.5vw, 1.7rem);
}
@media (max-width: 520px) {
  .lock-actions { flex-direction: column; }
  .lock-actions .btn { flex: 1 1 auto; width: 100%; }
}
.lock-sub { font-size: .82rem; color: var(--ink-3); margin-top: .1rem; max-width: min(38ch, 100%); }

@media (prefers-reduced-motion: reduce) {
  .lock { backdrop-filter: none; }
}

/* --- Modal --------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(8, 15, 26, .58);
  overflow-y: auto;
  animation: modal-in .18s var(--ease);
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none; } }

.modal {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(8, 15, 26, .32), var(--edge);
  display: grid; gap: .8rem;
}
.modal-sm { width: min(26rem, 100%); }
.modal-close {
  position: absolute; top: .7rem; right: .7rem;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border); cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.modal-body { font-size: .93rem; color: var(--ink-2); }
.modal-benefits {
  list-style: none; padding: 0; margin: .2rem 0;
  display: grid; gap: .45rem; font-size: .9rem;
}
@media (min-width: 480px) { .modal-benefits { grid-template-columns: 1fr 1fr; } }
.modal-benefits li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); }
.modal-benefits .tick {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; margin-top: .15rem;
  display: grid; place-items: center; font-size: .62rem; font-weight: 800;
  background: var(--primary-soft); color: var(--primary);
}
.modal-note { font-size: .82rem; color: var(--ink-3); text-align: center; }
/* Un estado neutro (informativo) y otro de error. El color NO es la unica
   diferencia: el de error lleva borde y peso distinto, para quien no
   distingue bien los colores, y se anuncia con role="alert". */
.modal-status.is-error {
  background: var(--bad-bg);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  font-weight: 600;
}
.modal-status {
  font-size: .86rem; color: var(--ink-2); text-align: center;
  padding: .6rem .7rem; border-radius: var(--r-sm);
  background: var(--warn-bg);
}
.modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.modal-actions .btn { flex: 1 1 9rem; min-width: 0; }

/* --- Selector de plan ----------------------------------------------------
   Los dos precios a la vista, con su periodo escrito al lado. El anual se
   destaca porque ahorra dinero, no escondiendo lo que cuesta el mensual. */
.plan-choice { display: grid; gap: .6rem; margin-top: .3rem; }
@media (min-width: 440px) { .plan-choice { grid-template-columns: 1fr 1fr; } }
.plan-opt {
  position: relative; text-align: left; cursor: pointer;
  display: grid; gap: .15rem; align-content: start;
  padding: .95rem 1rem 1rem;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1.5px solid var(--border);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.plan-opt:hover { border-color: var(--border-strong); }
.plan-opt.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.plan-opt-flag {
  position: absolute; top: -.6rem; right: .7rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--primary); color: #fff;
}
.plan-opt-name { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.plan-opt-price {
  font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1;
}
.plan-opt-price small { font-size: .62em; font-weight: 600; color: var(--ink-2); margin-left: .1rem; }
.plan-opt-note { font-size: .78rem; color: var(--ink-3); line-height: 1.4; margin-top: .15rem; }

/* --- Huecos display ------------------------------------------------------
   Altura reservada por adelantado. Un anuncio que aparece y empuja el
   contenido es lo que destroza el CLS; esto evita el salto. */
.ad-host {
  display: block; margin-block: 2rem;
  min-height: 280px; contain: layout;
}
@media (min-width: 960px) { .ad-host[data-ad-format='horizontal'] { min-height: 100px; } }
.ad-host[hidden] { display: none; }

/* Premium no ve ni el hueco. */
:root.is-premium .ad-host,
:root.is-premium .ad-slot { display: none !important; }

@media print {
  .lock, .modal-backdrop, .ad-host { display: none !important; }
  .is-locked > *:not([data-lock]) { filter: none !important; opacity: 1 !important; }
}

/* --- Panel de suscripción ------------------------------------------------ */
.sub-grid { display: grid; gap: 0; margin-top: .4rem; }
.sub-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--border);
}
.sub-row:last-child { border-bottom: 0; }
.sub-k { font-size: .85rem; color: var(--ink-2); }
.sub-v { font-size: .95rem; font-weight: 650; color: var(--ink); text-align: right; }

/* =============================================================
   10. Analizador de nóminas
   ============================================================= */
.payslip-gate .badge-premium { margin-bottom: .2rem; }

.dropzone {
  display: grid; place-items: center; gap: .5rem; text-align: center;
  padding: clamp(2rem, 7vw, 3.25rem) 1.25rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
/* `is-over` se activa al arrastrar encima: sin una señal visible, quien
   arrastra no sabe si ha llegado al sitio. */
.dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); border-style: solid; }
.dz-ico { width: 40px; height: 40px; color: var(--primary); }
.dz-title { font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.dz-or { font-size: .8rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.dz-buttons { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .2rem; }
.dz-buttons .btn { min-width: 0; }
.dz-accepted { font-size: .82rem; color: var(--ink-3); margin-top: .4rem; }

.payslip-estado {
  display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem;
  padding: .85rem 1rem; border-radius: var(--r-sm);
  background: var(--info-bg); font-size: .92rem; color: var(--ink);
}
.spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.ps-h { font-size: 1.05rem; }
.ps-list { display: grid; margin-top: .7rem; }
.ps-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem;
  align-items: baseline; padding: .7rem .1rem;
  border-bottom: 1px solid var(--border);
}
.ps-row:last-child { border-bottom: 0; }
.ps-k { font-size: .92rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.ps-v {
  font-size: .98rem; font-weight: 650; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  display: flex; align-items: center; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
}
@media (max-width: 520px) {
  .ps-row { grid-template-columns: 1fr; gap: .25rem; }
  .ps-v { justify-content: flex-start; text-align: left; }
}

/* Clasificación de cada deducción. Los colores separan lo que la ley obliga
   de lo que la persona puede cambiar: es la distinción que más importa. */
.ps-cls {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}
.ps-cls-statutory { background: var(--bad-bg); color: var(--bad); }
.ps-cls-circumstantial { background: var(--warn-bg); color: #8a5a10; }
.ps-cls-voluntary { background: var(--good-bg); color: var(--good); }
.ps-cls-unknown { background: var(--surface-2); color: var(--ink-3); }
.ps-cls-estimate { background: var(--info-bg); color: var(--accent); }
:root[data-theme='dark'] .ps-cls-circumstantial { color: #e8b55c; }

.ps-redacted { font-size: .7rem; color: var(--ink-3); font-style: italic; }

.conf { font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; }
.conf-high { background: var(--good-bg); color: var(--good); }
.conf-medium { background: var(--warn-bg); color: #8a5a10; }
.conf-low { background: var(--bad-bg); color: var(--bad); }
:root[data-theme='dark'] .conf-medium { color: #e8b55c; }

.ps-employer {
  padding: 1rem 1.1rem; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.ps-employer .ps-row { border-bottom: 0; padding-top: 0; }
.ps-employer .small { color: var(--ink-2); margin-top: .3rem; }

.ps-check {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem .9rem; border-radius: var(--r-sm); font-size: .92rem;
}
.ps-check.is-ok { background: var(--good-bg); }
.ps-check.is-off { background: var(--warn-bg); }
.ps-check-ico {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .72rem;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.ps-check.is-ok .ps-check-ico { color: var(--good); }
.ps-check.is-off .ps-check-ico { color: #8a5a10; }

.payslip-disclaimer {
  margin-top: 1.8rem; padding: .9rem 1rem;
  border-radius: var(--r-sm); background: var(--surface-2);
  border-left: 3px solid var(--border-strong);
  font-size: .84rem; color: var(--ink-2); line-height: 1.55;
}

/* En la pantalla con datos de nómina no se enseña publicidad. */
[data-payslip] ~ * .ad-host,
.payslip-result ~ .ad-host { display: none !important; }

@media print {
  .dropzone, .payslip-estado, .no-print { display: none !important; }
  .payslip-result { border: 0 !important; box-shadow: none !important; }
}

/* --- Acceso a una herramienta desde el panel ------------------------------ */
.panel-tool {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center; gap: 1rem;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.panel-tool:hover { border-color: var(--primary-line); transform: translateY(-1px); }
.panel-tool-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-line);
}
.panel-tool-ico svg { width: 22px; height: 22px; }
.panel-tool-text { display: grid; gap: .2rem; min-width: 0; }
.panel-tool-title { font-size: 1.02rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.panel-tool-desc { font-size: .88rem; color: var(--ink-2); line-height: 1.4; }

/* ===========================================================================
   CUENTA, PAGO Y ESTADO PREMIUM                              (30-09-2026)
   ===========================================================================
   Todo lo de aqui abajo existe por el mismo encargo: Premium va ligado a una
   cuenta, asi que hace falta un registro que no parezca un formulario de
   tramite, y unos estados de pago que digan la verdad mientras se espera al
   webhook.

   Regla que se repite en cada bloque: nada se dice SOLO con color. Los
   estados llevan ademas texto, borde o peso distinto, porque una de cada doce
   personas no distingue rojo y verde y esto es dinero.
   =========================================================================== */

/* --- Pestañas: crear cuenta / entrar -------------------------------------- */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  padding: .25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.auth-tab {
  appearance: none; cursor: pointer;
  /* `min-width: 0` porque un hijo de grid se niega a encoger por debajo de su
     contenido, y "Ya tengo cuenta" a 320 px desbordaba la tarjeta. Es el mismo
     fallo que rompio la tarjeta de bloqueo en septiembre. */
  min-width: 0;
  padding: .6rem .5rem;
  font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--ink-2);
  background: transparent; border: 0; border-radius: calc(var(--r-md) - 4px);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active {
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(8, 15, 26, .1);
}
.auth-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* --- El formulario -------------------------------------------------------- */
.auth-form { display: grid; gap: .45rem; margin: 0; }
.auth-form .label { margin-top: .45rem; }
.auth-form .btn { margin-top: .75rem; }
.auth-hint { margin: .1rem 0 0; }

/* La contraseña y su boton de ver, en una sola linea. El boton va DENTRO del
   campo para no robar ancho al input en movil. */
.auth-pass { position: relative; display: block; }
.auth-pass .input { width: 100%; padding-right: 4.6rem; }
.auth-eye {
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  appearance: none; cursor: pointer;
  padding: .35rem .6rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.auth-eye:hover { color: var(--ink); }
.auth-eye:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

/* --- Enlaces secundarios -------------------------------------------------- */
.auth-alt {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  justify-content: center; align-items: center;
  margin-top: .2rem;
}
.linklike {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: .84rem;
  color: var(--primary-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--ink); }
.linklike:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
.auth-legal { text-align: center; margin: .1rem 0 0; }

/* --- Espera del webhook --------------------------------------------------- */
/* Tres puntos. No es decoracion: es la unica señal de que algo sigue pasando
   mientras Stripe y el webhook corren su carrera. Sin esto, "estamos
   confirmando tu pago" parece una pantalla colgada. */
.pago-espera {
  display: flex; gap: .4rem; justify-content: center;
  padding: .5rem 0 .2rem;
}
.pago-espera span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary);
  animation: pago-latido 1.1s var(--ease) infinite;
}
.pago-espera span:nth-child(2) { animation-delay: .16s; }
.pago-espera span:nth-child(3) { animation-delay: .32s; }
@keyframes pago-latido {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40%           { opacity: 1;   transform: scale(1); }
}
/* Quien pidio menos movimiento no ve el rebote, pero sigue viendo que algo
   ocurre: el punto cambia de opacidad, no de tamaño. */
@media (prefers-reduced-motion: reduce) {
  .pago-espera span { animation-duration: 2s; }
  @keyframes pago-latido { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}
.modal-actions {
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
  margin-top: .3rem;
}
.modal-actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; }

/* --- Premium ya activo ---------------------------------------------------- */
/* A quien ya paga no se le vuelve a enseñar un boton de comprar: el CTA se
   convierte en una constancia de que esta activo. */
.premium-active-note { margin: 0 0 .6rem; }
[data-premium-cta].is-premium-active { opacity: .96; }
[data-premium-cta].is-premium-active .price-line { display: none; }
.sub-badge { margin: 0 0 .9rem; }

/* --- Publicidad y estado Premium ------------------------------------------ */
/* Mientras no sepamos si esta persona paga, NO se enseña publicidad.
   'loading' e 'idle' son "aun no lo se"; 'error' es "no he podido preguntar";
   'pending' es "acaba de pagar". En los cuatro casos, fallar hacia el lado
   que no molesta a quien paga cuesta unas cuantas impresiones y evita el
   fallo caro: enseñarle anuncios a un suscriptor porque la red parpadeo. */
:root[data-premium='idle']    .ad-host,
:root[data-premium='loading'] .ad-host,
:root[data-premium='error']   .ad-host,
:root[data-premium='pending'] .ad-host,
:root[data-premium='idle']    .ad-slot,
:root[data-premium='loading'] .ad-slot,
:root[data-premium='error']   .ad-slot,
:root[data-premium='pending'] .ad-slot { display: none !important; }

/* Un hueco sin anuncio dentro no reserva altura: asi no queda un rectangulo
   vacio si AdSense no sirve nada o un bloqueador corta la peticion. */
.ad-host:empty { display: none !important; min-height: 0 !important; }

/* --- La puerta del analizador mientras carga ------------------------------ */
.payslip-gate.is-loading { opacity: .72; }

/* --- Movil ---------------------------------------------------------------- */
@media (max-width: 420px) {
  .auth-tab { font-size: .82rem; padding: .55rem .35rem; }
  .auth-eye { font-size: .72rem; padding: .3rem .45rem; }
  .auth-pass .input { padding-right: 4rem; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }
  .auth-alt { flex-direction: column; gap: .5rem; }
}

/* ===========================================================================
   GESTIONAR LA SUSCRIPCION                                   (30-09-2026)
   ===========================================================================
   Va al final del panel y tiene que verse profesional sin llamar la atencion.
   Cancelar no es una accion que haya que empujar: es una que tiene que estar
   disponible, ser facil de encontrar cuando se busca, y no competir con el
   resto del panel. De ahi el borde punteado, el fondo hundido y el boton
   fantasma en vez de uno rojo y grande.
   =========================================================================== */
.sub-manage { padding-top: 0; padding-bottom: 3rem; }
.sub-manage-box {
  max-width: 44rem;
  margin-inline: auto;
  padding: 1.3rem clamp(1rem, 4vw, 1.6rem);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.sub-manage-title {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 700;
  color: var(--ink-2);
}
.sub-manage-body { margin: 0; font-size: .89rem; color: var(--ink-2); max-width: 56ch; }
.sub-manage-state { margin: 0 0 .5rem; }
.sub-manage-until { margin: .2rem 0 0; font-size: .9rem; color: var(--ink); }
.sub-manage-note { margin: .7rem 0 0; font-size: .8rem; color: var(--ink-3); max-width: 56ch; }
.sub-manage-actions {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: .9rem;
}
/* En el cuadro de confirmacion los dos botones ocupan lo mismo: ninguno de
   los dos debe parecer "el que hay que pulsar" por tamaño. El que manda es el
   primario, y el primario es SEGUIR con Premium. */
.sub-manage-actions-modal { margin-top: 1rem; }
.sub-manage-actions-modal .btn { flex: 1 1 10rem; min-width: 0; white-space: normal; }

/* Un boton destructivo discreto: color de aviso, sin relleno. El color NO es
   la unica señal —el texto dice "Cancelar Premium"— pero ayuda a que no se
   pulse por inercia creyendo que es "guardar". */
.btn-danger { color: var(--bad); }
.btn-danger:hover { color: var(--bad); background: var(--bad-bg); }
.btn-danger:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }

/* Insignia neutra para "Premium cancelado": no es un exito ni un error, es un
   estado. Pintarla de verde o de rojo diria algo que no es. */
.badge-soft {
  display: inline-block;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border-strong);
}
.sub-manage-status { margin: .8rem 0 0; font-size: .86rem; color: var(--ink-2); }
.sub-manage-status.is-error {
  padding: .55rem .7rem; border-radius: var(--r-sm);
  background: var(--bad-bg);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  font-weight: 600; color: var(--ink);
}

@media (max-width: 420px) {
  .sub-manage-actions .btn, .sub-manage-actions-modal .btn { width: 100%; }
}

/* NOTA SOBRE EL VERDE Y EL CONTRASTE.
   `--primary` (#0e9f6e) es el verde de marca y se queda donde rellena: fondos,
   bordes, iconos, `accent-color`. Para TEXTO se usa `--primary-text`, que es
   el mismo tono mas oscuro, porque el de marca da 3,13-3,38:1 sobre fondo
   claro y WCAG pide 4,5:1. Lo encontro Lighthouse en `.eyebrow`, el selector
   de idioma y la clase `.go`, y lo confirme calculando las ratios a mano.
   Si añades texto en verde, usa `--primary-text`. */

/* --- Ejemplo numérico trabajado ------------------------------------------- */
/* Va debajo de la calculadora y tiene que leerse como un documento, no como
   otro widget: por eso tabla sencilla, una fila de total marcada, y el texto
   de interpretación a ancho de lectura. */
.worked-example { margin-top: .5rem; }
/* La tabla del ejemplo tiene DOS columnas y no necesita desplazarse.
   Heredaba `.table-scroll table { min-width: 26rem }`, pensado para las tablas
   anchas de desglose, y a 375 px eso empujaba la columna de importes fuera de
   la pantalla: se veian las etiquetas y ningun numero. Un ejemplo numerico sin
   numeros visibles no es un ejemplo. Lo encontre mirando la captura, no
   midiendo: la comprobacion automatica no lo vio porque el desbordamiento
   ocurre DENTRO de un contenedor con overflow, que es justo lo que esa
   comprobacion ignora a proposito. */
.worked-example .table-scroll { overflow-x: visible; }
/* La especificidad importa: `.table-scroll table` (0,1,1) le gana a
   `.worked-example-table` (0,1,0), asi que el min-width hay que anularlo con
   un selector al menos igual de especifico. Mi primer intento fallo por esto. */
.worked-example .table-scroll table.worked-example-table,
table.worked-example-table {
  width: 100%; min-width: 0; table-layout: fixed;
}
.worked-example-table th[scope="row"] { width: auto; }
.worked-example-table td.num { width: 7.5rem; }
.worked-example-table th[scope="row"] { font-weight: 500; color: var(--ink-2); }
.worked-example-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.worked-example-table tr.is-total th,
.worked-example-table tr.is-total td {
  font-weight: 700; color: var(--ink);
  border-top: 2px solid var(--border-strong);
}
.worked-example .h4 { font-size: 1rem; font-family: var(--sans); }
@media (max-width: 420px) {
  .worked-example-table th[scope="row"] { font-size: .86rem; }
}

/* --- Identidad legal ------------------------------------------------------ */
/* El bloque de responsable que aparece en Privacidad, Terminos y Contacto.
   Se lee como una direccion postal porque eso es lo que es: lineas cortas,
   no un parrafo. */
.legal-identity {
  margin-top: .6rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--primary-line);
  background: var(--surface-2, var(--primary-soft));
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  line-height: 1.6;
}
.legal-updated { color: var(--ink-3); font-size: .92rem; }

/* A 320 px el correo (diego.bernabeu.martinez@gmail.com, 33 caracteres sin un
   solo punto de corte natural) empujaba la pagina 3 px y aparecia scroll
   horizontal en los Terminos. No se veia en el barrido de elementos porque
   ninguna CAJA desbordaba: lo que desbordaba era el TEXTO dentro de su caja,
   que solo se ve mirando scrollWidth contra clientWidth.
   Lo mismo vale para cancel_at_period_end y para cualquier URL larga. */
.prose p,
.prose li,
.legal-identity,
.prose a[href^="mailto:"],
.prose a[href^="http"],
.prose code {
  overflow-wrap: anywhere;
}

/* --- Formulario de desistimiento ------------------------------------------ */
/* Es un texto para copiar literalmente: los saltos de linea son parte del
   formulario, no decoracion, asi que va en <pre> y conserva el espaciado.
   `white-space: pre-wrap` para que a 320 px no obligue a desplazarse en
   horizontal, y `overflow-wrap` para la direccion de correo larga. */
.cancellation-form pre {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  color: var(--ink-2);
}
.cancellation-form { margin: 1rem 0 1.25rem; }
@media (max-width: 420px) {
  .cancellation-form pre { font-size: .76rem; padding: .8rem .85rem; }
}