/* Blog: lectura cómoda (18 px, 68 caracteres por línea), mismo sistema visual que la web. */
:root{--red:#ff4a1c; --red-btn:#d9360c; --green:#0b7d47}
body{background:var(--bg)}
.narrow{max-width:760px}
.bbar{position:sticky; top:0; z-index:40; background:rgba(246,243,236,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bbar .logo{white-space:nowrap}
.bbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:62px}
.bbar nav{display:flex; align-items:center; gap:4px}
.bbar nav a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14.5px; padding:9px 11px; border-radius:10px}
.bbar nav a:hover{background:#ece7dc}
.bbar nav a[aria-current=page]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--red); border-radius:0}
.bbar nav a.cta{background:var(--red-btn); color:#fff; border-radius:999px; padding:0 16px; min-height:40px; display:inline-flex; align-items:center}
.bbar nav a.cta:hover{background:#c42f08}
@media (max-width:620px){ .bbar nav a:not(.cta):first-child{display:none} }

.crumbs{font-size:13.5px; color:var(--muted); margin:22px 0 14px}
.crumbs a{color:var(--ink-2); text-decoration:underline; text-decoration-color:#c9c2b2; text-underline-offset:3px} .crumbs a:hover{text-decoration-color:var(--ink-2)}
.pcat,.pc-cat{display:inline-block; font:700 11.5px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; color:#6d5300; background:var(--sun-2); padding:6px 10px; border-radius:999px}
.post h1{font-size:clamp(2.1rem, 8vw, 3.4rem); line-height:1.04; margin:14px 0 12px; font-weight:800; letter-spacing:-.025em}
.post .meta{color:var(--muted); font-size:14px}
.post .meta b{color:var(--ink-2)}
.hero-img{margin:24px auto 8px; max-width:1100px}
.hero-img img{width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; border-radius:var(--r-lg); background:#e8e3d8}
.hero-img figcaption{font-size:11.5px; color:var(--muted); text-align:right; margin-top:6px}

.resumen{margin:22px 0; padding:18px 20px; border-radius:var(--r); background:#fff; border-left:5px solid var(--sun); box-shadow:var(--shadow)}
.rlabel{display:block; font:700 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.resumen p{font-size:18px; line-height:1.55; color:var(--ink)}
.toc{margin:20px 0 8px; padding:16px 20px; border-radius:var(--r); border:1.5px solid var(--line)}

.toc ol{margin:8px 0 0; padding-left:20px; display:grid; gap:4px; font-size:15px}
.toc a{color:var(--ink-2)}

.body{font-size:18px; line-height:1.7; color:#1e2b3d}
.body > *{max-width:68ch}
.body h2{font-size:clamp(1.5rem, 5vw, 2rem); line-height:1.15; margin:44px 0 12px; scroll-margin-top:80px}
.body h3{font-size:1.25rem; margin:30px 0 8px}
.body p{margin:0 0 18px}
.body ul,.body ol{margin:0 0 18px; padding-left:24px}
.body li{margin-bottom:8px}
.body a{color:var(--ink); text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:3px; font-weight:600}
.body strong{color:var(--ink)}
.body blockquote{margin:22px 0; padding:14px 18px; border-radius:12px; background:var(--sun-2); color:#4d3c00; font-size:16.5px}
.body blockquote p:last-child{margin:0}
.tbl{overflow-x:auto; margin:0 0 22px; border-radius:12px; border:1px solid var(--line); background:#fff}
.body table{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.45}
.body th{background:#f1ede4; text-align:left; padding:10px 12px; font-weight:700; white-space:nowrap}
.body td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:top}

.cta-box{margin:36px 0; padding:24px 22px; border-radius:var(--r-lg); background:var(--ink); color:#fff; display:grid; gap:10px; justify-items:start}
.cta-box strong{font:800 22px/1.2 var(--display)}
.cta-box p{color:#c9d3e3; font-size:16px}
.cta-box .btn-red{background:var(--red-btn); color:#fff; min-height:52px; padding:0 22px}
.cta-box small{color:#9fb0c8}
.faq{margin:36px 0}
.faq h2{font-size:1.7rem; margin-bottom:14px}
.faq details{background:#fff; border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:10px}
.faq summary{cursor:pointer; list-style:none; padding:16px 18px; font-weight:700; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px; color:var(--ink-2); line-height:1.6}
.author{margin:30px 0; padding:18px 20px; border-radius:var(--r); border:1.5px solid var(--line); font-size:15px; color:var(--ink-2)}
.author b{display:block; color:var(--ink); margin-bottom:4px}

.more{margin:30px auto 70px}
.more h2{font-size:1.6rem; margin-bottom:16px}
.pgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr))}
.pcard a{display:grid; height:100%; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:transform var(--fast) var(--out)}
.pcard a:hover{transform:translateY(-3px)}
.pcard img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#e8e3d8}
.pc-b{padding:16px 18px 18px; display:grid; gap:8px; align-content:start}
.pc-b h3{font-size:19px; line-height:1.2}
.pc-b p{font-size:14.5px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pc-m{font-size:12.5px; color:var(--muted)}

.blog-index h1{font-size:clamp(2.6rem, 11vw, 5rem); line-height:.98; letter-spacing:-.035em; font-weight:800; margin-top:6px}
.blog-index .lead{font-size:clamp(17px, 4.5vw, 20px); color:var(--ink-2); max-width:44ch; margin-top:14px}
.cats{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px}
.cats a{padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px}
.cats a:hover{border-color:var(--ink)}
.feat a{display:grid; background:var(--ink); color:#fff; border-radius:var(--r-lg); overflow:hidden; text-decoration:none}
.feat img{width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover}
.feat a > div{padding:22px; display:grid; gap:10px; align-content:center}
.feat h2{font-size:clamp(1.6rem, 5.5vw, 2.4rem); line-height:1.08}
.feat p{color:#c9d3e3}
.feat .pc-m{color:#9fb0c8}
@media (min-width:900px){ .feat a{grid-template-columns:1.2fr 1fr} .feat img{height:100%; aspect-ratio:auto} }
.catsec{margin:44px 0}
.catsec h2{font-size:1.7rem; margin-bottom:16px; scroll-margin-top:80px}
.bfoot{border-top:1px solid var(--line); padding:28px 0 calc(28px + env(safe-area-inset-bottom)); margin-top:30px}
.bfoot .wrap{display:grid; gap:14px; font-size:14px; color:var(--muted)}
.bfoot nav{display:flex; flex-wrap:wrap; gap:8px 18px}
.bfoot nav a{color:var(--ink-2)}