/* Fem Comptes · full d'estil comú. Els temes només canvien variables (i algun detall). */
:root, [data-tema="e"] {
  --bg:#fffaf3; --surface:#ffffff; --ink:#13233a; --muted:#5f6b7a; --line:#e7e2d9;
  --accent:#e8603f; --strong:#173a63; --hi:#ffe3a3; --neg:#b3261e; --pos:#1f6b45;
  --radius:14px; --head:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --body:var(--head);
  --paper:linear-gradient(#eef3ee 1px, transparent 1px); --hero-size:52px;
}
[data-tema="d"] {
  --bg:#ffffff; --surface:#ffffff; --ink:#0f1e33; --muted:#5b6b80; --line:#e3e8ef;
  --accent:#2f7de1; --strong:#173a63; --hi:#eaf1f8; --radius:10px; --paper:none;
}
[data-tema="c"] {
  --bg:#fff7ef; --surface:#ffffff; --ink:#1b1530; --muted:#5f5874; --line:#f0e6da;
  --accent:#ff6b4a; --strong:#1b1530; --hi:#ffd166; --pos:#0e9f8a; --radius:22px; --paper:none; --hero-size:60px;
}
[data-tema="b"] {
  --bg:#f4f7f2; --surface:#fffffb; --ink:#14301f; --muted:#5d7466; --line:#cfe0d3;
  --accent:#1f6b45; --strong:#14301f; --hi:#e2efe5; --radius:4px;
  --paper:linear-gradient(#cfe0d3 1px, transparent 1px);
}
[data-tema="b"] h1, [data-tema="b"] h2, [data-tema="b"] .logo { font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:-.5px; }
[data-tema="c"] h1, [data-tema="c"] h2 { font-weight:900; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.6; font-size:17px; }
a { color:var(--accent); }
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.narrow { max-width:720px; }

/* Capçalera */
.site-h { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.site-h .wrap { display:flex; justify-content:space-between; align-items:center; min-height:64px; gap:12px; flex-wrap:wrap; }
.logo { font-weight:800; font-size:20px; display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.logo i { font-style:normal; width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.menu { display:flex; gap:20px; flex-wrap:wrap; }
.menu a { color:var(--muted); text-decoration:none; font-size:15px; }
.menu a:hover, .menu a.on { color:var(--ink); }
.menu a.on { font-weight:700; }

/* Tipografia i blocs */
h1 { font-family:var(--head); font-size:var(--hero-size); line-height:1.06; letter-spacing:-1.2px; margin:14px 0 18px; }
h1 span { color:var(--accent); }
h2 { font-family:var(--head); font-size:30px; letter-spacing:-.5px; margin:0 0 16px; line-height:1.15; }
h3 { margin:0 0 6px; font-size:19px; }
.eyebrow { display:inline-block; background:var(--hi); padding:5px 12px; border-radius:999px; font-weight:700; font-size:13px; }
.lead { font-size:19px; color:var(--muted); max-width:42ch; }
.muted, .small { color:var(--muted); } .small { font-size:13px; }
.btn { display:inline-block; margin:18px 10px 0 0; padding:12px 20px; border-radius:calc(var(--radius) * .7); text-decoration:none; font-weight:700; font-size:15px; }
.btn.p { background:var(--strong); color:#fff; } .btn.s { color:var(--strong); border:1.5px solid var(--line); background:var(--surface); }
section { padding:64px 0; border-top:1px solid var(--line); }
.page-top { padding:56px 0 24px; }
.sec-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.sec-h p { margin:0; color:var(--muted); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-decoration:none; color:inherit; display:block; }
a.card:hover { border-color:var(--accent); }
.card .n { color:var(--accent); font-weight:700; font-size:13px; } .card p { margin:0; color:var(--muted); }
.card.soon { opacity:.6; } .card.soon .n { color:var(--muted); }
.pending { background:#fff4c2; outline:1px dashed #c9a400; padding:0 4px; border-radius:3px; font-size:.95em; }
.note-prov { background:var(--hi); border-radius:var(--radius); padding:12px 16px; font-size:14px; margin:0 0 24px; }

/* Portada */
.hero { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; padding:72px 0 64px; }
.ledger { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; background-image:var(--paper); background-size:100% 34px; box-shadow:0 20px 40px -30px rgba(0,0,0,.35); }
.ledger .q { font-weight:800; font-size:18px; margin-bottom:8px; }
.ledger table { width:100%; border-collapse:collapse; font-size:15px; }
.ledger th { text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--ink); padding:6px 2px; }
.ledger td { padding:7px 2px; border-bottom:1px dashed var(--line); } .ledger td.n { text-align:right; }
.ledger .neg { color:var(--neg); } .ledger .tot td { border-top:2px solid var(--ink); border-bottom:3px double var(--ink); font-weight:800; }
.who { display:flex; align-items:center; gap:12px; margin-top:16px; font-size:14px; color:var(--muted); }
.ph { width:44px; height:44px; border-radius:50%; background:repeating-linear-gradient(45deg,#e6e0d6 0 6px,#f6f2ea 6px 12px); flex:none; display:flex; align-items:center; justify-content:center; font-size:8px; color:var(--muted); }
.ph.big { width:150px; height:150px; font-size:12px; }

/* Calculadores */
.calc { background:var(--strong); color:#fff; border-radius:calc(var(--radius) + 4px); padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:28px; }
.calc h2 { color:#fff; margin-bottom:6px; } .calc .sub { color:#d3dbe6; margin:0 0 18px; }
.calc label { display:block; font-size:13px; color:#d3dbe6; font-weight:600; }
.calc input { width:100%; font:700 20px ui-monospace,Menlo,monospace; padding:11px 12px; border:0; border-radius:10px; margin:6px 0 14px; background:rgba(255,255,255,.14); color:#fff; }
.out { background:var(--surface); color:var(--ink); border-radius:var(--radius); padding:22px; align-self:start; }
.out .l { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); color:var(--muted); gap:10px; }
.out .l span:last-child { color:var(--ink); font-weight:700; text-align:right; }
.out .t small { color:var(--muted); display:block; margin-top:14px; }
.out .t div { font-size:44px; font-weight:800; color:var(--accent); letter-spacing:-1px; line-height:1.1; }
.out p { color:var(--muted); font-size:14px; }
.bar { height:12px; background:var(--line); border-radius:6px; position:relative; margin:10px 0 4px; overflow:hidden; }
.bar b { position:absolute; left:0; top:0; bottom:0; background:var(--pos); border-radius:6px; transition:width .3s; }
.bar.warn b { background:#d98a00; } .bar.bad b { background:var(--neg); }
.marks { position:relative; height:16px; font-size:11px; color:var(--muted); }
.marks span { position:absolute; transform:translateX(-50%); } .marks span:first-child { transform:none; } .marks span:last-child { transform:translateX(-100%); }
.bar i { position:absolute; top:0; bottom:0; width:2px; background:var(--ink); opacity:.35; }
body { padding-bottom:56px; }

/* Article */
.article h1 { font-size:46px; }
.article .sub { font-size:21px; color:var(--muted); font-style:italic; margin:0 0 18px; }
.article .by { display:flex; gap:12px; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; margin-bottom:26px; font-size:15px; color:var(--muted); }
.article p { font-size:19px; line-height:1.7; }
.article .src { font-size:14px; color:var(--muted); border-left:3px solid var(--accent); padding-left:12px; margin-top:30px; }

/* Text legal i llargs */
.prose h2 { font-size:22px; margin-top:32px; } .prose p, .prose li { color:#2d3a4a; }

/* Peu */
.site-f { border-top:1px solid var(--line); padding:28px 0 44px; font-size:14px; color:var(--muted); background:var(--surface); }
.site-f .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.site-f a { color:var(--muted); margin-right:14px; }
.disc { font-size:13px; }

/* Barra de previsualització de temes (només per decidir; es treu en publicar) */
.temes { position:fixed; right:14px; bottom:14px; background:#111; color:#fff; border-radius:12px; padding:8px 10px; font:13px -apple-system,Arial,sans-serif; z-index:50; display:flex; gap:6px; align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.temes button { border:0; border-radius:8px; padding:6px 10px; background:#333; color:#fff; font-weight:700; cursor:pointer; }
.temes button.on { background:#e8603f; }

@media (max-width:860px) {
  body { font-size:16px; }
  :root, [data-tema] { --hero-size:38px; }
  .hero, .grid2, .calc { grid-template-columns:1fr; gap:28px; } .hero { padding:40px 0; }
  .grid3 { grid-template-columns:1fr; } .calc { padding:22px; }
  .menu { gap:14px; } .menu a { font-size:14px; }
  .article h1 { font-size:34px; } .article p { font-size:17px; }
  section { padding:44px 0; }
  .temes { left:10px; right:10px; justify-content:center; }
}