@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');
:root{--ink:#063a45;--body:#3f6566;--teal:#087c83;--cyan:#119bb4;--orange:#e65a2a;--line:#d1e4df;--soft:#f4f8f6;--mint:#94d3cb;--bg:#ffffff;--gutter:clamp(16px,5vw,72px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#e6f4f1;--body:#b7d0cc;--teal:#6fd0c4;--cyan:#5fcbe0;--orange:#ff8a5c;--line:#24474b;--soft:#0f2a2f;--bg:#081f24}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:18px;line-height:1.65}
a{color:var(--teal)}
a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter);border-bottom:1px solid var(--line)}
.top img{display:block;width:150px;height:auto}
.top nav{display:flex;gap:20px;font-size:15px}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a.cta{padding:8px 14px;border-radius:12px;background:var(--ink);color:var(--bg)}
main{padding:0 var(--gutter)}
.wrap{max-width:720px;margin:0 auto;padding:56px 0 80px}
.kicker{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
h1{margin:0 0 20px;font-size:clamp(34px,5.4vw,56px);font-weight:500;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
h2{margin:56px 0 12px;font-size:clamp(25px,3vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
h3{margin:32px 0 8px;font-size:21px;font-weight:600;line-height:1.3}
p,ul,ol{margin:0 0 18px;color:var(--body)}
li{margin-bottom:8px}
strong{color:var(--ink);font-weight:600}
.lead{font-size:21px;color:var(--ink)}
.byline{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid var(--line);font-size:15px;color:var(--body)}
.answer{margin:0 0 32px;padding:20px 24px;border-left:4px solid var(--orange);border-radius:0 16px 16px 0;background:var(--soft)}
.answer p{margin:0;color:var(--ink)}
.answer p+p{margin-top:10px}
.lesson{display:inline-block;margin-right:8px;color:var(--orange);font-variant-numeric:tabular-nums}
.takeaway{margin:0 0 18px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);font-size:16px;color:var(--ink)}
.box{margin:48px 0 0;padding:28px;border-radius:20px;background:var(--ink);color:var(--bg)}
.box h2{margin-top:0;color:var(--bg)}
.box p{color:var(--bg);opacity:.85}
.box a.button{display:inline-block;margin-top:8px;padding:12px 18px;border-radius:12px;background:var(--bg);color:var(--ink);font-weight:600;text-decoration:none}
.note{margin-top:40px;font-size:15px;color:var(--body)}
.posts{list-style:none;padding:0;margin:32px 0 0}
.posts li{padding:24px 0;border-top:1px solid var(--line)}
.posts a{color:var(--ink);text-decoration:none}
.posts h2{margin:6px 0 8px;font-size:clamp(23px,3vw,30px)}
.posts p{margin:0}
.meta{font-size:14px;color:var(--body)}
.fill{background:#ffe9a8;color:#5a4300;padding:0 4px;border-radius:4px}
footer{padding:32px var(--gutter);border-top:1px solid var(--line);font-size:14px;color:var(--body)}
footer .in{max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
@media (max-width:600px){body{font-size:17px}.top nav a:not(.cta){display:none}.lead{font-size:19px}.box{padding:22px}}

/* Franja de marca y foto de portada (13 oct 2026) */
.post-hero { padding: 56px var(--gutter) 120px; background: radial-gradient(ellipse at 88% 0%, #c9eee1 0%, #50c0b0 22%, transparent 50%), linear-gradient(120deg, #036574 0%, #119bb4 60%, #50c0b0 100%); color: white; }
.post-hero-in { max-width: 820px; margin: 0 auto; }
.post-hero .kicker, .post-hero .kicker a { color: #c9eee1; text-decoration: none; }
.post-hero h1 { color: white; }
.post-hero .lead { color: #f0fbf8; }
.post-hero .byline { color: #e1f4f0; border-bottom-color: #ffffff40; margin-bottom: 0; }
.post-hero .byline strong { color: white; }
.draft-note { margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; background: #fff4ee; color: #3a1405; font-size: 15px; }
.cover { max-width: 980px; margin: -88px auto 0; padding: 0 var(--gutter); }
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px #063a4530; }
.wrap.has-cover { padding-top: 40px; }
.wrap.wide { max-width: 1100px; padding-top: 0; }
.post-hero + .wrap.wide { margin-top: -72px; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin: 0; }
.posts li { padding: 0; border: 0; }
.posts a { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 16px 40px #063a4514; transition: transform .3s; }
.posts a:hover { transform: translateY(-4px); }
.posts img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.posts a > div { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.posts h2 { margin: 0; }
.posts .more { margin-top: 4px; font-weight: 600; color: var(--teal); }
.top { background: var(--bg); }
@media (max-width: 600px) { .post-hero { padding: 40px var(--gutter) 96px; } .cover { margin-top: -72px; } }
/* La franja ocupa todo el ancho; el margen lateral lo pone cada bloque */
main { padding: 0; }
.wrap { max-width: calc(720px + 2 * var(--gutter)); padding: 56px var(--gutter) 80px; }
.wrap.has-cover { padding-top: 40px; }
.wrap.wide { max-width: calc(1100px + 2 * var(--gutter)); padding-top: 0; }

/* Barra superior igual a la de la página principal: todo centrado en la misma línea */
.top { min-height: 96px; padding: 24px var(--gutter); }
.top img { width: 180px; }
.top nav { align-items: center; gap: 8px; }
.top nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 15px; line-height: 1; }
.top nav a:not(.cta):hover { background: var(--soft); }
.top nav a.cta { gap: 16px; padding: 0 18px; background: var(--ink); color: var(--bg); }
.top nav a.cta::after { content: '↗︎'; font-size: 20px; }
@media (max-width: 600px) { .top { min-height: 72px; padding: 12px var(--gutter); } .top img { width: 150px; } }