/* Growing · blog — mismo sistema de diseño que la home */
:root{
  --cream:#FBF7EF;--bone:#EFE8D8;--ink:#15140F;--forest:#1C7A45;--forest-deep:#145E35;
  --coral:#FF5A3C;--coral-deep:#D8331A;--lime:#C4E938;--graphite:#45403A;--stone:#8A8276;
  --hair-light:rgba(21,20,15,0.14);--hair-dark:rgba(251,247,239,0.18);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:0 32px}
.mono{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:12px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(251,247,239,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair-light)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:1140px;margin:0 auto;padding:0 32px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-sym{width:26px;height:22px;background:var(--ink);clip-path:polygon(50% 0,100% 52%,100% 100%,50% 48%,0 100%,0 52%);flex:none}
.logo-word{font-weight:700;font-size:24px;letter-spacing:-.03em}
.logo-word .dot{display:inline-block;width:.2em;height:.2em;background:var(--coral)}
.nav-back{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--graphite);text-decoration:none;padding-bottom:3px;position:relative}
.nav-back::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-back:hover::after{transform:scaleX(1)}

/* índice del blog */
.blog-head{padding:clamp(64px,9vw,110px) 0 clamp(28px,4vw,44px)}
.blog-head h1{font-weight:700;font-size:clamp(40px,6.5vw,76px);letter-spacing:-.035em;line-height:1}
.blog-head p{font-size:clamp(18px,2.2vw,23px);line-height:1.45;color:var(--graphite);margin-top:18px;max-width:52ch}
.post-list{border-top:1px solid var(--hair-light);margin-bottom:clamp(72px,10vw,130px)}
.post-row{display:grid;grid-template-columns:140px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--hair-light);color:var(--ink);text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.post-row:hover{transform:translateX(8px)}
.p-date{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.p-title{font-weight:700;font-size:clamp(19px,2.6vw,26px);letter-spacing:-.025em;line-height:1.12}
.p-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);font-weight:600}

/* artículo */
article{padding:clamp(56px,8vw,96px) 0 clamp(48px,7vw,80px)}
.a-meta{display:flex;gap:18px;align-items:center;color:var(--stone)}
.a-meta .tag{color:var(--coral-deep)}
article h1{font-weight:700;font-size:clamp(34px,5.6vw,62px);letter-spacing:-.035em;line-height:1.02;margin:18px 0 14px;max-width:18ch}
.a-standfirst{font-size:clamp(19px,2.3vw,24px);line-height:1.45;color:var(--graphite);margin:14px 0 0;max-width:48ch}
.a-body{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--hair-light);padding-top:clamp(32px,4vw,44px)}
.a-body p{font-size:18px;line-height:1.65;margin-bottom:22px;max-width:65ch}
.a-body h2{font-weight:700;font-size:clamp(23px,3vw,30px);letter-spacing:-.025em;line-height:1.1;margin:38px 0 16px}
.a-body strong{font-weight:600}
.a-body ul{list-style:none;display:grid;gap:12px;margin:0 0 24px}
.a-body ul li{display:flex;gap:13px;align-items:flex-start;font-size:18px;line-height:1.5;max-width:62ch}
.a-body ul li::before{content:"";width:.55em;height:.55em;margin-top:.45em;background:var(--coral);flex:none}
.a-callout{background:var(--ink);color:var(--cream);padding:26px 28px;margin:34px 0}
.a-callout .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--lime);display:block;margin-bottom:10px}
.a-callout p{color:var(--cream);font-size:17px;line-height:1.55;margin:0;max-width:60ch}

/* cta final */
.a-cta{background:var(--forest);color:var(--cream);padding:clamp(32px,4vw,46px);margin:clamp(40px,6vw,64px) 0}
.a-cta .big{font-weight:700;font-size:clamp(23px,3.2vw,32px);letter-spacing:-.03em;line-height:1.05;margin-bottom:20px;max-width:22ch}
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:17px;padding:15px 30px;border:0;cursor:pointer;text-decoration:none;background:var(--lime);color:var(--ink);transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,color .25s}
.btn:hover{background:var(--cream);transform:translateY(-2px)}

/* footer */
footer{background:var(--ink);color:var(--bone);padding:48px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;max-width:1140px;margin:0 auto;padding:0 32px}
.foot .logo-sym{background:var(--lime)}
.foot .logo-word{color:var(--cream)}
.foot .logo-word .dot{background:var(--lime)}
.fcopy{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}

@media(max-width:768px){
  .wrap,.nav,.foot{padding-left:24px;padding-right:24px}
  .post-row{grid-template-columns:1fr auto;gap:6px 18px}
  .post-row .p-date{order:3}
  .post-row .p-title{grid-column:1/-1}
  .post-row .p-tag{order:4;justify-self:end}
}
@media (prefers-reduced-motion: reduce){
  .post-row,.btn,.nav-back::after{transition:none}
}