:root { --bg:#f6f8f8; --card:#ffffff; --ink:#14222a; --ink-soft:#55666f; --accent:#0e7c72; --accent-soft:#e2f0ee; --line:#e0e7e9; --radius:14px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1619; --card:#172126; --ink:#e8eef0; --ink-soft:#94a5ad; --accent:#35b0a4; --accent-soft:#143a36; --line:#25333a; } }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.75; }
a { color:var(--accent); }
header { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); z-index:10; }
.headrow { display:flex; align-items:center; justify-content:space-between; max-width:820px; margin:0 auto; padding:12px 24px; }
.headrow img { height:34px; display:block; }
.headcta { background:var(--accent); color:#fff; border-radius:10px; padding:9px 16px; font-weight:650; font-size:14px; text-decoration:none; }
.wrap { max-width:720px; margin:0 auto; padding:0 24px 80px; }
/* --- índice del blog --- */
.intro { padding:52px 0 10px; }
.intro h1 { font-size:clamp(28px,5vw,40px); letter-spacing:-0.02em; }
.intro p { color:var(--ink-soft); margin-top:10px; font-size:17px; max-width:600px; }
.posts { margin-top:36px; display:grid; gap:18px; }
.post { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; transition:border-color .15s; text-decoration:none; }
.post:hover { border-color:var(--accent); }
.post .tag { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.post h2 { font-size:21px; margin:8px 0 6px; letter-spacing:-0.01em; color:var(--ink); }
.post p { color:var(--ink-soft); font-size:15px; }
.post .meta { color:var(--ink-soft); font-size:13px; margin-top:12px; }
/* --- artículo --- */
.crumb { font-size:14px; margin:26px 0 0; }
article, .article { max-width:720px; }
h1 { font-size:clamp(27px,4.5vw,38px); letter-spacing:-0.02em; margin:16px 0 8px; line-height:1.2; }
.byline { color:var(--ink-soft); font-size:14px; margin-bottom:24px; }
.hero-img { width:100%; height:auto; border-radius:var(--radius); display:block; margin-bottom:34px; }
article p { font-size:17px; color:var(--ink); margin:0 0 18px; }
article h2 { font-size:23px; letter-spacing:-0.01em; margin:40px 0 12px; line-height:1.25; }
article h3 { font-size:18px; margin:26px 0 8px; }
article strong { color:var(--ink); }
article ul { margin:0 0 20px; padding-left:22px; }
article li { font-size:17px; margin-bottom:8px; }
.lead { font-size:19px !important; color:var(--ink-soft) !important; }
.cta { background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:26px 28px; margin:40px 0; }
.cta h3 { font-size:19px; margin:0 0 8px; }
.cta p { font-size:15.5px !important; color:var(--ink-soft) !important; margin-bottom:16px !important; }
.cta a { display:inline-block; background:var(--accent); color:#fff; border-radius:11px; padding:12px 22px; font-weight:650; text-decoration:none; }
footer { border-top:1px solid var(--line); margin-top:56px; padding-top:22px; font-size:14px; color:var(--ink-soft); }
footer a { color:var(--ink-soft); }