/* ────────────────────────────────────────────────────────────────────────
   GUÍAS GRATUITAS  ·  capa 3 (pantalla)
   educreia.com/guia — "Tu primer curso online" (quien comenta "GUÍA" en redes).
   educreia.com/guia-mensajes — "Mensajes automáticos por comentario" ("AUTO").
   Se apoya en presentacion.css (.pres-hero, .pres-kicker, .pres-lead,
   .pres-agenda, .pres-list) y en el CTA de cierre del blog (.art-cta).
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --guia-max:     68rem;   /* ancho de la cabecera de dos columnas      */
  --guia-copy:    30rem;   /* ancho de la columna de texto              */
  --guia-mock:    34rem;   /* ancho máximo del mockup                   */
  --guia-mock-sm: 22rem;   /* mockup en el celular                      */
}

.guia-hero{
  max-width:var(--guia-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, var(--guia-copy)) minmax(0, 1fr);
  align-items:center;
  gap:var(--sp-6);
}
.guia-copy{ text-align:left; }
.guia-copy .edu-display{ margin-left:0; margin-right:0; }
.guia-lead{ margin-left:0; margin-right:0; }
.guia-nota{
  font-size:var(--fs-13);
  color:var(--navy-500);
  margin:var(--sp-3) 0 0;
}
.guia-mockup{
  display:block;
  width:100%;
  max-width:var(--guia-mock);
  height:auto;
  justify-self:center;
}

.guia-incluye{
  text-align:center;
  font-size:var(--fs-16);
  color:var(--navy-600);
  max-width:var(--pres-lead);
  margin:0 auto var(--sp-5);
}
/* 8 pasos: dos columnas de 4 (la agenda de la presentación usa 5); la guía de mensajes tiene 6 */
.guia-pasos{ grid-template-rows:repeat(4, auto); }
.guia-pasos.seis{ grid-template-rows:repeat(3, auto); }

@media (max-width:720px){
  .guia-hero{ grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); }
  .guia-copy{ text-align:center; }
  .guia-mockup{ max-width:var(--guia-mock-sm); order:-1; }
  .guia-pasos,
  .guia-pasos.seis{ grid-template-rows:none; }
}