/* elPagès Web hub. Shape rule: cards 20px, buttons pill. Brand colours from the #elPagès logo: teal #00695C, yellow #FFC000 (yellow only on dark surfaces). */
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --f-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --bg: #f5f4f1; --surface: #fdfcfa; --surface-2: #ebe9e4; --field: #fff;
  --ink: #161513; --muted: #5b5852; --line: #dddad3; --line-strong: #b9b5ac;
  --accent: #00695c; --accent-hover: #00564b; --accent-ink: #ffffff; --accent-text: #00695c;
  --danger: #b42318; --r-s: 12px; --r-m: 20px; --r-btn: 999px;
  --shadow: 0 30px 60px -32px rgb(40 30 20 / .35), 0 1px 3px rgb(40 30 20 / .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100f0e; --surface: #191816; --surface-2: #141311; --field: #141311;
    --ink: #efede8; --muted: #a8a49b; --line: #2a2825; --line-strong: #403d38;
    --accent: #ffc000; --accent-hover: #ffcf3d; --accent-ink: #1a1500; --accent-text: #ffc000;
    --shadow: 0 30px 60px -26px rgb(0 0 0 / .75);
  }
}
.lg-bg { fill: var(--accent); } .lg-fg { fill: var(--accent-ink); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; }
.hub-hero { padding-block: 48px 36px; }
@media (min-width: 1024px) { .hub-hero { padding-block: 80px 48px; } }
.hub-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -0.05em; max-width: 15ch; margin-bottom: .35em; }
.hub-hero h1 em { font-style: normal; color: var(--accent-text); }
.brand svg { border-radius: 8px; }
.brand-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin: 0 0 1.5em; padding: 18px; border-radius: var(--r-m); background: #00695c; color: #fff; }
.brand-card img { width: 96px; height: 96px; border-radius: 16px; }
.brand-card p { margin: 0; color: #e6f2f0; }
.brand-card strong { color: #ffc000; }
.hub-lead { color: var(--muted); font-size: 1.15rem; max-width: 52ch; }

.tools { display: grid; gap: 18px; }
@media (min-width: 900px) { .tools { grid-template-columns: repeat(3, 1fr); } .tools .tool-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; } .tools .tool-lead img { height: 100%; } }
.tool { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-decoration: none; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s; }
.tool:hover { transform: translateY(-4px); border-color: var(--accent); }
.tool img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--line); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.tool:hover img { transform: scale(1.03); }
.tool-lead img { border-bottom: 0; border-right: 1px solid var(--line); }
.tool-body { padding: 22px 24px 26px; display: grid; gap: 8px; align-content: center; }
.tool-lead .tool-body { padding: 36px; }
.tool h2 { font-size: 1.4rem; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tool-lead h2 { font-size: 2rem; }
.tool h2 .i { color: var(--accent-text); transition: transform .3s; }
.tool:hover h2 .i { transform: translate(3px, -3px); }
.tool p { margin: 0; color: var(--muted); }
@media (max-width: 899px) { .tool-lead img { border-right: 0; border-bottom: 1px solid var(--line); } }

.principles { padding-block: 88px 0; }
.principles h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.p-grid { display: grid; gap: 28px; margin-top: 24px; }
@media (min-width: 820px) { .p-grid { grid-template-columns: repeat(3, 1fr); } }
.p-grid div { border-top: 2px solid var(--ink); padding-top: 16px; }
.p-grid h3 { font-size: 1.15rem; }
.p-grid p { color: var(--muted); margin: 0; }

.article { padding-block: 56px 0; }
.article-head { max-width: 780px; margin-bottom: 32px; }
.article-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -0.045em; }
.article-head p { color: var(--muted); font-size: 1.15rem; }