/* ═══════════════════════════════════════════════════════════════
   ACADEMIA MMB — Blog
   Usa los tokens de marca (mmb-tokens.css). Estilo: índice tipo
   revista + artículo con tipografía cómoda de lectura. Light/dark
   automáticos vía los tokens.
   ═══════════════════════════════════════════════════════════════ */

.mmb-blog-body{
  font-family:'Inter', system-ui, sans-serif;
  margin:0;
  min-height:100vh;
}

.blog-wrap{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2rem);
}

/* ───────── Cabecera / navegación ───────── */
.blog-header{
  position:sticky; top:0; z-index:var(--mmb-z-nav, 100);
  background:var(--mmb-glass-bg);
  backdrop-filter:blur(var(--mmb-glass-blur, 18px));
  -webkit-backdrop-filter:blur(var(--mmb-glass-blur, 18px));
  border-bottom:1px solid var(--mmb-line);
}
.blog-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.7rem;
}
.blog-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.blog-brand-logo{ height:34px; width:auto; display:block; }
.blog-brand-text{ font-weight:700; font-size:1.2rem; color:var(--mmb-ink); letter-spacing:-.01em; }
.blog-brand-text span{ color:var(--mmb-office-cyan); }

.blog-nav{ display:flex; gap:1.6rem; }
.blog-nav a{
  color:var(--mmb-ink-dim); text-decoration:none; font-weight:500;
  font-size:.96rem; padding:.3rem 0; position:relative; transition:color .2s var(--mmb-ease-soft);
}
.blog-nav a:hover{ color:var(--mmb-ink); }
.blog-nav a.is-active{ color:var(--mmb-ink); }
.blog-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--mmb-office-cyan); border-radius:2px;
}

.blog-nav-actions{ display:flex; align-items:center; gap:.6rem; }
.blog-btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-weight:600; font-size:.92rem; border-radius:999px; padding:.55rem 1.1rem;
  transition:transform .2s var(--mmb-ease-soft), box-shadow .2s var(--mmb-ease-soft), background .2s var(--mmb-ease-soft);
  border:1px solid transparent; cursor:pointer;
}
.blog-btn-login{ color:var(--mmb-ink); border-color:var(--mmb-line-strong); background:transparent; }
.blog-btn-login:hover{ border-color:var(--mmb-office-cyan); color:var(--mmb-office-cyan); }
.blog-btn-primary{
  color:#fff; background:linear-gradient(120deg, var(--mmb-office-blue), var(--mmb-violet));
  box-shadow:var(--mmb-shadow-glow-blue);
}
.blog-btn-primary:hover{ transform:translateY(-2px); }

.blog-menu-btn{
  display:none; background:none; border:none; color:var(--mmb-ink);
  font-size:1.4rem; cursor:pointer;
}
.blog-menu-mobile{ border-bottom:1px solid var(--mmb-line); background:var(--mmb-bg-soft); }
.blog-menu-mobile-inner{ display:flex; flex-direction:column; gap:.9rem; padding-block:1.1rem; }
.blog-menu-mobile a{ color:var(--mmb-ink-dim); text-decoration:none; font-weight:500; }

/* ───────── Hero del índice ───────── */
.blog-hero{
  padding-block:clamp(2.6rem, 7vw, 4.6rem) clamp(1.6rem, 4vw, 2.6rem);
  background:radial-gradient(900px 420px at 50% -10%, rgba(0,120,212,.16), transparent 62%);
  text-align:center;
}
.blog-eyebrow{
  font-family:'JetBrains Mono', monospace; text-transform:uppercase;
  letter-spacing:.14em; font-size:.74rem; color:var(--mmb-office-cyan); margin:0 0 .9rem;
}
.blog-hero h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(2rem, 5.4vw, 3.3rem); line-height:1.05; margin:0 auto .9rem;
  color:var(--mmb-ink); max-width:16ch; text-wrap:balance;
}
.blog-hero p{
  color:var(--mmb-ink-dim); font-size:clamp(1rem, 2.2vw, 1.18rem);
  max-width:60ch; margin:0 auto; line-height:1.6;
}

/* ───────── Rejilla de artículos ───────── */
.blog-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.4rem; padding-block:clamp(1.4rem, 4vw, 2.4rem) clamp(3rem, 8vw, 5rem);
}
.blog-card{
  display:flex; flex-direction:column;
  background:var(--mmb-bg-elevated); border:1px solid var(--mmb-line);
  border-radius:var(--mmb-radius-md); padding:1.5rem; text-decoration:none;
  transition:transform .3s var(--mmb-ease-premium), border-color .3s var(--mmb-ease-premium), box-shadow .3s var(--mmb-ease-premium);
  position:relative; overflow:hidden;
}
.blog-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--mmb-office-blue), var(--mmb-office-cyan));
  opacity:0; transition:opacity .3s var(--mmb-ease-premium);
}
.blog-card:hover{
  transform:translateY(-4px); border-color:var(--mmb-line-strong);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
}
.blog-card:hover::before{ opacity:1; }
.blog-card-meta{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; flex-wrap:wrap; }
.blog-tag{
  font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mmb-office-cyan);
  border:1px solid var(--mmb-line-strong); border-radius:999px; padding:.2rem .6rem;
}
.blog-card-date{ font-size:.8rem; color:var(--mmb-ink-faint); }
.blog-card h2{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.25rem;
  line-height:1.25; color:var(--mmb-ink); margin:0 0 .6rem; text-wrap:balance;
}
.blog-card p{ color:var(--mmb-ink-dim); font-size:.95rem; line-height:1.55; margin:0 0 1.1rem; flex:1; }
.blog-card-more{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--mmb-office-cyan);
  font-weight:600; font-size:.92rem; margin-top:auto;
}
.blog-card:hover .blog-card-more i{ transform:translateX(3px); }
.blog-card-more i{ transition:transform .2s var(--mmb-ease-soft); }

