/* MAIN */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
}

.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0px 10px 0px;
}

.imgDiv {
  width: 150px;
  max-height: 150px;
  margin: 10px;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Paleta de 5 colores opacos y alegres */
:root {
  --tg-c1: #E8543A;   /* coral     */
  --tg-c2: #F5C518;   /* amarillo  */
  --tg-c3: #3DBE6E;   /* verde     */
  --tg-c4: #4A90D9;   /* azul      */
  --tg-c5: #9B59B6;   /* morado    */
}
 
/* Aplicar filtros a las imágenes PNG negras
   para convertirlas a cada color de la paleta.
   nth-child selecciona en grupos de 5.          */
 
/* Color 1 — coral */
.imgDiv:nth-child(5n+1) .img {
  filter:
    brightness(0)
    saturate(100%)
    invert(40%)
    sepia(80%)
    saturate(600%)
    hue-rotate(330deg)
    brightness(95%);
}
 
/* Color 2 — amarillo */
.imgDiv:nth-child(5n+2) .img {
  filter:
    brightness(0)
    saturate(100%)
    invert(80%)
    sepia(90%)
    saturate(700%)
    hue-rotate(10deg)
    brightness(105%);
}
 
/* Color 3 — verde */
.imgDiv:nth-child(5n+3) .img {
  filter:
    brightness(0)
    saturate(100%)
    invert(60%)
    sepia(60%)
    saturate(500%)
    hue-rotate(100deg)
    brightness(90%);
}
 
/* Color 4 — azul */
.imgDiv:nth-child(5n+4) .img {
  filter:
    brightness(0)
    saturate(100%)
    invert(50%)
    sepia(60%)
    saturate(500%)
    hue-rotate(190deg)
    brightness(95%);
}
 
/* Color 5 — morado */
.imgDiv:nth-child(5n+5) .img {
  filter:
    brightness(0)
    saturate(100%)
    invert(40%)
    sepia(80%)
    saturate(600%)
    hue-rotate(250deg)
    brightness(90%);
}
 
/* Hover suave: levanta la opacidad para que brille */
.imgDiv:hover .img {
  filter: brightness(1.15) !important;
  transition: filter 0.2s ease;
  cursor: pointer;
}