/* HabitApp Blog — estilos autónomos (paleta Organic Enterprise) */
:root{
  --ink:#002B19; --ink2:#001309; --green:#336B24; --bud:#B6F69E;
  --cream:#FCF9F8; --text:#1B1B1B; --muted:#414943; --line:rgba(0,43,25,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Nav */
.b-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);background:rgba(14,19,32,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.b-nav a.b-logo img{height:28px;width:auto;display:block}
.b-nav .b-cta{background:var(--bud);color:var(--ink)!important;font-weight:700;padding:9px 20px;border-radius:100px;font-size:.9rem}
.b-nav .b-cta:hover{text-decoration:none;background:#c9f9b6}
.b-nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.b-nav-links a{color:rgba(255,255,255,.85);font-size:.92rem;font-weight:500;text-decoration:none}
.b-nav-links a:hover{color:#fff;text-decoration:none}
.b-nav-burger{display:none;background:transparent;border:0;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.b-nav-burger span{width:22px;height:2px;background:#fff;display:block}
@media(max-width:900px){
  .b-nav-links{position:fixed;top:60px;left:0;right:0;background:#0e1320;flex-direction:column;align-items:flex-start;
    gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:1px solid rgba(255,255,255,.08)}
  .b-nav-links.open{max-height:400px}
  .b-nav-links a{width:100%;padding:14px clamp(20px,5vw,64px);border-top:1px solid rgba(255,255,255,.06)}
  .b-nav-links .b-cta{margin:14px clamp(20px,5vw,64px)}
  .b-nav-burger{display:flex}
}

/* Layout */
.b-wrap{max-width:760px;margin:0 auto;padding:56px clamp(20px,5vw,32px) 0}
.b-crumb{font-size:.8rem;color:var(--muted);margin-bottom:22px}
.b-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:14px}
h1.b-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2rem,4.6vw,3rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.b-meta{font-size:.85rem;color:var(--muted);margin-bottom:34px;display:flex;gap:14px;flex-wrap:wrap}
.b-lead{font-size:1.18rem;line-height:1.65;color:var(--muted);margin-bottom:36px}
.b-body h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--ink);margin:38px 0 14px;letter-spacing:-.01em}
.b-body h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.2rem;color:var(--ink);margin:26px 0 10px}
.b-body p{margin-bottom:18px;color:#2b332e}
.b-body ul,.b-body ol{margin:0 0 20px 22px;color:#2b332e}
.b-body li{margin-bottom:8px}
.b-body strong{color:var(--ink)}
.b-callout{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;padding:18px 22px;margin:24px 0;font-size:.95rem}

/* CTA */
.b-ctabox{background:linear-gradient(160deg,var(--ink),var(--ink2));color:#fff;border-radius:20px;padding:34px;text-align:center;margin:44px 0}
.b-ctabox h3{font-family:'Bricolage Grotesque',sans-serif;color:#fff;font-size:1.5rem;margin-bottom:10px}
.b-ctabox p{color:rgba(255,255,255,.8);margin-bottom:20px}
.b-ctabox a{display:inline-block;background:var(--bud);color:var(--ink);font-weight:700;padding:13px 26px;border-radius:100px}
.b-ctabox a:hover{text-decoration:none;background:#c9f9b6}

/* Sources / disclaimer */
.b-src{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:36px}
.b-src a{word-break:break-word}

/* Related */
.b-related{margin:48px 0}
.b-related h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;color:var(--ink);margin-bottom:16px}
.b-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.b-card{display:block;border:1px solid var(--line);border-radius:14px;padding:18px;transition:border-color .2s,transform .2s}
.b-card:hover{border-color:rgba(51,107,36,.4);transform:translateY(-2px);text-decoration:none}
.b-card span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green);font-weight:700}
.b-card p{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:var(--ink);margin-top:6px;line-height:1.25}

/* Index */
.b-hero{background:linear-gradient(180deg,var(--ink2),var(--ink));color:#fff;padding:clamp(70px,10vw,120px) clamp(20px,5vw,64px);text-align:center}
.b-hero .b-eyebrow{color:var(--bud)}
.b-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.02em;margin-bottom:14px}
.b-hero p{color:rgba(255,255,255,.8);max-width:620px;margin:0 auto;font-size:1.05rem}
.b-list{max-width:1080px;margin:0 auto;padding:56px clamp(20px,5vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.b-item{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.b-item:hover{border-color:rgba(51,107,36,.35);box-shadow:0 12px 34px rgba(0,43,25,.06);transform:translateY(-3px);text-decoration:none}
.b-item .cover{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#e9f9e3}
.b-item .b-item-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
.b-item .cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:700;margin-bottom:10px}
.b-item h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);line-height:1.2;margin-bottom:8px}
.b-item p{color:var(--muted);font-size:.92rem;flex:1;margin-bottom:14px}
.b-item .rd{font-size:.8rem;color:var(--muted)}

/* Footer */
.b-foot{background:var(--ink2);color:rgba(205,232,212,.75);padding:44px clamp(20px,5vw,64px);text-align:center;font-size:.85rem;margin-top:40px}
.b-foot a{color:var(--bud)}