/* Modularian – How It Works */
.mdl-hiw{
  --bg: #ffffff;
  --text: #111111;
  --num: #0d6efd;       /* azul por defecto para el número */
  --gap: 20px;
  --radius: 16px;
  --pad: 18px;
  --cols-m: 1;
  --cols-t: 2;
  --cols-d: 3;
  --maxw: 1200px;
  padding: 10px 16px;
  color: var(--text);
}
.mdl-hiw-center{ display:flex; justify-content:center; }
.mdl-hiw-left  { display:flex; justify-content:flex-start; }
.mdl-hiw-grid{
  width: 100%;
  max-width: var(--maxw);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols-m), minmax(0,1fr));
}
@media(min-width: 768px){
  .mdl-hiw-grid{ grid-template-columns: repeat(var(--cols-t), minmax(0,1fr)); }
}
@media(min-width: 1024px){
  .mdl-hiw-grid{ grid-template-columns: repeat(var(--cols-d), minmax(0,1fr)); }
}

.mdl-hiw-item{
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.05);
  transition:all 0.3s ease;
}

.mdl-hiw-media{
  position: relative;
  aspect-ratio: 16/9;
  background: #f4f6f8;
   overflow: hidden; 
}
.mdl-hiw-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Insignia del número */
.mdl-hiw-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  color: var(--num);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  border: 2px solid var(--num);
  transition: all 0.3s ease;
}

.mdl-hiw-title{
  margin: 0;
  padding: var(--pad) var(--pad) 4px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: bold;
  min-height:60px;
}
.mdl-hiw-subtitle{
  margin: 0;
  padding: 0 var(--pad) var(--pad);
  font-size: 14px;
  line-height: 1.45;
  color: #444;
}
.mdl-hiw-item:hover{
    cursor:pointer;
    }


.mdl-hiw-item:hover{
    transform: scale(1.05);
    transition:all 0.3s ease;
}





    .mdl-hiw-item:hover .mdl-hiw-badge{
        left:-12px;
        top:-12px;
        transition: all 0.3s ease;
        overflow:auto;
    }
/* === Modal de imagen === */
.mdl-hiw-media{ cursor: zoom-in; }

.mdl-hiw-modal-open { overflow: hidden; } /* bloquea scroll del fondo */

.mdl-hiw-modal[hidden]{ display:none !important; }
.mdl-hiw-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mdl-hiw-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
}

.mdl-hiw-modal-content{
  position: relative;
  margin: 0;
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  z-index: 1;
  cursor: zoom-out;
}
.mdl-hiw-modal-content img{
  display: block;
  max-width: 100%;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}