/* --------FILTRES-------- */

.filtre-container{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:flex-start;
}

/* cercle base */
.filtre-circle{
  position:relative;
  width:120px;
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:bold;
  color:#000;
  transition:transform .25s;
  flex-shrink:0;

  /* anell metàl·lic del filtre */
  border:6px solid #2a2a2a;

  /* ombra suau */
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.35),
    0 4px 8px rgba(0,0,0,0.2);

  overflow:hidden;
}

/* reflex del vidre */
.filtre-circle::before{
  content:"";
  position:absolute;
  top:10%;
  left:15%;
  width:60%;
  height:40%;
  border-radius:50%;
  background:radial-gradient(circle,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.15) 50%,
      rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* vora interior del vidre */
.filtre-circle::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  box-shadow:inset 0 0 12px rgba(0,0,0,0.4);
}

/* hover */
.filtre-circle:hover{
  transform:scale(1.08);
}

/* --------- UV --------- */

.filtre-circle.uv{
  background:radial-gradient(circle at 50% 50%,
    #ffffff 0%,
    #f7f6ff 40%,
    #e9e6ff 75%,
    #dcd7ff 100%);
}

/* --------- POLARITZADOR --------- */

.filtre-circle.polarizador{
  background:radial-gradient(circle at 50% 50%,
    #f4f4f4 0%,
    #d8d8d8 45%,
    #bdbdbd 75%,
    #9e9e9e 100%);
}

/* --------- ND --------- */

.filtre-circle.nd{
  background:radial-gradient(circle at 50% 50%,
    #444 0%,
    #2a2a2a 60%,
    #111 100%);
  color:#fff;
}

/* --------- VARIABLE ND --------- */

.filtre-circle.variable{
  background:
    radial-gradient(circle at 50% 50%,
      #666 0%,
      #444 50%,
      #222 100%),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.05) 4px,
      rgba(0,0,0,0.05) 4px,
      rgba(0,0,0,0.05) 8px
    );
  color:#fff;
}

/* --------- mòbil --------- */

@media(max-width:768px){
  .filtre-container{justify-content:center;}
  .filtre-circle{width:100px;height:100px;}
}