/* ───────── Artículo ───────── */
.blog-article{ padding-block:clamp(1.8rem, 5vw, 3rem) clamp(2.5rem, 7vw, 4rem); }
.blog-article-head{ max-width:760px; margin-inline:auto; text-align:center; }
.blog-breadcrumb{
  font-size:.86rem; color:var(--mmb-ink-faint); margin-bottom:1.2rem;
}
.blog-breadcrumb a{ color:var(--mmb-ink-dim); text-decoration:none; }
.blog-breadcrumb a:hover{ color:var(--mmb-office-cyan); }
.blog-article-head h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(1.8rem, 4.6vw, 2.8rem); line-height:1.12; color:var(--mmb-ink);
  margin:.4rem 0 1rem; text-wrap:balance;
}
.blog-article-meta{
  display:flex; align-items:center; justify-content:center; gap:.7rem 1rem;
  flex-wrap:wrap; color:var(--mmb-ink-faint); font-size:.9rem; margin-bottom:2rem;
}

.blog-prose{
  max-width:720px; margin-inline:auto;
  color:var(--mmb-ink); font-size:1.08rem; line-height:1.75;
}
.blog-prose > p:first-of-type{ font-size:1.18rem; color:var(--mmb-ink); }
.blog-prose h2{
  font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:1.55rem; line-height:1.25; color:var(--mmb-ink);
  margin:2.4rem 0 .9rem; text-wrap:balance;
}
.blog-prose p{ margin:0 0 1.2rem; color:var(--mmb-ink-dim); }
.blog-prose strong{ color:var(--mmb-ink); font-weight:600; }
.blog-prose a{ color:var(--mmb-office-cyan); text-decoration:underline; text-underline-offset:2px; }
.blog-prose ul, .blog-prose ol{ margin:0 0 1.3rem; padding-left:1.3rem; color:var(--mmb-ink-dim); }
.blog-prose li{ margin-bottom:.55rem; }
.blog-prose li::marker{ color:var(--mmb-office-cyan); }

/* CTA al curso relacionado, dentro del artículo */
.blog-cta{
  max-width:720px; margin:2.8rem auto 0;
  background:linear-gradient(140deg, rgba(0,120,212,.12), rgba(139,92,246,.1));
  border:1px solid var(--mmb-line-strong); border-radius:var(--mmb-radius-md);
  padding:1.8rem; text-align:center;
}
.blog-cta p.k{ font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--mmb-office-cyan); margin:0 0 .5rem; }
.blog-cta h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.4rem; color:var(--mmb-ink); margin:0 0 .5rem; }
.blog-cta p.d{ color:var(--mmb-ink-dim); margin:0 0 1.3rem; }

/* Navegación entre artículos / volver */
.blog-article-foot{
  max-width:720px; margin:3rem auto 0; padding-top:1.6rem;
  border-top:1px solid var(--mmb-line); text-align:center;
}
.blog-back{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--mmb-ink-dim);
  text-decoration:none; font-weight:500; font-size:.95rem;
}
.blog-back:hover{ color:var(--mmb-office-cyan); }

/* Otros artículos */
.blog-related{ padding-block:clamp(2rem,6vw,3.4rem); border-top:1px solid var(--mmb-line); }
.blog-related h2{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.5rem;
  color:var(--mmb-ink); text-align:center; margin:0 0 1.8rem;
}

/* ───────── Pie ───────── */
.blog-footer{ border-top:1px solid var(--mmb-line); background:var(--mmb-bg-soft); padding-block:3rem 2.4rem; }
.blog-footer-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:2rem; }
.blog-footer-tag{ color:var(--mmb-ink-dim); font-size:.92rem; line-height:1.55; max-width:30ch; }
.blog-footer-h{ font-size:1rem; font-weight:600; color:var(--mmb-ink); margin:0 0 .8rem; }
.blog-footer ul{ list-style:none; margin:0; padding:0; line-height:2; }
.blog-footer a{ color:var(--mmb-ink-dim); text-decoration:none; font-size:.92rem; }
.blog-footer a:hover{ color:var(--mmb-office-cyan); }
.blog-footer-base{
  margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--mmb-line);
  text-align:center; color:var(--mmb-ink-faint); font-size:.84rem;
}

/* ───────── Responsive ───────── */
@media (max-width: 820px){
  .blog-nav, .blog-nav-actions{ display:none; }
  .blog-menu-btn{ display:inline-flex; }
}
@media (min-width: 821px){
  .blog-menu-mobile{ display:none; }
}