.simple-tabby {
  width: 100%;
  font-family: var(--font-primary);
  padding: 0.7rem;
  background-color: var(--starAdventurePeru-bg-dark);
  border-radius: 2rem;
}

/* Navegación Tab */
.simple-tabby-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  gap: 2rem;
}
/* Botones Tab inactivos */
.simple-tabby-btn {
  position: relative;
  color: var(--color-vibe-light);
  cursor: pointer;
  padding: 1.2rem 1.7rem;
  background: none;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  border-radius: 1rem;
  border: none; /* remove default border */
  z-index: 0;
  overflow: hidden;
}

/* Gradient efecto en el borde */
.simple-tabby-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--starAdventurePeru-gradient-green);

  /* Enmascarar y dejar "hueco" el a tag */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  z-index: -1;
}
.simple-tabby-btn:hover::before {
  background: linear-gradient(
    135deg,
    var(--color-vibe-yellow-dark),
    var(--color-vibe-green-dark)
  );
  transition: background 0.4s ease;
}
.simple-tabby-btn.active {
  color: var(--color-vibe-light);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}
/* Llenar los borde  */
.simple-tabby-btn.active::before {
  background: var(--starAdventurePeru-gradient-green);
  -webkit-mask: none;
  mask: none;
}
/* Contenido Tab */
.simple-tabby-content {
  display: none;
  padding: 2rem;
  background-color: var(--starAdventurePeru-bg);
  animation: fadeIn 0.4s ease;
  border-radius: 3rem;
}
.simple-tabby-content * {
  text-align: left;
}
.simple-tabby-content h2 {
  font-size: 1.8rem;
}
.simple-tabby-content p {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}
.simple-tabby-content ul {
  padding-left: 2rem;
}
.simple-tabby-content.active {
  display: block;
}
.simple-tabby-nav li::marker {
  content: none !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 750px) {
  .simple-tabby-nav {
    flex-direction: column;
    border: none;
  }
  .simple-tabby-btn {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .simple-tabby-btn.active {
    color: var(--color-vibe-light);
  }
  .simple-tabby-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.35s ease;
    border-top: none;
    padding: 0 1.5rem;
  }
  .simple-tabby-content.active {
    opacity: 1;
    padding: 1.5rem;
    max-height: 800rem;
  }
  .simple-tabby-content ul {
    padding-left: 0rem;
  }
}