/* ────────────────────────────────────────────────────────────────────────
   BLOG DE EDUCREIA  ·  capa 3 (pantalla)
   El blog de marketing de la plataforma, servido en el dominio base
   (educreia.com/blog). Reusa el look de la landing (body.mk.calm, .mk-nav,
   .mk-footer, botones .btn-*) y —para el cuerpo del artículo— la tipografía
   de contenido `.rt-doc` (la misma que ve el alumno en una clase): así la
   prosa no se estila dos veces.

   Todo sale de las variables de capa 1/2 (colors_and_type.css / ui.css).
   Las medidas de columna de lectura van en rem/ch (unidades semánticas, no
   "números mágicos" en px) y se declaran acá arriba, una sola vez.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --blog-col:  60rem;   /* ancho de lectura de un artículo (~30% más ancho) */
  --blog-wide: 72rem;   /* ancho del listado y de la cabecera               */
  --obj-ico:   3.25rem; /* diámetro del círculo de ícono del gráfico de objetivos */
}

/* La página entera del blog respira el fondo de página del sistema */
body.blog-page{ background:var(--bg-2); }

/* ── Cabecera de sección (listado) ─────────────────────────────────────── */
.blog-top{
  max-width:var(--blog-wide);
  margin:0 auto;
  padding:var(--sp-8) var(--sp-5) var(--sp-6);
  text-align:center;
}
.blog-top .kicker{
  display:inline-block;
  font-size:var(--fs-12);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--pame-teal-700);
  margin-bottom:var(--sp-3);
}
.blog-top h1{
  font-family:var(--font-display);
  font-size:var(--fs-40);
  line-height:1.1;
  color:var(--pame-ink);
  margin:0 0 var(--sp-3);
}
.blog-top p{
  font-size:var(--fs-18);
  color:var(--pame-ink-2);
  max-width:var(--blog-col);
  margin:0 auto;
}

/* ── Grilla de artículos ───────────────────────────────────────────────── */
.blog-grid{
  max-width:var(--blog-wide);
  margin:0 auto;
  padding:0 var(--sp-5) var(--sp-9);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
  gap:var(--sp-5);
}
.blog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  background:var(--bg-1);
  border:1px solid var(--pame-line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.blog-card .kicker{
  font-size:var(--fs-11);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--pame-teal-700);
}
.blog-card h2{
  font-family:var(--font-display);
  font-size:var(--fs-24);
  line-height:1.15;
  color:var(--pame-ink);
  margin:0;
}
.blog-card p{
  font-size:var(--fs-14);
  color:var(--pame-ink-2);
  margin:0;
  flex:1;
}
.blog-card .blog-meta{
  font-size:var(--fs-12);
  color:var(--pame-ink-3);
}
/* Link que cubre toda la tarjeta (accesible: el texto real del <a> es el título) */
.blog-card a.stretch::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r-md);
}
.blog-card a{ color:inherit; text-decoration:none; }

/* Tarjeta "próximamente": mismo molde, apagada y sin link */
.blog-card.is-soon{ box-shadow:none; background:var(--bg-2); border-style:dashed; }
.blog-card.is-soon h2{ color:var(--pame-ink-3); }

/* ── Artículo ──────────────────────────────────────────────────────────── */
.art{
  max-width:var(--blog-col);
  margin:0 auto;
  padding:var(--sp-6) var(--sp-5) var(--sp-9);
}
.art-back{
  display:inline-block;
  font-size:var(--fs-13);
  font-weight:700;
  color:var(--pame-teal-700);
  text-decoration:none;
  margin-bottom:var(--sp-5);
}
.art-back:hover{ text-decoration:underline; }

.art-head{ margin-bottom:var(--sp-6); }
.art-head .kicker{
  display:inline-block;
  font-size:var(--fs-12);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--pame-teal-700);
  margin-bottom:var(--sp-3);
}
.art-head h1{
  font-family:var(--font-display);
  font-size:var(--fs-40);
  line-height:1.1;
  color:var(--pame-ink);
  margin:0 0 var(--sp-4);
}
.art-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-3);
  align-items:center;
  font-size:var(--fs-13);
  color:var(--pame-ink-3);
}
.art-meta .sep{ color:var(--pame-line); }
.art-lead{
  font-size:var(--fs-20);
  line-height:1.5;
  color:var(--pame-ink-2);
  margin:var(--sp-5) 0 0;
}

/* El cuerpo usa `.rt-doc` para toda la prosa; acá solo el ritmo vertical
   propio del artículo largo (más aire entre secciones que en una clase). */
.art-body{ margin-top:var(--sp-6); }
.art-body.rt-doc h3{ margin-top:var(--sp-7); }
.art-body.rt-doc h3:first-child{ margin-top:0; }

/* Gráfico de objetivos: fila de íconos con etiqueta, dentro de un artículo.
   Va como <div class="obj-grid"> (fuera de un <p>) dentro de .rt-doc. */
.obj-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:var(--sp-4);
  margin:var(--sp-6) 0;
  text-align:center;
}
.obj-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
}
.obj-ico{
  width:var(--obj-ico);
  height:var(--obj-ico);
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:var(--pame-teal-10);
  color:var(--pame-teal-700);
}
.obj-ico svg{ width:52%; height:52%; }
.obj-item .obj-label{
  font-size:var(--fs-13);
  font-weight:700;
  line-height:1.2;
  color:var(--pame-ink);
}
@media (max-width:720px){
  .obj-grid{ grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); }
}
@media (max-width:400px){
  .obj-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Recuadro de nota/dato dentro del artículo */
.art-nota{
  margin:var(--sp-5) 0;
  padding:var(--sp-4) var(--sp-5);
  background:var(--pame-teal-10);
  border-left:3px solid var(--pame-teal);
  border-radius:var(--r-sm);
  font-size:var(--fs-15);
  color:var(--pame-ink-2);
}
.art-nota strong{ color:var(--pame-ink); }

/* ── CTA de cierre ─────────────────────────────────────────────────────── */
.art-cta{
  max-width:var(--blog-col);
  margin:var(--sp-8) auto;
  padding:var(--sp-7) var(--sp-6);
  text-align:center;
  background:var(--pame-blue);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.art-cta h2{
  font-family:var(--font-display);
  font-size:var(--fs-32);
  line-height:1.15;
  color:#fff;
  margin:0 0 var(--sp-3);
}
.art-cta p{
  font-size:var(--fs-16);
  color:rgba(255,255,255,.86);
  margin:0 auto var(--sp-5);
  max-width:34rem;
}

/* ── Móvil ─────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .blog-top{ padding:var(--sp-6) var(--sp-4) var(--sp-5); }
  .blog-top h1{ font-size:var(--fs-32); }
  .blog-grid{ padding:0 var(--sp-4) var(--sp-8); }
  .art{ padding:var(--sp-5) var(--sp-4) var(--sp-8); }
  .art-head h1{ font-size:var(--fs-32); }
  .art-cta{ padding:var(--sp-6) var(--sp-4); }
  .art-cta h2{ font-size:var(--fs-24); }
}