Widget:Droflax

<style>

   .personaje-box {
       background: #1e1e1e;
       border-radius: 12px;
       padding: 16px;
       color: #fff;
       font-family: 'Segoe UI', sans-serif;
       max-width: 1100px;
       margin: auto;
       border: 2px solid #444;
   }

   .personaje-header {
       display: flex;
       gap: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
       flex-direction: column;
   }

   .personaje-header img {
       width: 230px;
       position: absolute;
       right: 16%;
   }

   .personaje-info .nombre {
       font-size: 32px;
       font-weight: bold;
   }

   .personaje-info .tier,
   .personaje-info .clase {
       font-size: 16px;
       color: #bbb;
   }

   .personaje-tabs {
       margin-block: 4px;
       display: flex;
       gap: 12px;
       justify-content: flex-start;
   }

   .tab-btn {
       padding: 8px 20px;
       background: #333;
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 18px;
       cursor: pointer;
   }

   .tab-btn.active {
       background: #007bff;
       font-weight: bold;
   }

   .tab-content {
       display: none;
       margin-top: 20px;
       animation: fadeIn 0.4s ease;
   }

   .tab-content.active {
       display: block;
   }

   .habilidades-container {
       display: flex;
       gap: 20px;
   }

   .prueba {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .cuadros-container {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       gap: 10px;
       width: 100%;
   }

   .cuadros-container .cuadro {
       width: 60px;
       height: 60px;
       border-radius: 5px;
       cursor: pointer;
   }

   .cuadro.activo {
       border: 1px solid #007bff;
   }

   .descripcion-container,
   .atributos-container {
       padding: 10px;
       background-color: #715757;
       border-radius: 5px;
   }

   .video-container {
       width: 400px;
       height: 200px;
       flex-shrink: 0;
       align-self: center;
       background-color: #000;
   }

   .attribute--cardsContainer {
       display: flex;
       justify-content: center;
       gap: 20px;
       flex-wrap: wrap;
       margin-top: 10px;
       background: unset;
       border: unset;
   }

   .cardAttribute {
       width: 80px;
       height: 90px;
       background-color: #473838;
       border-radius: 8px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 5px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: transform 0.2s;
   }

   .cardAttribute--icon {
       height: 28px;
       margin-bottom: 14px;
   }

   .cardAttribute--value {
       font-size: 14px !important;
       font-weight: bold;
       margin: 0 !important;
       color: white;
       border-bottom: unset;
   }

   .attribute-title,
   .card-skins-title {
       font-size: 1.4em;
       text-align: center;
       justify-self: center;
       letter-spacing: 1px;
       font-family: sans-serif !important;
       border-bottom: 2px solid #9d9c9c;
       color: white !important;
       padding-bottom: 8px;
       margin-bottom: 16px;
       width: 75%;
   }

   .card-skins {
       padding: 16px;
       border-radius: 12px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       margin-top: 20px;
   }

   .card-skins-title {
       display: block;
       border-bottom: unset;
       font-size: 18px;
       font-weight: bold;
       margin-bottom: 12px;
   }

   .skins--container {
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
       justify-content: center;
   }

   .skins--imageSkin {
       width: 200px;
       height: auto;
       background-color: #fefefe;
       border-radius: 6px;
       border: 1px solid #ccc;
       transition: transform 0.2s;
   }

   .skins--imageSkin:hover {
       transform: scale(1.05);
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

</style>