/* ===============================
      BOTÓN ACTIVO 
      =============================== */

   .home-btn[data-type="oped"] .btn{
     background: linear-gradient(180deg,#ffffff,#dcdcdc) !important;
     border-color:#ffffff !important;
     color:#000 !important;
     box-shadow:
       0 0 12px rgba(255,255,255,.6),
       inset 0 1px 0 rgba(255,255,255,.8);
   }

   .home-btn[data-type="oped"] .btn:hover{
     background: linear-gradient(180deg,#ffffff,#eaeaea) !important;
     color:#000 !important;
   }

/* ========================================================= */
/* ========================================================= */

.general-layout {
  display: block;
}
.oped-wrapper{
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}
.oped-header{
  background: #0000008c;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.oped-header h1{
  font-size:32px;
  margin-bottom:8px;
  color: #FFB300;
}

.oped-options{
  margin:20px 0 40px;
}

.oped-options select{
  padding:6px 10px;
  border-radius:8px;
}

.oped-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  max-width: 1000px;
  margin-bottom: 25px;
}

@media (max-width: 1110px){
  .oped-grid{
    grid-template-columns: 1fr;
  }
}

.oped-card {
  background: rgba(0, 0, 0, 0.61);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: .2s ease;
}

.oped-card:hover{
  transform:translateY(-5px);
  background:rgba(255, 255, 255, 0.28);
}

.oped-card img{
  max-width: 250px;
  margin: 0 auto 10px auto;
  border: 3px solid;
}
.general-full{
  margin-top: 20px;
}
@media (max-width: 800px) {
  .general-full {
    padding: 10px 0px 0px 0px;
  }
}

h2{
  color:white;
}