body {
        color: #fff; /* Cambio de color del texto a blanco para toda la página */
    }
    
    .content-column p {
        font-size: 1.5em; /* Aumenta el tamaño del texto */
    }
    .btn-simulador {
    background-color: #2C3E50; /* Azul oscuro */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px; /* Esquinas ligeramente redondeadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: background-color 0.3s, transform 0.3s ease; /* Transición suave */
}

.btn-simulador:hover {
    background-color: #34495E; /* Color más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Efecto de elevación al pasar el mouse */
}

    .gasha-pack {
        background-color: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
        border-radius: 10px; /* Bordes redondeados */
        padding: 10px;
        margin: 10px 0;
        width: 100%;
        display: flex;
        align-items: center; /* Alinea los elementos verticalmente en el centro */
        position: relative; /* Necesario para posicionamiento absoluto de hijos */
    }
    .gasha-pack .left-content {
        flex-shrink: 0; /* Evita que este contenido afecte el tamaño del flex */
        margin-right: 10px; /* Espacio entre el contenido de la izquierda y el centro */
    }
    .gasha-pack img {
        max-height: 40px; /* Ajusta la altura máxima de la imagen */
        position: relative; /* Necesario para posicionamiento absoluto de hijos */
    }
    .gasha-pack .item-num {
        position: absolute;
        right: -5px;
        bottom: -5px;
        color: #fff;
        font-size: 1.1em;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    .gasha-pack .ex-image {
        max-height: 35px; /* Ajusta la altura máxima de la imagen de gasha_pack_ex_ */
        position: absolute; /* Posicionamiento absoluto para subir la imagen */
        top: -20px; /* Mueve la imagen más arriba */
        left: 50%; /* Centra la imagen horizontalmente */
        transform: translateX(-50%); /* Ajusta la imagen para centrado preciso */
        z-index: 2; /* Asegura que la imagen esté sobre el texto */
    }
    .gasha-pack .center-content {
        flex-grow: 1; /* Permite que el contenido central ocupe el espacio restante */
        text-align: center; /* Centrar el texto */
        position: relative; /* Para posicionar la imagen de gasha_pack_ex_ */
        display: flex; /* Añadimos flex display para centrar vertical y horizontalmente */
        align-items: center; /* Centra verticalmente */
        justify-content: center; /* Centra horizontalmente */
        min-height: 60px; /* Ajusta según sea necesario para centrar el texto */
    }
    .gasha-pack .pack-detail {
        position: relative; /* Posicionamiento relativo para el texto */
        z-index: 1; /* Mantiene el texto detrás de la imagen */
    }
    .gasha-pack .right-content {
        flex-shrink: 0; /* Evita que este contenido afecte el tamaño del flex */
        margin-left: 10px; /* Espacio entre el contenido del centro y el derecho */
    }
    .gasha-pack .reward-num {
        position: absolute;
        right: 10px; /* Ajusta la posición según sea necesario */
        bottom: -5px; /* Ajusta la posición según sea necesario */
        color: #fff;
        font-size: 1.1em;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    /* Ajuste para cuando haya imagen de gasha_pack_ex_ */
    .gasha-pack .center-content.with-image .pack-detail {
        margin-top: 10px; /* Mantiene el margen superior cuando hay imagen */
    }
    .dates {
        margin-bottom: 10px;
        font-size: 1em;
    }
    .attribute-icon {
    position: relative;
    z-index: 1;
    height: 30%; /* Ajusta este valor para controlar cuánto se superponen las imágenes */
}
.rounded-corners {
        border-radius: 20px; /* Puedes ajustar el valor para más o menos redondeo */
    }
.character-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px; /* Espacio entre los elementos */
        margin-bottom: 20px;
    }

    .character-container {
        width: 160px; /* Ancho fijo para PC */
        padding: 5px;
        position: relative;
        transition: transform 0.3s ease;
    }

    .image-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
    }

    .character-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 1s ease-in-out;
    }

    .attribute-icon {
        width: 100%;
        display: block;
        margin-top: -40%;
        z-index: 1;
    }

    .rarity-icon {
        position: absolute;
        bottom: 10%;
        left: 0;
        width: 40%;
        z-index: 2;
    }

    .limited-icon {
        position: absolute;
        top: 0%;
        right: 0;
        width: 100%;
        z-index: 3;
    }

    .awake-icon {
        position: absolute;
        bottom: 10%;
        right: 1%;
        width: 35%;
        z-index: 4;
    }

    .character-container div {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 2px;
        color: white;
        overflow: hidden;
    }

    .character-container div span {
        font-size: 14px;
    }

    /* Media query para dispositivos móviles */
    @media (max-width: 768px) {
        .character-grid {
            /* Aseguramos que se mantenga el espacio entre elementos */
            gap: 2px;
        }
        .character-container {
            width: 170px; /* Reducimos un poco el ancho para asegurar 2 por fila */
            transform: scale(1.15); /* Mantenemos el tamaño */
        }
        
        .character-container div span {
            font-size: 10px; /* Mantenemos el tamaño del texto */
        }
    }

    /* Ajustes adicionales si es necesario para pantallas muy pequeñas */
    @media (max-width: 480px) {
        .character-grid {
            /* Aseguramos que se mantenga el espacio entre elementos */
            gap: 5px;
        }
        .character-container {
            width: 160px; /* Ajustamos el ancho para pantallas pequeñas */
            transform: scale(1.25); /* Mantenemos el tamaño */
        }
        
        .character-container div span {
            font-size: 8px; /* Mantenemos el tamaño del texto */
        }
    }

    /* Efecto de zoom */
    .character-container {
        transform: scale(1);
    }
    .character-container:hover {
        transform: scale(1.05);
    }