.nft-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px; /* Más espacio entre tablas */
    background-color: var(--darker-bg); /* Fondo un poco más oscuro para la tabla */
    color: var(--text-color); /* Color de texto general */
    font-family: var(--font-main); /* Fuente de estilo ciberpunk */
    box-shadow: 0 0 15px var(--shadow-light-blue); /* Brillo cian */
}
.nft-table th, .nft-table td {
    border: 1px solid var(--cyber-blue); /* Borde con cyber-blue */
    padding: 12px;
    text-align: left;
}
.nft-table th {
    background-color: var(--dark-bg); /* Fondo para encabezados más oscuro */
    color: var(--cyber-blue);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nft-table tbody tr:nth-child(even) {
    background-color: var(--darker-bg); /* Cebra para filas, usando el mismo oscuro */
}
.nft-table tbody tr:hover {
    background-color: rgba(var(--cyber-blue), 0.1); /* Resaltar al pasar el ratón con un toque de cian */
}
.nft-table caption {
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--cyber-purple); /* Color de título de tabla, usando magenta */
    text-align: left;
    padding-left: 5px;
    border-left: 4px solid var(--cyber-blue); /* Borde cian */
}

/* Estilos generales del tema cyber */
.cyber-theme {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: var(--font-main);
}
.cyber-header {
    border-bottom: 2px solid var(--cyber-blue);
    padding-bottom: 20px;
    margin-bottom: 40px;
}
.cyber-heading {
    color: var(--cyber-blue);
    text-shadow: 0 0 10px var(--shadow-light-blue);
}
.cyber-subheading {
    color: var(--cyber-purple);
}
.cyber-section {
    background-color: var(--darker-bg);
    border: 1px solid var(--border-glow); /* Usando border-glow para el borde principal */
    box-shadow: 0 0 20px var(--shadow-light-blue);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
}
.cyber-heading-medium {
    color: var(--cyber-blue);
    text-shadow: 0 0 8px var(--shadow-light-blue);
    margin-bottom: 25px;
    border-left: 3px solid var(--cyber-blue);
    padding-left: 10px;
}
.cyber-heading-small {
    color: var(--cyber-purple);
    margin-top: 20px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--dark-blue); /* Borde punteado con tono cian oscuro */
    padding-bottom: 5px;
}
.cyber-card {
    background-color: var(--dark-bg);
    border: 1px solid var(--cyber-purple);
    box-shadow: 0 0 10px var(--shadow-light-purple);
    border-radius: 5px;
    padding: 20px;
    transition: transform 0.2s ease-in-out;
}
.cyber-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--shadow-light-purple);
}
.cyber-img-border {
    border: 2px solid var(--cyber-blue);
    box-shadow: 0 0 15px var(--shadow-light-blue);
    border-radius: 5px;
}
.cyber-text {
    color: var(--text-color-light); /* Usando el blanco para el texto general */
}
.cyber-btn-primary {
    background-color: var(--cyber-blue);
    color: var(--dark-bg); /* Texto oscuro sobre el botón cian */
    border: 1px solid var(--cyber-blue);
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    text-transform: uppercase;
    font-weight: bold;
}
.cyber-btn-primary:hover {
    background-color: var(--cyber-purple); /* Cambia a magenta al pasar el ratón */
    color: var(--dark-bg);
    box-shadow: 0 0 15px var(--shadow-light-purple);
}
.cyber-btn-secondary {
    background-color: var(--darker-bg); /* Fondo del botón secundario más oscuro */
    color: var(--cyber-purple); /* Color del texto magenta */
    border: 1px solid var(--cyber-purple);
    padding: 12px 25px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}
.cyber-btn-secondary:hover {
    background-color: var(--cyber-purple); /* Fondo magenta al pasar el ratón */
    color: var(--dark-bg);
    box-shadow: 0 0 15px var(--shadow-light-purple);
}
.ritual-list {
    /* La sangría ahora se gestiona con padding-left */
    padding-left: 20px; /* Ajusta este valor si necesitas más o menos sangría */
    margin-bottom: 15px; /* Espacio debajo de la lista */
    list-style-position: inside; /* Mueve el marcador (punto/número) dentro del flujo del texto */
}

/* Reglas específicas para el tipo de lista */
ol.ritual-list {
    list-style-type: decimal; /* Para listas numeradas */
}

ul.ritual-list {
    list-style-type: disc; /* Para listas de puntos */
}

.ritual-list li {
    margin-bottom: 5px; /* Espacio entre ítems de la lista */
}

.code-block {
    margin-left: 20px; /* Sangría para el bloque de código */
    background-color: #1a1a1a; /* Fondo oscuro */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    color: #f8f8f2; /* Color de texto claro para el código */
    overflow-x: auto; /* Para desplazamiento horizontal si el código es muy largo */
}

/* Estilo para los enlaces dentro del ritual */
.ritual-link {
    color: var(--cyber-blue); /* Color principal del enlace */
    text-decoration: underline;
    font-weight: bold; /* Para que resalte más */
    transition: color 0.3s ease;
}

.ritual-link:hover {
    color: var(--cyber-accent-color); /* Color de acento al pasar el ratón, si tienes una variable --cyber-accent-color */
}

/* Ajustes generales de espaciado para los párrafos, si no los tienes ya */
.cyber-text p {
    margin-bottom: 15px; /* Espacio por defecto entre párrafos */
}

h3, h4, h5 {
    margin-top: 25px; /* Espacio superior para títulos */
    margin-bottom: 15px; /* Espacio inferior para títulos */
}

/* --- ESTILOS ESPECÍFICOS PARA LOS ICONOS DE FONT AWESOME --- */

/* Aplicamos a todos los iconos FAS y FAB para asegurar la fuente y el peso */
i.fas,
i.fab {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-serif !important;
    font-weight: 900 !important; /* Para iconos Solid (fas) */
    /* Para iconos Brand (fab), también suelen usar 900 o 400. Font Awesome 5 Free cubre ambos sets. */
    font-style: normal; /* Asegura que no se italicen por defecto */
    text-rendering: auto; /* Mejora la calidad del renderizado de la fuente del icono */
    -webkit-font-smoothing: antialiased; /* Suavizado para Webkit (Chrome, Safari) */
    -moz-osx-font-smoothing: grayscale; /* Suavizado para Firefox */
    display: inline-block; /* Asegura que el icono ocupa espacio y no se colapsa */
    line-height: 1; /* Ayuda a centrar verticalmente */
    color: var(--cyber-blue) !important; /* Fuerza el color con tu variable */
}

/* Reglas específicas para el tamaño y margen de los iconos en los títulos de paso */
h4 i.fas.fa-circle,
h5 i.fas.fa-dot-circle {
    font-size: 0.8em; /* Tamaño relativo al texto del título */
    vertical-align: middle; /* Alineación vertical */
    margin-right: 8px; /* Espacio entre el icono y el texto del título */
}

/* Reglas específicas para el tamaño y margen de los iconos en los enlaces rituales */
.ritual-link i.fas,
.ritual-link i.fab {
    font-size: 0.9em; /* Ligeramente más pequeños en los enlaces */
    vertical-align: baseline; /* Alineación con el texto del enlace */
    margin-right: 5px; /* Espacio a la derecha del icono */
}

/* Regla para el icono de la corona en el título final */
h3 i.fas.fa-crown {
    font-size: 1em; /* Tamaño normal de la corona */
    vertical-align: middle;
    margin-right: 10px;
}