/* Cierre ilustrado (plantilla MRUV / Mr. Zeuss) */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700;800&display=swap");



.cierre-mruv,

.cierre-ilustrado {

  width: 100%;

  padding: 24px 0;

  font-family: "Baloo 2", "Comic Sans MS", Arial, sans-serif;

  box-sizing: border-box;

  position: relative;

  z-index: 1;

}



.cierre-ilust-content,

.mruv-content {

  position: relative;

  max-width: 1120px;

  margin: 0 auto;

  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);

  border: 3px solid #14532d;

  border-radius: 24px;

  box-shadow: 0 20px 45px rgba(0,0,0,0.28);

  padding: 22px;

  box-sizing: border-box;

}



.cierre-ilust-hero,

.mruv-hero {

  display: grid;

  grid-template-columns: 180px 1fr 260px;

  gap: 18px;

  align-items: center;

  border: 2px solid #86efac;

  border-radius: 20px;

  background: #ecfdf5;

  padding: 18px;

  margin-bottom: 18px;

}



.cierre-ilust-personaje img,

.cierre-ilust-final img,

.cierre-ilust-tarea img,

.mruv-personaje img,

.mruv-cierre-final img,

.mruv-tarea img {

  max-width: 100%;

  display: block;

}



.cierre-ilust-hero-texto h2,

.mruv-hero-texto h2 {

  margin: 0 0 8px 0;

  font-size: 48px;

  color: #166534;

  line-height: 1;

  text-shadow: 1px 2px 0 #bbf7d0;

}



.cierre-ilust-hero-texto p,

.mruv-hero-texto p {

  margin: 0;

  font-size: 24px;

  line-height: 1.35;

  color: #052e16;

}



.cierre-ilust-imagen-contexto,

.mruv-imagen-contexto {

  border-radius: 18px;

  background: white;

  border: 2px solid #bbf7d0;

  padding: 10px;

}



.cierre-ilust-imagen-contexto img,

.mruv-imagen-contexto img {

  width: 100%;

  border-radius: 14px;

  max-height: 180px;

  object-fit: contain;

}



.cierre-ilust-bloque h3,

.mruv-bloque h3 {

  margin: 8px 0 14px 0;

  font-size: 34px;

  color: #166534;

}



.cierre-ilust-tarea,

.mruv-tarea {

  display: grid;

  grid-template-columns: 42px 1fr auto;

  gap: 16px;

  align-items: center;

  min-height: 116px;

  background: white;

  border: 2px solid #bbf7d0;

  border-radius: 18px;

  padding: 14px 18px;

  margin-bottom: 14px;

  box-shadow: 0 6px 16px rgba(20, 83, 45, 0.08);

}



.cierre-ilust-icono,

.mruv-icono {

  color: #2563eb;

  font-size: 28px;

  font-weight: 900;

}



.cierre-ilust-tarea p,

.mruv-tarea p {

  margin: 0;

  font-size: 24px;

  line-height: 1.25;

  color: #111827;

}



.cierre-ilust-tarea strong,

.mruv-tarea strong {

  color: #2563eb;

}



.cierre-ilust-tarea img,

.mruv-tarea img {

  width: 148px;

  height: 110px;

  object-fit: cover;

  object-position: center 18%;

  border-radius: 14px;

  box-shadow: 0 4px 12px rgba(20, 83, 45, 0.15);

}



.cierre-ilust-final,

.mruv-cierre-final {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 18px;

  align-items: center;

  background: #ecfdf5;

  border: 2px solid #86efac;

  border-radius: 18px;

  padding: 16px;

  margin-top: 16px;

}



.cierre-ilust-final h3,

.mruv-cierre-final h3 {

  margin: 0;

  font-size: 38px;

  color: #15803d;

}



.cierre-ilust-final p,

.mruv-cierre-final p {

  margin: 4px 0 0 0;

  font-size: 26px;

  color: #111827;

}



@media (max-width: 850px) {

  .cierre-ilust-hero,

  .mruv-hero {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .cierre-ilust-personaje img,

  .mruv-personaje img {

    max-height: 180px;

    margin: 0 auto;

  }

  .cierre-ilust-tarea,

  .mruv-tarea {

    grid-template-columns: 32px 1fr;

  }

  .cierre-ilust-tarea img,

  .mruv-tarea img {

    grid-column: 1 / -1;

    justify-self: center;

    width: 180px;

    height: 132px;

  }

}